标线调整

xiangpei

2024-09-25 9ee63a5bb0cfa161ca4008aa27df23f69d5a9705

 src/views/screen/components/map3.vue

@@ -14,46 +14,87 @@
      type: Object,
      default: {},
    },
    platformData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      myChart: null, // ECharts 实例
      big: 130,
      data: [
      dotData: [
        {
          name: '自流井区',
          value: [104.641171408, 29.120000, 300],
          platformOnline: true
        },
        {
          name: '高新区',
          value: [104.780000, 29.19, 300],
          platformOnline: true
        },
        {
          name: '大安区',
          value: [104.90805, 29.235946, 300],
          platformOnline: true
        },
        {
          name: '沿滩区',
          value: [104.75804, 29.100594, 300],
          platformOnline: true
        },
        {
          name: '贡井区',
          value: [104.559106, 29.161427, 300],
          platformOnline: true
        },
        {
          name: '荣县',
          value: [104.3234, 29.2838, 300],
          platformOnline: true
        },
        {
          name: '富顺县',
          value: [104.950000, 29.04, 300],
          platformOnline: true
        }
      ],
      markData: [
        {
          name: '自流井区',
          number: '0',
          value: [104.616237686031, 29.081, 300]
          value: [104.551471408, 28.860000, 300]
        },
        {
          name: '高新区',
          number: '0',
          value: [104.84, 29.405, 300]
          value: [104.863237686031, 29.39548885792289, 300]
        },
        {
          name: '大安区',
          number: '0',
          value: [105.136, 29.30548885792289, 300]
          value: [105.20537686031, 29.82948885792289, 300]
        },
        {
          name: '沿滩区',
          number: '0',
          value: [104.956237686031, 29.2, 300]
          value: [104.760237686031, 28.7800000, 300]
        },
        {
          name: '贡井区',
          number: '0',
          value: [104.436237686031, 29.16048885792289, 300]
          value: [104.590237686031, 29.30048885792289, 300]
        },
        {
          name: '荣县',
          number: '0',
          value: [104.480237686031, 29.40048885792289, 300]
          value: [104.337937686031, 29.64048885792289, 300]
        },
        {
          name: '富顺县',
          number: '0',
          value: [105.12, 29.076, 300]
          value: [105.165, 29.385, 300]
        }
      ],
    }
@@ -72,11 +113,20 @@
      this.getChinData('自贡市', chinaJson)
    },
    updateMapData() {
      this.data.forEach(item => {
        if (this.geoCoordinates[item.name]) {
          item.number = this.geoCoordinates[item.name].score || '0'
        }
      })
      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) {
@@ -84,7 +134,11 @@
        // Update the scatter3D series data
        const scatterSeries = option.series.find(s => s.type === 'scatter3D' && s.name !== '散点图');
        if (scatterSeries) {
          scatterSeries.data = this.data;
          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);
      }
