前言
实现echarts全国地图展示,可点击进入省份,可根据经纬度坐标进行位置标记
一、效果展示
全国地图
省级地图(西藏)
二、实现步骤
1.安装echarts
// 下载echarts
npm install echarts --save
2.在main.js中全局注册echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
//直接this.$echarts使用
3.导入地图json数据
https://download.csdn.net/download/weixin_44088179/88251920?spm=1001.2014.3001.5501
下载后放入自己项目中(我放在static目录中),这里是全国及各个省份的所有json数据集合,如还需市、区级还需自行下载,地址如下:
http://datav.aliyun.com/portal/school/atlas/area_selector 可下载全国所有地区的json数据(全国、省、市、区)
4.创建cityExport.js文件
创建cityExport.js文件,汇总所有地图json (引入路径记得修改)
let cityList = [
{
name: '北京市',
code: 110000,
data: require('../../../static/json/beijing.json'),
},
{
name: '天津市',
code: 120000,
data: require('../../../static/json/tianjin.json'),
},
{
name: '河北省',
code: 130000,
data: require('../../../static/json/hebei.json'),
},
{
name: '山西省',
code: 140000,
data: require('../../../static/json/shanxi.json'),
},
{
name: '内蒙古自治区',
code: 150000,
data: require('../../../static/json/neimenggu.json'),
},
{
name: '辽宁省',
code: 210000,
data: require('../../../static/json/liaoning.json'),
},
{
name: '吉林省',
code: 220000,
data: require('../../../static/json/jilin.json'),
},
{
name: '黑龙江省',
code: 230000,
data: require('../../../static/json/heilongjiang.json'),
},
{
name: '上海市',
code: 310000,
data: require('../../../static/json/shanghai.json'),
},
{
name: '江苏省',
code: 320000,
data: require('../../../static/json/jiangsu.json'),
},
{
name: '浙江省',
code: 330000,
data: require('../../../static/json/zhejiang.json'),
},
{
name: '安徽省',
code: 340000,
data: require('../../../static/json/anhui.json'),
},
{
name: '福建省',
code: 350000,
data: require('../../../static/json/fujian.json'),
},
{
name: '江西省',
code: 360000,
data: require('../../../static/json/jiangxi.json'),
},
{
name: '山东省',
code: 370000,
data: require('../../../static/json/shandong.json'),
},
{
name: '河南省',
code: 410000,
data: require('../../../static/json/henan.json'),
},
{
name: '湖北省',
code: 420000,
data: require('../../../static/json/hubei.json'),
},
{
name: '湖南省',
code: 430000,
data: require('../../../static/json/hunan.json'),
},
{
name: '广东省',
code: 440000,
data: require('../../../static/json/guangdong.json'),
},
{
name: '广西壮族自治区',
code: 450000,
data: require('../../../static/json/guangxi.json'),
},
{
name: '海南省',
code: 460000,
data: require('../../../static/json/hainan.json'),
},
{
name: '重庆市',
code: 500000,
data: require('../../../static/json/chongqing.json'),
},
{
name: '四川省',
code: 510000,
data: require('../../../static/json/sichuan.json'),
},
{
name: '贵州省',
code: 520000,
data: require('../../../static/json/guizhou.json'),
},
{
name: '云南省',
code: 530000,
data: require('../../../static/json/yunnan.json'),
},
{
name: '西藏自治区',
code: 540000,
data: require('../../../static/json/xizhang.json'),
},
{
name: '陕西省',
code: 610000,
data: require('../../../static/json/shangxi.json'),
},
{
name: '甘肃省',
code: 620000,
data: require('../../../static/json/gansu.json'),
},
{
name: '青海省',
code: 630000,
data: require('../../../static/json/qinghai.json'),
},
{
name: '宁夏回族自治区',
code: 640000,
data: require('../../../static/json/ningxia.json'),
},
{
name: '新疆维吾尔自治区',
code: 650000,
data: require('../../../static/json/xinjiang.json'),
},
{
name: '香港特别行政区',
code: 810000,
data: require('../../../static/json/xianggang.json'),
},
{
name: '澳门特别行政区',
code: 820000,
data: require('../../../static/json/aomen.json'),
},
{
name: '台湾省',
code: 710000,
data: require('../../../static/json/taiwan.json'),
},
];
let china = require('../../../static/json/china.json')
export default {
cityList: cityList,
china: china
};
4.创建地图
代码如下(示例):
<template>
<div class="map" style="height: 410px;position: relative;">
<img @click="rebackMap"
v-show="isreturn"
src="@/static/img/return.png"
alt=""
style="z-index:999;
position: absolute;
right: 20px;
top: 15px;">
<div id="map" style="height: 410px;"></div>
</div>
</template>
<script>
import cityExport from './cityExport.js';
import * as echarts from 'echarts';
export default {
data() {
return {
isreturn: false, // 是否显示返回全国地图按钮
mapChart: null, //地图对象
mapOption: null,//地图属性
dataList: [ //地图标记经纬度坐标和code码,可只要经纬度
{ name: "西藏", value: [91.23, 29.5, 2333] },
{ name: "黑龙江", value: [128.03, 47.01, 1007] },
],
}
},
mounted() {
this.getMap()
},
methods: {
getMap() { //地图
if (!this.mapChart) {
this.mapChart = this.$echarts.init(document.getElementById('map'));
}
this.mapOption = {
// 背景颜色
backgroundColor: "#00264e",
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
alwaysShowContent: false,
backgroundColor: "#0C121C",
borderColor: "rgba(0, 0, 0, 0.16);",
hideDelay: 100,
triggerOn: "mousemove",
enterable: true,
textStyle: {
color: "#DADADA",
fontSize: "12",
width: 20,
height: 30,
overflow: "break",
},
showDelay: 100
},
map: 'china',
roam: true,//是否启缩放和平移
scaleLimit: {
min: 1,
max: 5
},
label: {
normal: {
show: true,
fontSize: '10',
color: '#fff'
}
},
// 地图配置
geo: {
map: "china",
label: {
// 通常状态下的样式
normal: {
show: true,
textStyle: {
color: "#eee",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "#eee",
},
},
},
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "#ccc",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "#457b9d",
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
series: [
{
name: '站点信息',
coordinateSystem: 'geo',
type: 'scatter',
geoIndex: 0,
itemStyle: {
normal: {
color: '#c23531'
},
emphasis: {
borderColor: '#fff',
borderWidth: 1,
opacity: 0.5
}
},
symbolSize: 12,
data: this.dataList
}
],
};
// 地图注册,第一个参数的名字必须和option.geo.map一致
this.$echarts.registerMap('china', cityExport.china);
this.mapChart.setOption(this.mapOption);
//地图点位点击事件
this.mapChart.on('click', params => {
// 获取点击的省份名称
let provinceName = params.name
// 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
this.dataList.map(item => {
if (item.name == provinceName) {
this.mapOption.series[0].data = [item];
}
})
// 进入省级地图
cityExport.cityList.map(value => {
if (value.name.indexOf(provinceName) !== -1) {
this.mapChart.clear();
this.mapOption.geo.map = 'Pmap';
this.$echarts.registerMap('Pmap', value.data)
this.mapChart.setOption(this.mapOption);
this.isreturn = true;
}
});
})
},
rebackMap() { //返回全国地图
this.mapChart.clear();
this.mapOption.series[0].data = this.dataList //重新标记
this.mapOption.geo.map = 'china';
this.$echarts.registerMap('china', cityExport.china);
this.mapChart.setOption(this.mapOption);
this.isreturn = false;
}
}
}
</script>