echarts map3D下钻及scatter3D的运用

最新推荐文章于 2025-03-01 14:22:55 发布

原创

最新推荐文章于 2025-03-01 14:22:55 发布 · 4.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #3d

本文介绍了如何使用Echarts3D实现地图不同区域填充不同颜色，并解决下钻打点后地图移动时定位点移位的问题。通过调整代码中的visualMap和series配置，实现了根据值范围映射不同颜色，并通过注册地图和设置scatter3D系列，确保了点的正确显示。同时，针对打点颜色默认为黑色的问题，提供了解决方案。

echarts 3d地图不同区域填充不同颜色以及下钻打点解决

中途出现了两个问题，一个是下钻打点之后，移动地图，定位点的位置跟地图出现移位，另一个是打点默认黑色，解决之后在代码里都有说明
在这里插入图片描述

<template>
  <div>
    <div id="map" ref="myEchart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import features from '../../../assets/js/index/shangyu'
let Echarts
export default {
  props: {
    addressName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isArea: true,
      areaName: '',
      pointData: []
    }
  },
  mounted () {
    this.map()
  },
  methods: {
    map () {
      let mapJson = features
      if (Echarts !== null && Echarts !== '' && Echarts !== undefined) {
        Echarts.dispose()
      }
      if (this.areaName) {
        mapJson = {
          features: features.features.filter((v) => {
            return v.properties.name === this.areaName
          })
        }
        if (this.areaName === '百官街道') {
          this.pointData = [
            {
              name: '文化社区',
              value: [120.890766, 30.04924],
              pointValue: '98',
              flag: true,
              img: `image://${require('../../../assets/img/hong.png')}`
            },
            {
              name: '文化新村',
              value: [120.878099, 30.028623],
              pointValue: '98',
              flag: true,
              img: `image://${require('../../../assets/img/hong.png')}`
            }
          ]
        } else if (this.areaName === '崧厦街道') {
          this.pointData = [
            {
              name: '蔡林村',
              value: [120.832713, 30.09329],
              pointValue: '98',
              flag: true,
              img: `image://${require('../../../assets/img/lv.png')}`
            },
            {
              name: '东凌湖村',
              value: [120.825199, 30.091851],
              pointValue: '93',
              flag: true,
              img: `image://${require('../../../assets/img/lv.png')}`
            }
          ]
          // echarts.registerMap('上虞', mapJson)
        } else {}
        // 不用定时器进入乡镇街道地图，村社区的点貌似显示不出来
        setTimeout(() => {
          echarts.registerMap('上虞', mapJson)
          this.ma