vue+echarts实现中国地图省市区下钻以及添加标注

最近项目中有需要地图下钻和添加标注的需求，就先做了一个demo，在博客上查了一些资料，结合实际情况，发现除了一些状况，发篇文章，采集一下各位大佬的意见。

效果呈现

目前还没有问题，下面是省内地图，然后就出现了区域外的标注，原因大概是因为标注和下钻之间出现了冲突，如图：

不知道有没有大佬指导一下，下面还有区级的地图，一起贴上来：

这一块的问题，简单来说就是太原作为一个市级的标注，在区级中不应该显示标注。
地图代码

<template><div><div id="tool"><span @click="goBackChina">{{ firstTitle }}</span><span @click="goBackProvince">{{ currentProvince.name }}</span><span @click="goBackCity">{{ currentCity.name }}</span></div><div id="chinaMap"></div></div>
</template><script>
import * as echarts from "echarts";
const { province, city } = require("province-city-china/data");
const data1 = [//需要标注的地点的名称{ name: "营口", value: 0 },{ name: "江阴", value: 0 },{ name: "太原", value: 0 },{ name: "铜川", value: 0 },{ name: "平度", value: 0 },{ name: "章丘", value: 0 },{ name: "临汾", value: 0 },{ name: "石嘴山", value: 0 },{ name: "沈阳", value: 0 },{ name: "大庆", value: 0 },
];
const geoCoordMap = {//标注位置营口: [122.18, 40.65],江阴: [120.26, 31.91],太原: [112.53, 37.87],铜川: [109.11, 35.09],平度: [119.97, 36.77],章丘: [117.53, 36.72],临汾: [111.5, 36.08],石嘴山: [106.39, 39.04],沈阳: [123.38, 41.8],大庆: [125.03, 46.58],
};export default {name: "ChinaMain",data() {return {firstTitle: "中国",currentClick: "",myChart: "",currentProvince: {},currentCity: {},cityState: false,provinceState: false,};},mounted() {this.initEcharts("china", "中国");},methods: {goBackChina() {this.initEcharts("china", "中国");this.currentProvince.name = "";this.currentCity.name = "";},goBackProvince() {this.initEcharts(this.currentProvince.province,this.currentProvince.name,);this.currentCity.name = "";},goBackCity() {this.initEcharts(this.currentCity.code, this.currentCity.name);},convertData(data1) {var res = [];for (var i = 0; i < data1.length; i++) {var geoCoord = geoCoordMap[data1[i].name];if (geoCoord) {res.push({name: data1[i].name,value: geoCoord.concat(Number(data1[i].value)),});}}return res;},initEcharts(pName, state = "0") {//地图绘制this.myChart = echarts.init(document.getElementById("chinaMap"));let tmpSeriesData = [];if (pName === "china") {let geoJson = require("../../assets/mapdata/china.json");echarts.registerMap(pName, geoJson);} else if (this.currentClick === "province" || state === "1") {let geoJson = require(`@/assets/mapdata/geometryProvince/${pName}.json`);echarts.registerMap(pName, geoJson);} else {let geoJson = require(`../../assets/mapdata/geometryCouties/${pName}.json`);echarts.registerMap(pName, geoJson);}let option = {tooltip: {trigger: "item", //触发类型。item,axis,noneshowDelay: 0,transitionDuration: 0.2,formatter: function (res) {if (res.value.length == 3) {return (res.name +"坐标" +"：" +res.data.value[0] +"，" +res.data.value[1]);} else {return res.name;}},},geo: {//标注show: true,map: pName,label: {normal: {show: false,},emphasis: {show: false,},},},series: [{type: "effectScatter",symbol: "pin",rippleEffect: {brushType: "stroke",},symbolSize: 10, //控制点的大小coordinateSystem: "geo",data: this.convertData(data1), //加载数据},{type: "map",map: pName,emphasis: {label: {show: true,fontSize: "14px",},},label: {show: true, //是否显示标签color: "#303133",fontSize: "10px",},data: tmpSeriesData, //后端数据},],};this.myChart.setOption(option, true);this.myChart.off("click");if (pName === "china") {// 全国时，添加click 进入省级this.currentClick = "province";this.myChart.on("click", this.mapClick);} else {this.currentClick = "city";this.myChart.on("click", this.mapClick);}},//地图点击事件mapClick(param) {this.provinceState = false;this.cityState = false;if (this.currentClick === "province") {//遍历取到provincesText 中的下标  去拿到对应的省jsfor (var i = 0; i < province.length; i++) {if (param.name === province[i].name) {this.provinceState = true;this.currentProvince = { ...province[i] };this.currentProvince.name = ` -->${this.currentProvince.name} `;//显示对应省份的方法this.showProvince(province[i].province, province[i].name);break;}}!this.provinceState ? alert("暂不支持该区域地图展示!") : "";} else {for (var l = 0; l < city.length; l++) {if (param.name === city[l].name) {this.cityState = true;this.currentCity = { ...city[l] };this.currentCity.name = ` -->${this.currentCity.name} `;//显示对应城市的方法this.showProvince(city[l].code, city[l].name);break;}}!this.cityState ? alert("暂不支持该区域地图展示!") : "";}},showProvince(pName, Chinese_) {this.initEcharts(pName, Chinese_);},},
};
</script><style lang="css" scoped>
#tool {height: 30px;line-height: 30px;color: deepskyblue;cursor: pointer;position: absolute;top: 10px;left: 10px;z-index: 10000;font-size: 18px;text-align: left;
}
#chinaMap {width: 1000px;height: 750px;
}
</style>

以上是地图的所有代码，还有一些引入的json数据就不贴出来了，毕竟demo还有问题，问题点：地图下钻时，标注的数据没有得到更新，查资料说是把标注的数据从外部传入到组件内，把事件也放到外部，这样切换数据都可以通过外部的事件来切换，好像需要通过props，我对这方面不太了解，请求大佬支援。

vue+echarts实现中国地图省市区下钻以及添加标注相关推荐

vue + echarts实现中国地图省份下钻联动
说在前面
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
echarts实现中国地图的下钻和返回上一级
首先我们需要知道echarts的地图的渲染需要依赖于json文件,例如:中国地图china.json,广东地图guangdong.json,广西地图guangxi.json:也就是每个不同的json文 ...
【vue】vue + ECharts 实现中国地图
1.效果图: 2.实现步骤引入ECharts ECharts 官网地址:https://echarts.apache.org/zh/index.html npm install echarts -- ...
Vue + Echarts 实现中国地图多级钻取功能
传送门:本文完整代码地址如果觉得有帮助,别忘了点亮 star 哦说明: 本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能(基本版未做过多功能拓展和样式优化便于二次开 ...
vue+echarts实现中国地图
先看效果图第一步:脚手架中引入echarts npm 安装 npm install echarts --save //引入echarts import * as echarts from 'echa ...
Vue+Echarts实现中国地图+各省业务数据分布情况组件
Vue组件首先需要引入echarts包和中国地图数据, import echarts from 'echarts' import '../../../node_modules/echarts/map/ ...
vue集成echarts，vue+echarts实现中国地图和河南省地图
安装echarts npm install echarts -D 配置echarts 在项目src目录下main.js文件中加入配置: import echarts from 'echarts'Vue ...
vue+echarts GL3d中国地图
相关实例 made a pie 添加链接描述 2.添加链接描述 3.添加链接描述一.下载安装所需包 npm install echarts@4.9.0 --save //之所以下载4点几版本是因为5 ...

vue+echarts实现中国地图省市区下钻以及添加标注

vue+echarts实现中国地图省市区下钻以及添加标注相关推荐

最新文章

热门文章