前言
由于项目需求需要在Echarts地图已有项目城市做标记并且牵扯到Echarts地图下钻前地图带有散点又要对下钻后的地图也要带有散点，我这边一开始既能做到Echarts 地图下钻又可以带有散点图，但是一旦结合下钻和散点就不行了，散点就会出现偏移，位置不对，塌陷，后来解决了这个问题，再次做个记录也分享给需要的朋友。
先上图看效果
一、安装Apache ECharts
2.1 安装Apache ECharts
npm install echarts --save
或者
yarn add echarts
2.2 引入Apache ECharts
在main.js中引入echarts
// 引入echarts
import *as echarts from 'echarts'
Vue.prototype.$echarts = echarts
也可以在使用的页面引入都可以
二、创建目录
JSON: 用于存放地图资源的GeoJSON数据文件
三、获取地图的GeoJSON
GeoJSON获取地址
左侧是地图，右侧是JSON数据路径，点击你想要生成的地图省市、地级（郑州市为例）；
点进去是一级，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；
然后其右侧有JSON数据的链接地址，可以选择下载下来（放在Json文件夹中），也可以使用在线地址！（json API与geoJSON数据地址均可用），我用的是下载下来使用，
四、重点过程以及终于切换散点过程实现简单说下
就是在第一次点击下钻的时候将散点数据设为全局变量，进行跳转的时候进行条件判断，我这边举例为当下钻的城市为洛阳的时候就将洛阳的散点的全局变量变成洛阳城市的散点位置，并把不符合条件的城市全部将全局的散点位置设置为空，这样就不会出现散点位置偏移的情况，在返回的时候遇到了问题，就在返回那边添加了点击事件重新渲染整个地图，在这个是时间里再将第一次地图的散点位置恢复，我感觉这样代码比较冗余，要是有其他办法的朋友写出来请私信我，参考下谢谢，
提示：散点坐标获取的方式是在json文件里
五、整体代码
<template>
<el-row class="home" :gutter="24">
<div class="btn" >
<span @click="int">河南省</span>
<span v-if="changeReturn">{{ this.citys }}</span>
</div>
<div class="bmap-box" id="bmapChartBox"></div>
</el-row>
</template>
<script>
import * as echarts from "echarts";
import henan from '@/assets/JSON/sheng/henan.json'
export default {
name: "HomeA",
data() {
return {
changeReturn: true,
citys:"",
scatterData: [
{ value: [ 112.038509, 34.293198] }, //洛阳
{ value: [ 113.715606,34.071457] } //许昌
],
// 地图数据
mapData: {
河南省: require("../../assets/JSON/sheng/henan.json"),
郑州市: require("../../assets/JSON/shi/郑州市.json"),
安阳市: require("../../assets/JSON/shi/安阳市.json"),
鹤壁市: require("../../assets/JSON/shi/鹤壁市.json"),
焦作市: require("../../assets/JSON/shi/焦作市.json"),
开封市: require("../../assets/JSON/shi/开封市.json"),
洛阳市: require("../../assets/JSON/shi/洛阳市.json"),
漯河市: require("../../assets/JSON/shi/漯河市.json"),
南阳市: require("../../assets/JSON/shi/南阳市.json"),
濮阳市: require("../../assets/JSON/shi/濮阳市.json"),
商丘市: require("../../assets/JSON/shi/商丘市.json"),
新乡市: require("../../assets/JSON/shi/新乡市.json"),
信阳市: require("../../assets/JSON/shi/信阳市.json"),
许昌市: require("../../assets/JSON/shi/许昌市.json"),
周口市: require("../../assets/JSON/shi/周口市.json"),
济源市: require("../../assets/JSON/shi/济源市.json"),
驻马店市: require("../../assets/JSON/shi/驻马店市.json"),
三门峡市: require("../../assets/JSON/shi/三门峡市.json"),
平顶山市: require("../../assets/JSON/shi/平顶山市.json"),
},
};
},
mounted() {
this.drawMap(this.mapData["河南省"], 0);
this.changeReturn = false
},
methods: {
int() {
this.drawMap(this.mapData["河南省"], 0);
this.changeReturn = false;
const option = {
series: [
{
name: "郑州地图",
type: "map",
top: "10%",
zlevel: 5, //地图显示的层级，和z-index 用法一样
map: "js", // 这个是上面注册时的名字哦
label: {
show: true,
textStyle: {
color: "#fff"
}
},
itemStyle: {
normal: {
areaColor: "#1f75b8", //更改地图各个区域的颜色背景
borderColor: "#93eaf8", //更改地图各个区域之间边框的颜色
borderWidth: 0.5, //边框宽度
opacity: 1 //透明度
},
// 高亮时的设置
emphasis: {
//鼠标悬停的样式
// color: "#000000",
areaColor: "#77e8e4" //更改鼠标悬浮地图上的颜色
// borderWidth: 0.5,
}
},
// 地图选中区域样式(点击选中区域时)
select: {
label: {
// 选中区域的label(文字)样式
color: "#000000"
},
itemStyle: {
// 选中区域的默认样式
areaColor: "#77e8e4"
}
}
},
// 地图上显示的波纹动画
// 洛阳
{
type: "effectScatter",
coordinateSystem: "geo", //使用地理坐标系
//要有对应的经纬度才显示，先经度再维度
data: [
{ value: [ 112.038509, 34.293198] },//洛阳
{ value: [ 113.715606,34.071457] } //许昌
],
showEffectOn: "render", //绘制完成后显示特效
rippleEffect: {
scale: 4, // 波纹的最大缩放比例
brushType: "stroke",
},
hoverAnimation: true,
label: {
//图形上的文本标签
show: true,
formatter: "{b}",
position: "right",
fontWeight: 500,
fontSize: 10,
},
//默认样式
itemStyle: {
color: "#32cd32",
shadowBlur: 10,
shadowColor: "#333",
},
//鼠标移入时样式
emphasis: {
itemStyle: {
color: "#f4e925", // 高亮颜色
},
},
zlevel: 6,
},
],
geo: [
{
map: "henan",
top: "11%",
// bottom:"30%",
zlevel: 4,
itemStyle: {
color: "#3C5FA1", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#3C5FA1" // 边框颜色
}
},
{
map: "js",
top: "12%",
zlevel: 3,
itemStyle: {
color: "#163F6C", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#163F6C" // 边框颜色
}
},
{
map: "js",
top: "13%",
zlevel: 2,
itemStyle: {
color: "#31A0E6", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#31A0E6", // 边框颜色
shadowColor: "#fff", // 外部阴影
shadowBlur: "10"
}
}
]
}
this.echarts = echarts;
this.dom = document.getElementById("bmapChartBox");
this.myChart = this.echarts.init(this.dom);
this.echarts.registerMap("henan", henan);
this.myChart.setOption(option);
},
// setMapCenterZoomData(data, zoom, center) {
// this.option.series[0].data = data;
// this.option.geo[0].zoom = zoom;
// this.option.geo[0].center = center;
// },
drawMap(json) {
this.changeReturn = true;
const option = {
series: [
{
name: "河南地图",
type: "map",
top: "10%",
zlevel: 5, //地图显示的层级，和z-index 用法一样
map: "js", // 这个是上面注册时的名字哦
label: {
show: true,
textStyle: {
color: "#fff"
}
},
itemStyle: {
normal: {
areaColor: "#1f75b8", //更改地图各个区域的颜色背景
borderColor: "#93eaf8", //更改地图各个区域之间边框的颜色
borderWidth: 0.5, //边框宽度
opacity: 1 //透明度
},
// 高亮时的设置
emphasis: {
//鼠标悬停的样式
// color: "#000000",
areaColor: "#77e8e4" //更改鼠标悬浮地图上的颜色
// borderWidth: 0.5,
}
},
// 地图选中区域样式(点击选中区域时)
select: {
label: {
// 选中区域的label(文字)样式
color: "#000000"
},
itemStyle: {
// 选中区域的默认样式
areaColor: "#77e8e4"
}
}
},
// 地图上显示的波纹动画
// 洛阳
{
type: "effectScatter",
coordinateSystem: "geo", //使用地理坐标系
//要有对应的经纬度才显示，先经度再维度
data: this.scatterData,
showEffectOn: "render", //绘制完成后显示特效
rippleEffect: {
scale: 4, // 波纹的最大缩放比例
brushType: "stroke",
},
hoverAnimation: true,
label: {
//图形上的文本标签
show: true,
formatter: "{b}",
position: "right",
fontWeight: 500,
fontSize: 10,
},
//默认样式
itemStyle: {
color: "#32cd32",
shadowBlur: 10,
shadowColor: "#333",
},
//鼠标移入时样式
emphasis: {
itemStyle: {
color: "#f4e925", // 高亮颜色
},
},
zlevel: 6,
},
],
geo: [
{
map: "js",
top: "11%",
// bottom:"30%",
zlevel: 4,
itemStyle: {
color: "#3C5FA1", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#3C5FA1" // 边框颜色
}
},
{
map: "js",
top: "12%",
zlevel: 3,
itemStyle: {
color: "#163F6C", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#163F6C" // 边框颜色
}
},
{
map: "js",
top: "13%",
zlevel: 2,
itemStyle: {
color: "#31A0E6", // 背景
borderWidth: "1", // 边框宽度
borderColor: "#31A0E6", // 边框颜色
shadowColor: "#fff", // 外部阴影
shadowBlur: "10"
}
}
]
}
this.echarts = echarts;
this.dom = document.getElementById("bmapChartBox");
this.myChart = this.echarts.init(this.dom);
this.echarts.registerMap("js", json);
this.myChart.setOption(option);
this.myChart.off("click");
this.myChart.on("click", param => {
console.log(param,"param");
this.citys = param.name;
const city = param.name;
if(city == '洛阳市'){
this.scatterData = [
{ value: [ 112.485027, 34.832578] } //孟津
]
}else if(city == '许昌市'){
this.scatterData = [
{ value: [ 113.732885,34.014998] } //建安区
]
}else {
this.scatterData = []; //不符合条件全部为空
}
this.mapData[city] && this.myChart.clear();
this.mapData[city] && this.drawMap(this.mapData[city], 1, param.name);
});
},
}
};
</script>
<style lang="scss" scoped>
.home {
width: 100%;
}
.btn {
position: absolute;
left: 6rem;
top: 3rem;
z-index: 1;
color: white;
font-size: 1.2rem;
span:nth-of-type(1){
cursor: pointer;
}
span:nth-of-type(2){
margin-left: 1rem;
}
}
.bmap-box {
width: 100%;
height: 93.6vh;
margin: auto;
background-image: url("../../assets/imgs/province/pageBg.png");
background-size: cover;
background-repeat: no-repeat;
}
</style>
声明
这个地图下钻是参考其他博主的文章写的，我是在这个博主下钻的基础上进行下钻和散点结合的，很感谢这位博主。
原博主博客点击跳转
扫一扫
7881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
