echarts map3D下钻及scatter3D的运用

本文介绍了如何使用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
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值