@@ -105,10 +159,10 @@
          type: 'map',
          map: name,
          left: '-5%',
          top: '5%',
          boxWidth: 100,
          regionHeight: 2,
          zlevel: 5,
          top: '10%',
          // boxWidth: 100,
          regionHeight: 0.8,
          zlevel: 10,

          tooltip: {
            show: true,
@@ -123,7 +177,7 @@
          },

          label: {
            show: true, // (地图上的城市名称)是否显示标签
            show: false, // (地图上的城市名称)是否显示标签
            distance: 5,
            formatter: function (params) {
              return params.name ? params.name : ' '
@@ -136,7 +190,7 @@

          emphasis: {
            label: {
              show: true,
              show: false,
              textStyle: {
                color: '#ffffff' // 高亮文字为亮蓝色
              }
@@ -161,10 +215,11 @@
            rotateSensitivity: 0, // 旋转
            minBeta: -13,
            maxBeta: -13,
            distance: 130,
            zoomSensitivity: 0, // 缩放
            panSensitivity: 0, // 平移
            center: [0, 0, 0],
            alpha: 70, // 倾斜角度
            alpha: 30, // 倾斜角度
            animationDurationUpdate: 1000, // 过渡动画的时长
            animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
          },
@@ -197,11 +252,11 @@
            name: name,
            type: 'map3D',
            map: name,
            boxWidth: 100,
            regionHeight: 2,
            // boxWidth: 100,
            regionHeight: 0.8,
            left: '-5%',
            top: '5%',
            zlevel: 10,
            top: '10%',
            zlevel: 5,

            // tooltip: {
            //   show: true,
@@ -235,10 +290,11 @@
              rotateSensitivity: 0, // 旋转
              minBeta: -13,
              maxBeta: -13,
              distance: 130,
              zoomSensitivity: 0, // 缩放
              panSensitivity: 0, // 平移
              center: [0, 0, 0],
              alpha: 70 // 倾斜角度
              alpha: 30 // 倾斜角度
            }
          },
          {
@@ -250,41 +306,18 @@
            silent: true,

            itemStyle: {
              color: '#fc840e',
              color: function (param) {
                if (param.data.platformOnline) {
                  return '#04CD44';
                } else {
                  return '#FF0756';
                }
              },
              borderWidth: 1,
              borderColor: '#fff'
            },

            data: [
              {
                name: '自流井区',
                value: [104.665471408, 29.23008885, 300]
              },
              {
                name: '高新区',
                value: [104.805193, 29.3, 300]
              },
              {
                name: '大安区',
                value: [104.90805, 29.345946, 300]
              },
              {
                name: '沿滩区',
                value: [104.80804, 29.200594, 300]
              },
              {
                name: '贡井区',
                value: [104.579106, 29.241427, 300]
              },
              {
                name: '荣县',
                value: [104.3534, 29.3538, 300]
              },
              {
                name: '富顺县',
                value: [104.96, 29.08, 300]
              }
            ]
            data: that.dotData
          },
          {
            type: 'lines3D',
@@ -296,46 +329,53 @@
              opacity: 1
            },
            data: [
              // 自流井线
              {
                coords: [
                  [104.665471408, 29.23008885, 300],
                  [104.6, 29.125, 430]
                  [104.641171408, 29.120000, 300],
                  [104.551471408, 28.860000, 430]
                ]
              },
              // 高新区线
              {
                coords: [
                  [104.805193, 29.30148885792289, 300],
                  [104.780237686031, 29.39548885792289, 430]
                  [104.780000, 29.19, 300],
                  [104.863237686031, 29.39548885792289, 430]
                ]
              },
              // 大安区线
              {
                coords: [
                  [104.90805, 29.345946, 300],
                  [105.056237686031, 29.33548885792289, 430]
                  [104.90805, 29.235946, 300],
                  [105.20537686031, 29.82948885792289, 430]
                ]
              },
              // 沿滩区线
              {
                coords: [
                  [104.80804, 29.200594, 300],
                  [104.906237686031, 29.20048885792289, 430]
                  [104.75804, 29.100594, 300],
                  [104.776237686031, 28.78048885792289, 430]
                ]
              },
              // 贡井区线
              {
                coords: [
                  [104.579106, 29.241427, 300],
                  [104.486237686031, 29.19048885792289, 430]
                  [104.559106, 29.161427, 300],
                  [104.59237686031, 29.30048885792289, 430]
                ]
              },
              // 荣县线
              {
                coords: [
                  [104.3534, 29.3538, 300],
                  [104.456237686031, 29.39048885792289, 430]
                  [104.3234, 29.2838, 300],
                  [104.346037686031, 29.64048885792289, 430]
                ]
              },
              // 富顺线
              {
                coords: [
                  [104.96, 29.08, 300],
                  [105.05, 29.083, 430]
                  [104.950000, 29.04, 300],
                  [105.163, 29.385, 430]
                ]
              }
            ],
@@ -355,12 +395,12 @@
        coordinateSystem: 'geo3D',
        symbol: 'circle',
        symbolSize: 0,
        data: that.data,
        data: that.markData,

        itemStyle: {
          opacity: 1,
          borderWidth: 1,
          borderColor: 'a4ddee'
          borderColor: 'a4ddee',
        },

        label: {
@@ -404,6 +444,13 @@
        this.updateChart();
      },
      deep: true
    },
    platformData: {
      handler(newValue) {
        this.updateMapData(newValue);
        this.updateChart();
      },
      deep: true
    }
  },
}