记录一下最近使用的echartsMap的使用,在开发过程中避免不了会遇到使用地图的情况,地图的种类又有很多,其中百度地图,高德地图的使用率相对高一点,但是根据自身的需求也可选择一些别的地图使用来完成自己的开发,其中echartsMap就是一种,如果要用echartsMap首先需要自己有地图所需要的geoJson数据,这个数据需要到指定的开源网站上去下载,还有固定的省市区的code地址,然后才能配合echartsMap去使用:
let layoutSize = 0
let layoutCenter = ['50%', '65%']
if (type != 'cha') {
layoutSize = '65%'
layoutCenter = ['50%', '55%']
} else {
layoutSize = '100%'
layoutCenter = ['50%', '70%']
}
var map = document.getElementById("mapDiv");
//先加载全国地图,使用require引入json数据
// const china = require("@/assets/js/100000_full.json");
// const ccc = require("@/assets/js/100000_province.json");
// console.log(ccc)
// this.city = china;
//注册地图
this.$echarts.registerMap("城市", this.mapInfo);
const option = {
geo: {
type: "map",
map: "城市",
// roam: true,
zoom: 1.2,
label: {
normal: {
show: true,
fontSize: "12",
fontWeight: "bolder",
color: '#fff'
},
},
itemStyle: {
normal: {
areaColor: 'RGBA(3, 39, 45, 0.3)',
borderColor: "#0D6675",
borderWidth: 1,
// shadowColor: "#2C99F6",
shadowOffsetY: 0,
shadowBlur: 25,
},
},
emphasis: { // 鼠标悬浮地图区域样式
// focus: 'self',
itemStyle: {
show: true,
fontSize: "12",
areaColor: "RGBA(66, 255, 238, 0.5)",
},
label: {
show: true,
color: '#fff'
},
},
select: { // 地图选中区域样式
label: { // 选中区域的label(文字)样式
show: true,
color: '#fff',
},
itemStyle: {// 选中区域的默认样式
show: true,
color: '#fff'
},
},
},
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: [],
symbol: '',
symbolSize: [30, 50],
// symbolOffset: [0, -60],
z: 999,
// symbolSize: '20',
// symbol: 'circle',
// itemStyle: { color: "orange" }
},
{
type: 'scatter',
coordinateSystem: 'geo',
data: [],
symbol: '',
symbolSize: [30, 50],
// symbolOffset: [0, -60],
z: 999,
// symbolSize: '20',
// symbol: 'circle',
// itemStyle: { color: "orange" }
}],
layoutCenter: layoutCenter,//位置
layoutSize: layoutSize,//大小
};
// 使用刚指定的配置项和数据显示图表。
this.mapBox = this.$echarts.init(map);
this.mapBox.setOption(option);
// 窗口自适应
(window.onresize = function () {
if (this.mapBox) {
this.mapBox.resize();
}
})
this.mapBox.off('click');
this.mapBox.on('click', (param) => {
this.setDrillDown(param.name)
// event.stopPropagation() // 阻止冒泡
// console.log(param.data)
// // console.log(provinceAlphabet)
// option.series[0].center = [currentData[i].longitude, currentData[i].latitude];
// option.series[0].layoutCenter = ['50%', '50%'];
// option.series[0].zoom = 7;
// this.mapBox.setOption(option);
});
上面this.$echarts.registerMap(“城市”, this.mapInfo)用到 this.mapInfo就是地图需要的geojson数据,大家可以请求自己有的地图数据去解析成需要的格式进行使用,切换地图的话切换对应的地图genjson数据即可。如果大家想要在地图上加对应的图标什么的就需要再对应的 series里面添加对应的数据进行操作,需要设置对应的地图样式也可在上面数据里面设置对应的参数即可,这点在echarts里面可以找到对应的设置
let urlo = 'image://' + require('../../../assets/img/地图无人机.png');// 自定义图片路径
let urlt = 'image://' + require('../../../assets/img/地图机场.png');// 自定义图片路径
var newOption = this.mapBox.getOption();
imgurl = urlt
dataObj = {
name: '机场',
value: [Number(lng), Number(lat), '01'], //对应的坐标点
}
newOption.series[0].data.push(dataObj);
newOption.series[0].symbol = imgurl
this.mapBox.setOption(newOption, true);
不同的图标需要不同数组进行操作 option.series[0]的data里面,如果想清空对应的图标清空对应的数组里面的数据即可,好处之一就是数据是自己的可以私有化部署,缺点就是地图数据可能每过一段时间需要进行更新。