<template>
  <div class="W-full pr30 pl30 pt30 bg-green">
    <div class="mr-auto ml-auto w877 relative bg-black">
      <img
        id="bg"
        style="width: 877px; height: 867px"
        src="http://www.bigemap.com/map_source/satel/small/14.png"
      />
      <canvas width="877" height="968" id="fuzhou"></canvas>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import api from "@/api";
import router from "@/router";
import fuzhou_full from "@/assets/json/福州市v2_full.json";
import fujian_full from "@/assets/json/福建省v3_full.json";
import fujian from "@/assets/json/福建省v3.json";
import echarts from "echarts";
import img149 from "@/assets/img/about/149.png";
// import echarts from 'echarts'
const logOut = () => {
  api.login.logout().then((res) => {
    router.push("/login");
  });
};
const renderMap = () => {
  var imageDom = document.createElement("img");
  imageDom.src = "http://www.bigemap.com/map_source/satel/small/14.png";
  echarts.registerMap("fujian", fujian);
  echarts.registerMap("fuzhou_full", fuzhou_full);
  echarts.registerMap("fujian_full", fujian_full);
  let Chart = echarts.init(document.getElementById("fuzhou"));
  // 颜色或文字的配置
  let option = {
    geo: [
      //   {
      //   type: "map",
      //   aspectScale: 1, // 横向拉伸

      //   zoom: 1, //缩放比例
      //   roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
      //   map: "fuzhou_full",
      //   nameMap: '福州地图',
      //   label: {
      //     show: true,
      //     normal: {
      //       show: true, // 默认地图文字字号和字体颜色
      //       fontSize: 10,
      //       color: "#ffffff",
      //     },
      //     emphasis: {
      //       show: true,
      //       fontSize: 10, // 选中地图文字字号和字体颜色
      //       color: "#CFCFCF",
      //     },
      //   },
      //   itemStyle: {

      //     normal: {
      //       areaColor: 'rgb(0,0,0,0)',
      //       borderWidth: 1, // 省份边框宽度
      //       opacity: 0.75, //图形透明度

      //     },
      //     emphasis: {
      //       areaColor: "#ff4400", // 高亮时候地图显示的颜色
      //       borderWidth: 0, // 高亮时的边框宽度
      //     },
      //   },
      //   layoutSize: 100,
      //   textFixed: {
      //     Alaska: [20, -20],
      //   }
      // },
      // {
      //   type: "map",
      //   aspectScale: 1, // 横向拉伸
      //   zlevel:1,
      //   tooltip: {},
      //   zoom: 1, //缩放比例
      //   roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
      //   map: "fujian",
      //   nameMap: "福建地图",
      //   label: {
      //     show: true,
      //     normal: {
      //       show: true, // 默认地图文字字号和字体颜色
      //       fontSize: 10,
      //       color: "#ffffff",
      //     },
      //     emphasis: {
      //       show: true,
      //       fontSize: 10, // 选中地图文字字号和字体颜色
      //       color: "#CFCFCF",
      //     },
      //   },
      //   itemStyle: {
      //     areaColor: "rgba(255,0,0,0)",
      //     opacity: 1,
      //     borderColor: "#fff",
      //     borderWidth: 2,
          
      //     emphasis: {
      //       areaColor: "rgba(0,0,0,0)", // 高亮时候地图显示的颜色
      //       borderWidth: 0, // 高亮时的边框宽度
      //     },
      //   },
      //   layoutCenter: ["50%", "44.5%"],
      //   layoutSize: 877,
      //   top: 0,
      //   left: 0,
      //   textFixed: {
      //     Alaska: [20, -20],
      //   },
      // },
      {
        type: "map",
        aspectScale: 1, // 横向拉伸
    
        tooltip: {},
        zoom: 1, //缩放比例
        roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
        map: "fujian_full",
        nameMap: "福建地图",
        label: {
          show: true,
          normal: {
            show: true, // 默认地图文字字号和字体颜色
            fontSize: 10,
            color: "#ffffff",
          },
          emphasis: {
            show: true,
            fontSize: 10, // 选中地图文字字号和字体颜色
            color: "#CFCFCF",
          },
        },
        itemStyle: {
          areaColor: "#188df0",
          opacity: 0.7,
          borderColor: "#fff",
          borderWidth: 3,
          
          emphasis: {
            areaColor: "#2378f7", // 高亮时候地图显示的颜色
            borderWidth: 0, // 高亮时的边框宽度
          },
        },
        layoutCenter: ["50%", "44.5%"],
        layoutSize: 877,
        top: 0,
        left: 0,
        textFixed: {
          Alaska: [20, -20],
        },
      },
    ],
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        symbol: "pin",
        legendHoverLink: true,
        symbolSize: [60, 60],
        // 这里渲染标志里的内容以及样式
        label: {
          show: true,
          formatter(value) {
            return value.data.value[2];
          },
          color: "#fff",
        },
        // 标志的样式
        itemStyle: {
          normal: {
            color: "rgba(255,0,0,1)",
            shadowBlur: 2,
            shadowColor: "D8BC37",
          },
        },
        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
        // 至于如何展示，完全是靠上面的formatter来自己定义的
        data: [
          { name: "西藏", value: [91.23, 29.5, 2333] },
          { name: "黑龙江", value: [128.03, 47.01, 1007] },
          { name: "福州", value: [119.1747, 26.0427, 1007] },
        ],
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke",
        },
        hoverAnimation: true,
        zlevel: 1,
      },
    ],
  };
  Chart.setOption(option);
};

export default defineComponent({
  setup() {
    onMounted(() => {
      console.log("123");
      renderMap();
    });
    return {
      logOut,
      renderMap,
      img149,
    };
  },
});
</script>

<style scoped>
#fuzhou {
  position: absolute;
  left: 0;
  top: 0;
}

.bg-primary-yellow {
  background-color: #f9de5b;
}

.select-border1:hover {
  border: 1px solid #f9de5b;
  background-color: #f9de5b;
  cursor: pointer;
}
</style>
