zgyw-ui.git - Gitblit

<template>
  <div class="map-container">
    <div class="map-main-container" id="main"></div>
  </div>
</template>
 
<script>
import * as chinaJson from '@/assets/map/zigong.json'
 
export default {
  name: 'mapApp',
  props: {
    geoCoordinates: {
      type: Object,
      default: {},
    },
    platformData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      myChart: null, // ECharts 实例
      big: 130,
      dotData: [
        {
          name: '自流井区',
          value: [104.621171408, 29.150000, 300],
          platformOnline: true
        },
        {
          name: '高新区',
          value: [104.780000, 29.19, 300],
          platformOnline: true
        },
        {
          name: '大安区',
          value: [104.95805, 29.155946, 300],
          platformOnline: true
        },
        {
          name: '沿滩区',
          value: [104.78804, 29.100594, 300],
          platformOnline: true
        },
        {
          name: '贡井区',
          value: [104.46106, 29.101427, 300],
          platformOnline: true
        },
        {
          name: '荣县',
          value: [104.2634, 29.2838, 300],
          platformOnline: true
        },
        {
          name: '富顺县',
          value: [105.000000, 28.93, 300],
          platformOnline: true
        }
      ],
      markData: [
        {
          name: '自流井区',
          number: '0',
          value: [104.821471408, 29.860000, 300]
        },
        {
          name: '高新区',
          number: '0',
          value: [104.867237686031, 29.39548885792289, 300]
        },
        {
          name: '大安区',
          number: '0',
          value: [105.25337686031, 29.57948885792289, 300]
        },
        {
          name: '沿滩区',
          number: '0',
          value: [105.30237686031, 30.20048885792289, 300]
        },
        {
          name: '贡井区',
          number: '0',
          value: [104.51037686031, 29.42048885792289, 300]
        },
        {
          name: '荣县',
          number: '0',
          value: [104.25437686031, 29.64048885792289, 300]
        },
        {
          name: '富顺县',
          number: '0',
          value: [105.208, 29.185, 300]
        }
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.myChart = this.$echarts.init(document.getElementById('main'))
        this.initializeMap()
      }, 100)
    })
  },
  methods: {
    initializeMap() {
      this.updateMapData()
      this.getChinData('自贡市', chinaJson)
    },
    updateMapData() {
      if (this.geoCoordinates) {
        this.markData.forEach(item => {
          if (this.geoCoordinates[item.name]) {
            item.number = this.geoCoordinates[item.name].score || '0'
          }
        })
      }
      if (this.platformData) {
        this.dotData.forEach(item => {
          if (this.platformData[item.name]) {
            item.platformOnline = this.platformData[item.name].platformOnline
          }
        })
      }
    },
    updateChart() {
      if (this.myChart) {
        const option = this.myChart.getOption();
        // Update the scatter3D series data
        const scatterSeries = option.series.find(s => s.type === 'scatter3D' && s.name !== '散点图');
        if (scatterSeries) {
          scatterSeries.data = this.markData;
        }
        const dotSeries = option.series.find(s => s.type === 'scatter3D' && s.name === '散点图');
        if (dotSeries) {
          dotSeries.data = this.dotData;
        }
        this.myChart.setOption(option);
      }
    },
    getChinData(name, jsons) {
      this.num = 1
      this.$echarts.registerMap(name, jsons)
      const myChart = this.myChart
      const that = this
      myChart.clear()
      const option = {
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b}'
        // },
        geo3D: {
          name: name,
          type: 'map',
          map: name,
          left: '-5%',
          top: '20%',
          width: '100%', // 明确指定宽度
          height: '720px', // 明确指定高度
          // boxWidth: 100,
          regionHeight: 0.8,
          zlevel: 10,
 
          tooltip: {
            show: true,
            trigger: 'item'
          },
 
          itemStyle: {
            color: '#8adfff',
            opacity: 1,
            borderWidth: 1,
            borderColor: '#008ee0' // 边框颜色为更深的蓝色
          },
 
          label: {
            show: false, // (地图上的城市名称)是否显示标签
            distance: 5,
            formatter: function (params) {
              return params.name ? params.name : ' '
            },
            // 标签的字体样式
            color: '#fff', // 地图初始化区域字体颜色
            fontSize: 14, // 字体大小
            fontWeight: '300'
          },
 
          emphasis: {
            label: {
              show: false,
              textStyle: {
                color: '#ffffff' // 高亮文字为亮蓝色
              }
            }
          },
 
          shading: 'realistic',
 
          realisticMaterial: {
            detailTexture: require('@/assets/images/face-num-bg3.png'),
            textureTiling: 1,
            textureOffset: 0,
            roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0,
            roughnessAdjust: 0
          },
 
          viewControl: {
            projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
            autoRotate: false,
            dispose: 100,
            rotateSensitivity: 0, // 旋转
            minBeta: -13,
            maxBeta: -13,
            distance: 120,
            zoomSensitivity: 0, // 缩放
            panSensitivity: 0, // 平移
            center: [0, 0, 0],
            alpha: 30, // 倾斜角度
            animationDurationUpdate: 1000, // 过渡动画的时长
            animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
          },
          light: {
            main: {
              // 场景主光源的设置，在 globe 组件中就是太阳光。
              color: '#fff', // 主光源的颜色。
              intensity: 0.6, // 主光源的强度。
              shadow: true, // 主光源是否投射阴影。默认关闭。开启阴影可以给场景带来更真实和有层次的光照效果。会增加程序的运行开销。
              shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra'
              alpha: 30, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。
              beta: 20 // 主光源绕 y 轴，即左右旋转的角度。
            },
            ambient: {
              // 全局的环境光设置。
              color: '#fff', // 环境光的颜色。[ default: #fff ]
              intensity: 0.45 // 环境光的强度。[ default: 0.2 ]
            },
            ambientCubemap: {
              exposure: 2,
              diffuseIntensity: 1,
              specularIntensity: 1
            }
          },
          selectedMode: false
        },
 
        series: [
          {
            name: name,
            type: 'map3D',
            map: name,
            // boxWidth: 100,
            regionHeight: 0.8,
            left: '-5%',
            top: '20%',
            width: '100%', // 明确指定宽度
            height: '720px', // 明确指定高度
            zlevel: 5,
 
            // tooltip: {
            //   show: true,
            //   trigger: 'item'
            // },
 
            itemStyle: {
              color: '#8adfff',
              opacity: 1,
              borderWidth: 1,
              borderColor: '#008ee0' // 边框颜色为更深的蓝色
            },
 
            label: {
              show: false // (地图上的城市名称)是否显示标签
            },
 
            emphasis: {
              label: {
                show: false,
                textStyle: {
                  color: '#ffffff' // 高亮文字为亮蓝色
                }
              }
            },
 
            viewControl: {
              projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
              autoRotate: false,
              dispose: 100,
              rotateSensitivity: 0, // 旋转
              minBeta: -13,
              maxBeta: -13,
              distance: 120,
              zoomSensitivity: 0, // 缩放
              panSensitivity: 0, // 平移
              center: [0, 0, 0],
              alpha: 30 // 倾斜角度
            }
          },
          {
            name: '散点图',
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            zlevel: 10,
 
            silent: true,
 
            itemStyle: {
              color: function (param) {
                if (param.data.platformOnline) {
                  return '#04CD44';
                } else {
                  return '#FF0756';
                }
              },
              borderWidth: 1,
              borderColor: '#fff'
            },
 
            data: that.dotData
          },
          {
            type: 'lines3D',
            coordinateSystem: 'geo3D',
            polyline: true,
            lineStyle: {
              color: '#a4ddee',
              width: 2,
              opacity: 1,
            },
            data: [
              // 自流井线
              {
                coords: [
                  [104.621171408, 29.150000, 300],
                  [104.841471408, 29.900000, 335]
                ]
              },
              // 高新区线
              {
                coords: [
                  [104.780000, 29.19, 300],
                  [104.880237686031, 29.42548885792289, 335]
                ]
              },
              // 大安区线
              {
                coords: [
                  [104.95805, 29.155946, 300],
                  [105.25337686031, 29.61948885792289, 335]
                ]
              },
              // 沿滩区线
              {
                coords: [
                  [104.78804, 29.100594, 300],
                  [105.36237686031, 30.30048885792289, 335]
                ]
              },
              // 贡井区线
              {
                coords: [
                  [104.46106, 29.101427, 300],
                  [104.51037686031, 29.42048885792289, 335]
                ]
              },
              // 荣县线
              {
                coords: [
                  [104.2634, 29.2838, 300],
                  [104.25437686031, 29.64048885792289, 335]
                ]
              },
              // 富顺线
              {
                coords: [
                  [105.000000, 28.93, 300],
                  [105.208, 29.185, 335]
                ]
              }
            ],
            effect: {
              show: true,
              constantSpeed: 10,
              symbol: 'arrow', // 使用箭头指示标志
              trailLength: 0, // 不显示尾迹
              symbolSize: 10
            }
          }
        ]
      }
      // 添加动态标注
      option.series.push({
        type: 'scatter3D',
        coordinateSystem: 'geo3D',
        symbol: 'circle',
        symbolSize: 0,
        data: that.markData,
 
        itemStyle: {
          opacity: 0.7,
          borderWidth: 1,
          borderColor: 'a4ddee',
        },
 
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#c6f4ff',
            fontSize: '16px',
            backgroundColor: 'rgba(25,56,97,1)',
            borderColor: '#a4ddee',
            borderWidth: 0.5,
            borderRadius: 5,
            padding: [4, 8]
          },
 
          formatter: function (params) {
            // return `{style|${params.data.name} ：${params.data.number}}`
            return `{style|${params.data.name} \n 视频：${params.data.number} \n 车辆：${params.data.number} \n 人脸：${params.data.number}}`
          },
          rich: {
            style: {
              fontSize: 16,
              lineHeight: 22
              // 其他需要的样式
            }
          },
          distance: 0 // 标签与点的距离，确保标签不会重叠
        }
      })
      myChart.setOption(option)
      myChart.on('click', function (params) {
        if (params.seriesType === 'map3D') {
          that.$emit('clickMap', params.name);
        }
      })
    },
  },
  watch: {
    geoCoordinates: {
      handler(newValue) {
        this.updateMapData(newValue);
        this.updateChart();
      },
      deep: true
    },
    platformData: {
      handler(newValue) {
        this.updateMapData(newValue);
        this.updateChart();
      },
      deep: true
    }
  },
}
</script>
 
<style lang="scss" scoped>
.map-container {
  position: relative;
}
 
.map-main-container {
  width: 100%;
  height: 100%;
}
</style>