echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏

需求：渲染中国地图，支持下钻，同时南沙群岛显示在地图右下脚，三沙市边界隐藏

geoJson 数据可从阿里云-dataV-下载
如果要展示南海诸岛需要将地图类型设置为china, 将海南省中的三沙市坐标删除


<template>
<div ref="echartInstance"></div>
</template>
<script>
import * as echarts from 'echarts'
import { registerMap } from 'echarts'
import geoJson from './geoJson.json'const CITY_LEVEL = {country: 'country', // 全国province: 'province',city: 'city', // 市district: 'district' // 县一级
}export default {name: 'chinaMap',data() {return {curLevel: {level: CITY_LEVEL.country, // 默认国家adcode: '100000'},levelStack: [] // 下钻的栈}},methods: {init(){// 此处将南沙群岛的边界过滤掉，或者也可以直接在geoJson中删除geoJson.features = geoJson.features.filter(item => item.properties.adcode !== '100000_JD')const ecahrtInstance = echarts.init(this.$refs.echartInstance)// geoJson 文件可直接使用从阿里云下载文件registerMap(‘china’, geoJson)const option = {geo: {map: 'china'},series: [{type: 'map',map: 'china'}]}ecahrtInstance.setOption(option , true)ecahrtInstance.on('click', (params) => {// 可以从数据中拿到当前需要展示的省市区adcode 获取对应的geoJson 文件const {level, adcode} = this.curLevelthis.levelStack.push({level, adcode})fetch(`/api/${params.adcode}.json`).then(res => {// 此处重新渲染echats 操作  })})}   }
}
</script>

最终效果：

echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏相关推荐

echarts 使用案例：针对map地图中显示数据格式化
前言: 1,报表连接:http://gallery.echartsjs.com/editor.html?c=xrJZ60TVIg 2,echats 制作报表中,使用地图的展示样式,发现地图上的显示数据 ...
Echarts使用map3D+visualMap 实现地图下钻，区域高亮状态下变高
想要实现3D地图省市区下钻,地图区域用不同颜色区分数值大小,当hover区域时,当前区域变高,点击下钻 js核心代码 data() {return {cityData,mapData,cityLis ...
Echarts实现省级到市级地图下钻
在echarts社区里copy项目时,有符合需求的地图但是没有地图下钻,没办法看了看有地图下钻的项目想了一个比较简单的思路. (这里不再赘述如何创建基本地图实例) 1.首先把对应城市的下级地区geoJ ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
uniapp 小程序map地图上显示多个酷炫动态的标点，头像后端传过来，真机测试有效
文章目录前言一.使用uniapp 原生的map 组件二.发现坑1 三.分析ui图----发现坑2 四.发现坑3 四.发现坑4 五.发现坑5 ----------------很重要,楼主花费了好长 ...
echarts3 地图只显示南沙群岛，刷新页面显示正常
最近在使用echarts3 地图时遇到一个奇怪的问题,进入页面只显示南沙群岛部分,再次刷新页面显示正常,搜索无果后进行了摸索式探索,最终找到了问题的解决方案,现记录于此希望帮到遇到同样问题的朋友. E ...
echarts3 地图只显示南沙群岛
产生上述现象后,刷新一下页面看看地图是否显示正常,如果正常请参考我的另一篇文章:http://blog.csdn.net/john1337/article/details/54947787 如果刷新后 ...
echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
Google map地图限制显示区域、拖拽范围
根据坐标限制显示区域.限制地图拖拽范围 function moveLimit(){var strictBounds = new google.maps.LatLngBounds(new google. ...

echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏

需求：渲染中国地图，支持下钻，同时南沙群岛显示在地图右下脚，三沙市边界隐藏

最终效果：

echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏相关推荐

最新文章

热门文章