地图放大功能开发

whyczyk

2021-10-14 36d078db470bf939ec47b6018ea40fa0b875e86e

 src/components/charts/chinaMap.vue

@@ -1,5 +1,5 @@
<template>
   <div class="echarts-wrapper">
   <div class="echarts-wrapper" @dblclick="dblclick">
      <div class="echarts-content" ref="chart" id="cityChart">

      </div>
@@ -48,7 +48,7 @@
let chartData = []; //chart数据
let abnormalArr = []; //异常数组
let tempData = []; //站点数组
let chart, chartLng, chartLat, timers;
let chart, chartLng, chartLat;

export default {
   components: { InfoPanel },
@@ -57,7 +57,9 @@
   chartData: "",
   data() {
      return {
         timer: null,
         parentsStyle: {},
         isAllScreen: false,
         timers: null,
         mapName: 'zhongguo',
         mapInfoX: null,
         mapInfoY: null,
@@ -82,11 +84,54 @@
      }
   },
   methods: {
      findParents(node, select) {
         var parent = node.parentNode;
         if (parent === null || parent.className.indexOf(select) != -1) {
            return parent;
         } else {
            return this.findParents(parent, select);
         }
      },
      dblclick(e) {
         this.isAllScreen = !this.isAllScreen
         let parents = this.findParents(e.currentTarget, 'vdr')
         if (this.isAllScreen) {
            this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
            parents.style.transform = 'none';
            parents.style.width = '100%';
            parents.style.height = '100%';
            parents.style.position = 'fixed';
            parents.style.left = 0;
            parents.style.right = 0;
            parents.style.bottom = 0;
            parents.style.top = 0;
            parents.style.zIndex = 99999;
         } else {
            parents.style.transform = this.parentsStyle.transform;
            parents.style.width = this.parentsStyle.width;
            parents.style.height = this.parentsStyle.height;
            parents.style.position = this.parentsStyle.position;
            parents.style.left = 'initial';
            parents.style.right = 'initial';
            parents.style.bottom = 'initial';
            parents.style.top = 'initial';
            parents.style.zIndex = 'auto';
         }
         this.$options.chart.resize();
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
      setData(sendData) {
         this.$options.chartData = sendData;
         if (sendData) {
            this.$options.chartData = sendData;
            this.organizeData(sendData)
         } else {
            // 初始化页面
            this.getAllMapOutlineAction();
         }
      },
      organizeData(data) {
         let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
         echarts.registerMap('map', geoJson);
         // 整体配置项
@@ -166,7 +211,7 @@
                  }
               }
            },
            series: this.getSeries(sendData)
            series: this.getSeries(data)
         };
         // 设置配置项
         this.setOption(option);
@@ -230,10 +275,9 @@
         return point;
      },
      startSearchMapHomeState() {
         this.timer = setInterval(() => {
         this.timers = setInterval(() => {
            this.searchChartHomeState()
         }, 4000)

         }, 60 * 1000)
      },
      initPage() {
         // 初始化地图
@@ -241,13 +285,12 @@
         chart = echarts.init(document.getElementById('cityChart'));

         chart.on("georoam", (params) => {
            clearInterval(this.timer)
            clearInterval(this.timers)
            if (!this.isShowInfoPanel) {
               return;
            }
            this.isShowInfoPanel = false;
            clearTimeout(timers);
            timers = setTimeout(() => {
            this.timers = setTimeout(() => {
               this.isShowInfoPanel = true;
               let poit = this.convertMain(chartLng, chartLat);
               this.mapInfoX = poit[0] - 120;
@@ -264,7 +307,7 @@
               }
               chart.setOption(option); //设置option

               this.startSearchMapHomeState();
               // this.startSearchMapHomeState();
            }, 300);
         });
         chart.off("click"); //防止chart点击触发多次
@@ -325,6 +368,7 @@
                  item.value.push(item.latitude);
                  tempData.push(item)
               })
               this.searchChartHomeState()
               this.startSearchMapHomeState();
            } else {
               this.initChart([], []);
@@ -393,7 +437,6 @@
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: function (value, params) {
                     let asd = value
                     return 'image://' + params.data.img
                  },
                  symbolSize: [26, 26],
@@ -447,7 +490,6 @@
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: function (value, params) {
                     let asd = value
                     return 'image://' + params.data.img
                  },
                  symbolSize: [26, 26],
@@ -506,10 +548,13 @@
            "*"
         );
      },
      outClear() {
         window.removeEventListener('resize', this.resize);
         clearInterval(this.timers)
         this.timers = null
      }
   },
   mounted() {
      // 初始化页面
      this.getAllMapOutlineAction();
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);
      // 监听chartMap的面板
@@ -518,7 +563,7 @@
            return;
         }
         this.isShowInfoPanel = false;
         timers = setTimeout(() => {
         setTimeout(() => {
            this.isShowInfoPanel = true;
            let poit = this.convertMain(chartLng, chartLat);
            this.mapInfoX = poit[0] - 120;
@@ -528,7 +573,7 @@
   },
   destroyed() {
      window.removeEventListener('resize', this.resize);
      clearInterval(this.timer)
      clearInterval(this.timers)
   },
}
</script>