xybpkmweb/src/components/WorldMapNew.vue

<template>
  <div>
    <div class="mapBg">
      <div class="worldMap" id="worldMap" ref="worldMap" height="300"></div>
    </div>
    <div v-if="dialogVisible" style="background:#fff;left:50%;top:30%;
    position:absolute;z-index:10000;border:1px oslid red;width:50%;height:300px;">
    <h1 align="center">这里是国家地图</h1>
    <button style="margin-top:30%;" @click="dialogVisible=false">关闭</button>
    </diV>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import mapData from '../utils/map.js'

  var cityData = [{
    name: '长春',
    value: [125.299633, 43.914039, 10],
  }, ]
  var szPoinUrl = "";

  let imgBase64 = ''
  let tempData1 = [{
    name: '环境监测',
    value: [-73.97622, 40.757498],
    ph: 200,
    offset: [70, -58],
    padding: [12, 25, 56, 80],
    imgurl: '',
  }];
  export default {
    mounted() {
      var worldChart = echarts.init(this.$refs["worldMap"]);
      echarts.registerMap('world', mapData.registerMapData);
      worldChart.setOption(this.option);

      worldChart.on("georoam", function (params) {
        var option = worldChart.getOption(); //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          let mo = option.geo[0].zoom
          option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          // // 改变标记点随地图放大缩小
          // // console.log(option.series)
          // let size = option.series[0].zoom/mo
          // if(option.series[0].zoom>mo){
          // 	// console.log(option.series)
          // 	option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
          // 	option.series[1].symbolSize=option.series[1].symbolSize*size
          // 	option.series[1].label.fontSize=option.series[1].label.fontSize*size
          // }else{
          // 	option.series[2].symbolSize = [option.series[2].symbolSize[0]*size,option.series[2].symbolSize[1]*size]
          // 	option.series[1].symbolSize = option.series[1].symbolSize*size
          // 	option.series[1].label.fontSize = option.series[1].label.fontSize*size
          // }
          // // 改变标记点end
        } else {
          //捕捉到拖曳时
          option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        // myChart.dispatchAction({ //来用程序主动渲染选框
        // 	type: "restore",
        // });
        worldChart.setOption(option); //设置option
      });

      //
      worldChart.on('click', params => {
        console.log(111111111111)
        this.dialogVisible = true;
      })
    },
    computed: {
      series() {
        let res = [{
          type: "map",
          roam: true,
          animationDurationUpdate: true,
          label: {
            show: !1,
          },
          tooltip: {
            show: !1,
          },
          itemStyle: {
            normal: {
              borderColor: "#0F6DAC",
              borderWidth: 0.2,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                    offset: 0,
                    color: "#061D35", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#061D35", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              label: {
                // show: !1,
                color: "#fff",
              },
              areaColor: "#05223D",
              //    shadowColor: 'rgb(12,25,50)',
              borderWidth: 0.2,
            },
          },
          aspectScale: 0.65, //长宽比
          zoom: 1.12,
          //     roam: false,
          map: "world", //使用
          // data: this.difficultData //热力图数据   不同区域 不同的底色
        }]
        tempData1.forEach(item => {
          res.push({
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: szPoinUrl,
              symbolSize: [20, 20],
              legendHoverLink: true,
              z: 99999,
              index: 99999,
              label: {
                show: true,
                offset: item.offset, //偏移设置
                fontSize: 14,
                lineHeight: 23,
                backgroundColor: {
                  image: item.imgurl,
                },
                borderColor: '#106EAD',
                padding: item.padding,
                formatter(value) {
                  return `{name|${value.data.name}\nPH值：${value.data.ph}}`;
                },

                rich: {
                  name: {
                    fontWeight: 'bold',
                    fontSize: 16,
                    color: '#fff',
                    height: 100,
                  }
                },
                color: '#fff',
              },
              data: [item],
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke',
              },
              hoverAnimation: true,
              zlevel: 9999,
            },

          )
        })
        return res
      },

      option() {

        return {
          // backgroundColor: '#051421',
          backgroundColor: 'transparent',
          tooltip: {
            trigger: "item",
            formatter: function (params, ticket, callback) {
              if (params.seriesType == "effectScatter") {
                return params.marker + params.data.name + "" + params.data.value[2];
              } else if (params.seriesType == "lines") {
                return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
              } else {
                return params.name;
              }
            },
          },
          grid: {
            right: '8%',
            // top:'5%'
          },
          geo: {
            map: 'world',
            aspectScale: 0.65, //长宽比
            zoom: 1.12,
            show: true,
            tooltip: {
              show: !1,
            },
            scaleLimit: {
              min: 1,
              max: 5,
            },
            label: {
              show: !1,
            },
            animationDurationUpdate: 0,
            roam: true,
            itemStyle: {
              normal: {
                shadowColor: "#164A7C",
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
            },
          },
          tooltip: {
            trigger: "item",
          },
          zlevel: 999,
          series: this.series
        }
      }
    },
    data() {
      return {

        dialogVisible: false
      }
    },
  }

</script>

<style scoped>
  .worldMap {
    display: inline-block;
    width: 100%;
    height: 100vh;

    background: #051421;
    position: absolute;
    z-index: -1;
  }

  .mapBg {
    /* background: #051421;
      position: absolute;
      z-index: -1; */
  }

</style>