大屏自适应

fuliqi

2024-12-06 21933d0857b7539cfaff52a88a3340772160c4e7

 src/views/screen/components/map3.vue

@@ -26,75 +26,89 @@
      dotData: [
        {
          name: '自流井区',
          value: [104.665471408, 29.23008885, 300],
          value: [104.621171408, 29.150000, 300],
          platformOnline: true
        },
        {
          name: '高新区',
          value: [104.805193, 29.3, 300],
          value: [104.780000, 29.19, 300],
          platformOnline: true
        },
        {
          name: '大安区',
          value: [104.90805, 29.345946, 300],
          value: [104.95805, 29.155946, 300],
          platformOnline: true
        },
        {
          name: '沿滩区',
          value: [104.80804, 29.200594, 300],
          value: [104.80504, 29.050594, 300],
          platformOnline: true
        },
        {
          name: '贡井区',
          value: [104.579106, 29.241427, 300],
          value: [104.46106, 29.101427, 300],
          platformOnline: true
        },
        {
          name: '荣县',
          value: [104.3534, 29.3538, 300],
          value: [104.2634, 29.2838, 300],
          platformOnline: true
        },
        {
          name: '富顺县',
          value: [104.96, 29.08, 300],
          value: [105.000000, 28.93, 300],
          platformOnline: true
        }
      ],
      markData: [
        {
          name: '自流井区',
          number: '0',
          value: [104.616237686031, 29.081, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [104.911471408, 30.100000, 300]
        },
        {
          name: '高新区',
          number: '0',
          value: [104.84, 29.405, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [104.867237686031, 29.39548885792289, 300]
        },
        {
          name: '大安区',
          number: '0',
          value: [105.136, 29.30548885792289, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [105.12337686031, 29.38948885792289, 300]
        },
        {
          name: '沿滩区',
          number: '0',
          value: [104.956237686031, 29.2, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [105.40537686031, 30.20048885792289, 300]
        },
        {
          name: '贡井区',
          number: '0',
          value: [104.436237686031, 29.16048885792289, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [104.51037686031, 29.42048885792289, 300]
        },
        {
          name: '荣县',
          number: '0',
          value: [104.480237686031, 29.40048885792289, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [104.25437686031, 29.64048885792289, 300]
        },
        {
          name: '富顺县',
          number: '0',
          value: [105.12, 29.076, 300]
          video: '0',
          car: '0',
          face: '0',
          value: [105.208, 29.185, 300]
        }
      ],
    }
@@ -108,6 +122,12 @@
    })
  },
  methods: {
    setFontSize(res){
      const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res*fontSize;
    },
    initializeMap() {
      this.updateMapData()
      this.getChinData('自贡市', chinaJson)
@@ -116,13 +136,14 @@
      if (this.geoCoordinates) {
        this.markData.forEach(item => {
          if (this.geoCoordinates[item.name]) {
            item.number = this.geoCoordinates[item.name].score || '0'
            item.video = this.geoCoordinates[item.name].video || '0.0'
            item.car = this.geoCoordinates[item.name].car || '0.0'
            item.face = this.geoCoordinates[item.name].face || '0.0'
          }
        })
      }
      if (this.platformData) {
        this.dotData.forEach(item => {
          console.log('更新数据', this.platformData)
          if (this.platformData[item.name]) {
            item.platformOnline = this.platformData[item.name].platformOnline
          }
@@ -160,10 +181,12 @@
          type: 'map',
          map: name,
          left: '-5%',
          top: '5%',
          boxWidth: 100,
          regionHeight: 2,
          zlevel: 5,
          top: '20%',
          width: '100%', // 明确指定宽度
          height: '100%', // 明确指定高度
          // boxWidth: 100,
          regionHeight: 0.8,
          zlevel: 10,

          tooltip: {
            show: true,
@@ -178,7 +201,7 @@
          },

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

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

            // tooltip: {
            //   show: true,
@@ -290,10 +316,11 @@
              rotateSensitivity: 0, // 旋转
              minBeta: -13,
              maxBeta: -13,
              distance: 120,
              zoomSensitivity: 0, // 缩放
              panSensitivity: 0, // 平移
              center: [0, 0, 0],
              alpha: 70 // 倾斜角度
              alpha: 30 // 倾斜角度
            }
          },
          {
@@ -324,50 +351,57 @@
            polyline: true,
            lineStyle: {
              color: '#a4ddee',
              width: 1,
              opacity: 1
              width: 2,
              opacity: 1,
            },
            data: [
              // 自流井线
              {
                coords: [
                  [104.665471408, 29.23008885, 300],
                  [104.6, 29.125, 430]
                  [104.621171408, 29.150000, 300],
                  [104.941471408, 30.190000, 335]
                ]
              },
              // 高新区线
              {
                coords: [
                  [104.805193, 29.30148885792289, 300],
                  [104.780237686031, 29.39548885792289, 430]
                  [104.780000, 29.19, 300],
                  [104.880237686031, 29.42548885792289, 335]
                ]
              },
              // 大安区线
              {
                coords: [
                  [104.90805, 29.345946, 300],
                  [105.056237686031, 29.33548885792289, 430]
                  [104.95805, 29.155946, 300],
                  [105.12137686031, 29.41948885792289, 335]
                ]
              },
              // 沿滩区线
              {
                coords: [
                  [104.80804, 29.200594, 300],
                  [104.906237686031, 29.20048885792289, 430]
                  [104.80504, 29.050594, 300],
                  [105.47237686031, 30.30048885792289, 335]
                ]
              },
              // 贡井区线
              {
                coords: [
                  [104.579106, 29.241427, 300],
                  [104.486237686031, 29.19048885792289, 430]
                  [104.46106, 29.101427, 300],
                  [104.51837686031, 29.45048885792289, 335]
                ]
              },
              // 荣县线
              {
                coords: [
                  [104.3534, 29.3538, 300],
                  [104.456237686031, 29.39048885792289, 430]
                  [104.2634, 29.2838, 300],
                  [104.25437686031, 29.67048885792289, 335]
                ]
              },
              // 富顺线
              {
                coords: [
                  [104.96, 29.08, 300],
                  [105.05, 29.083, 430]
                  [105.000000, 28.93, 300],
                  [105.218, 29.195, 335]
                ]
              }
            ],
@@ -390,7 +424,7 @@
        data: that.markData,

        itemStyle: {
          opacity: 1,
          opacity: 0.7,
          borderWidth: 1,
          borderColor: 'a4ddee',
        },
@@ -400,21 +434,22 @@
          position: 'top',
          textStyle: {
            color: '#c6f4ff',
            fontSize: '16px',
            fontSize: this.setFontSize(16),
            backgroundColor: 'rgba(25,56,97,1)',
            borderColor: '#a4ddee',
            borderWidth: 0.5,
            borderRadius: 5,
            padding: [8, 15]
            padding: [4, 8]
          },

          formatter: function (params) {
            return `{style|${params.data.name}\n得分：${params.data.number}}`
            // return `{style|${params.data.name} ：${params.data.number}}`
            return `{style|${params.data.name} \n 视频：${params.data.video} \n 车辆：${params.data.car} \n 人脸：${params.data.face}}`
          },
          rich: {
            style: {
              fontSize: 16,
              lineHeight: 22
              fontSize: this.setFontSize(14),
              lineHeight: this.setFontSize(20),
              // 其他需要的样式
            }
          },
@@ -455,6 +490,6 @@

.map-main-container {
  width: 100%;
  height: 100%;
  height: 37vw; // 固定高度
}
</style>