echarts地图
想通过echarts得到一份这样的地图（此处为新疆地图），首先需要一份新疆地区的json数据，还有就是echarts地图代码。
1、json数据
可以通过阿里云数据化可视平台得到：阿里云数据可视化平台
2、echarts代码如下
<template>
<div class="map_content">
<div id="map-box"></div>
</div>
</template>
<script>
export default {
props: {
// 地图区域数据
gisData: Array,
},
data() {
return {
// 城市经纬度坐标
geoCoordMap : {
阿勒泰地区: [88.13963, 47.848393],
塔城地区: [82.985732, 46.746301],
克拉玛依市: [84.873946, 45.595886],
博尔塔拉蒙古: [81.984105, 44.569962],
伊犁哈萨克自治州: [80.226151, 42.713006],
阿克苏地区: [80.265068, 41.170712],
克孜勒苏柯尔克孜自治州: [74.172825, 39.713431],
喀什地区: [75.989138, 37.467664],
和田地区: [79.92533, 37.110687],
巴音郭楞蒙古自治州: [84.150969, 38.768552],
哈密市: [93.51316, 42.833248],
乌鲁木齐市: [87.497106, 42.740062],
吐鲁番市: [87.871523, 43.513961],
昌吉回族自治州: [89.315669, 44.790604]
},
// 为解决点击空白区域展示全数据，设定此变量
isBlank: true,
};
},
mounted() {
// dom加载完毕之后执行js
let This = this;
setTimeout(function() {
This.drawChart(); // 展示地图
}, 500);
},
methods: {
// 处理地区展示数据
convertData(data) {
let res = [];
// 拿到key值
let geoCoordMapKeys = Object.keys(this.geoCoordMap);
geoCoordMapKeys.forEach(item => {
// 与传入的值相匹配
data.forEach(sItem => {
if(sItem.name == item) {
res.push({
name: sItem.name,
dccId: sItem.dccId,
value: this.geoCoordMap[item],
capacityValue: sItem.value
});
}
});
});
return res;
},
// 地图配置 geoCoordMap地区图层 data地区展示数据
drawChart() {
let This = this;
let data = This.convertData(This.gisData);
let option = {};
let myChart = This.$echarts.init(document.querySelector("#map-box"));
This.$echarts.registerMap("mapBox", require("./xinjiang.json"));
myChart.clear();
myChart.off("click"); // 解绑事件处理函数。为了解决地图下钻会重复触发点击事件的问题
option = {
geo: {
map: "mapBox",
aspectScale: 0.75,
zoom: 1.2,
roam: false,
itemStyle: {
normal: {
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#bcf9dc"
},
{
offset: 1,
color: "#7ae0b1"
}
],
globalCoord: true
},
shadowColor: "#7ae0b1",
shadowOffsetX: 10,
shadowOffsetY: 11
},
emphasis: {
areaColor: "#bcf9dc",
borderWidth: 0,
color: "green",
label: {
show: false
}
}
}
},
series: [
// 默认
{
map: "mapBox",
type: "map",
roam: false,
zoom: 1.2,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: "#5cd59c",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#bcf9dc" // 0% 处的颜色
},
{
offset: 1,
color: "#bcf9dc" // 100% 处的颜色
}
],
globalCoord: true // 缺省为 false
}
},
emphasis: {
borderColor: "#1aa563",
areaColor: "#30c47e",
borderWidth: 2
}
}
},
// 城市
{
name: "城市",
coordinateSystem: "geo",
type: "effectScatter",
symbolSize: 0.1,
// showEffectOn: "render",
// rippleEffect: {
// brushType: "stroke"
// },
label: {
normal: {
formatter: function (params) {
return data.find(item => item.name == params.name) == undefined ? '' : params.name + '\n\r' + params.data.capacityValue + 'MV';
},
position: "right",
show: true
}
},
itemStyle: {
normal: {
color: "#03552E",
shadowBlur: 10,
shadowColor: "#333",
}
},
data: data
},
// 自定义图标
{
name: "logo",
type: "custom", // 配置显示方式为用户自定义
coordinateSystem: "geo",
renderItem: function (params, api) {
//具体实现自定义图标的方法{
return This.addImage(
require("./33.png"),
params,
api,
data
);
},
data: data,
},
]
};
myChart.setOption(option, true);
// 点击的是空白区域
This.isBlank = true;
myChart.off('click');
myChart.on("click", function (params) {
This.isBlank = false;
let dataIndex = This.gisData.findIndex(item => item.name == params.name);
if(dataIndex > -1) {
if(This.gisData[dataIndex].dccId == undefined) {
// 跳转到地理信息页
$router.push({
path: '/services/geographicInfo'
});
} else {
// 返回dccId
This.$emit('clickMap', This.gisData[dataIndex]);
}
}
});
// 整个canvas区域的点击事件
var oDiv = document.querySelector("#map-box>div");
oDiv.onclick = function (params) {
if (This.isBlank) {
This.$emit("clickMap", { dccId: localStorage.getItem("dccId") });
}
// 注意要在此处再设置为true，不然整个isBlank判断就变成只有一次功用了。
This.isBlank = true;
};
window.addEventListener("resize", () => {
myChart.resize();
});
},
// 地图展示自定义图标
addImage(url, params, api, realData) {
return {
type: "image",
style: {
image: url,
x: api.coord([
realData[params.dataIndex].value[0]-0.8,
realData[params.dataIndex].value[1]
])[0],
y: api.coord([
realData[params.dataIndex].value[0],
realData[params.dataIndex].value[1]+0.3
])[1],
width: 15,
height: 14
}
};
},
}
};
</script>
<style lang="scss" scoped>
.map_content {
width: 100%;
height: 330px;
#map-box {
width: 100%;
height: 100%;
}
}
</style>
其中gisData的数据格式如下：
gisData: [
{
name: '乌鲁木齐市',
value: 123456
},
{
name: '克拉玛依市',
value: 223456
},
],
