p.s.网上高德结合echarts资源太少了,一整还得交学费下载-。-,本着前人栽树后人乘凉的高尚品德,把我实现的免费版放出来,希望我的这篇文章可以满足广大伸手党(我也是)复制即用的心态,毕竟这也不涉及啥高深原理,满足工作所需就足够了。
效果图
步骤
- 首先你得有高德api的key 传送门:lbs.amap.com/api/android…
- 现在vue里引入高德地图 这里我要絮叨几句,网上引入高德有很多方法,有npm下vue-amap包的还有别的,我觉得挺费劲的还得去main.js里面配置,我用的直接在
index.html
里面引入script脚本的方式(方便复制粘贴)。<script src="//webapi.amap.com/maps?v=1.4.15&key=这里面填你申请的key&plugin=AMap.CustomLayer"></script>
使用方法:复制上面这段script
标签,双击这里面填你申请的key
选中删除,换成你自己申请的key。然后将标签粘贴到你vue项目中public文件夹下有个index.html
中第九行(如果你没有引入其他东西的话)
main.js
中引入
import echarts from 'echarts'
,同时全局注册一下
Vue.prototype.$echarts = echarts;
完成以上几步你以为就完事了嘛?不不不这只是开始(狗头)
重点:npm i echarts-extension-amap
然后在main.js
中引入一下import 'echarts-extension-amap'
下载这个包 不要相信网上什么echarts-amap
或者amap-echarts
或者什么要你花钱买amap.js
这个文件的,都是骗子!骗子!老子画这么多年页面都是白嫖,竟然想让老子花钱?门都没有。
完成以上上面的步骤实际上就成功了一半了,接下来开始封装组件吧。
<template>
<div id="111" style="width:100%;height:100%"></div>
</template>
<script>
export default {
props: {
//这个是地图中心点的坐标哈 写props里方便改,写data里也行。不用非得跟我一样。
center: {
type: Array,
default: () => {
return [113.74947682142859, 22.835607857142858];
}
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
const option = {
//amap地图配置
amap: {
center: this.center,
resizeEnable: true,
mapStyle: "amap://styles/whitesmoke",//地图样式白色
rotation: 10,
zoom: 10,//缩放
viewMode: "3D",//是否启用3d地图
pitch: 35, //视角高度
skyColor: "#33216a"
},
animation: true,
series: [
//散点图层
{
type: "scatter",
zlevel: 2,
// 使用高德地图坐标系
coordinateSystem: "amap",
// 数据格式跟在 geo 坐标系上一样,每一项都是 [经度,纬度,数值大小,其它维度...]
data:[] , //数据格式[y,x,name]
symbolSize: 5, //小点的大小
encode: {
//维度
value: 2
},
label: {
normal: {
formatter: "{@[2]}", //title提示的文字@后为索引
position: "right", //显示位置
show: false
},
emphasis: {
//重点显示
show: true
}
},
itemStyle: {
normal: {
color: "#00c1de" //颜色
}
}
},
//攻击线图层
{
type: "lines",
zlevel: 1,
coordinateSystem: "amap",
effect: {
show: true,
constantSpeed: 30,
symbol: "pin",
symbolSize: 5,
trailLength: 0
},
label: {
normal: {
formatter: function(params) {
let data = params.data;
return `从${data.fromName}到${data.endName}`;
},
position: "right", //显示位置
show: false
},
emphasis: {
//重点显示
show: true
}
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
}
},
data: //数据格式[
{
fromName: "111",
endName: "222",
coords: [
[坐标, 坐标, 名称],
[坐标, 坐标, 名称]
]
},
},
//攻击线图层2
{
type: "lines",
zlevel: 1,
coordinateSystem: "amap",
effect: {
show: true,
constantSpeed: 30,
symbol: "pin",
symbolSize: 5,
trailLength: 0
},
label: {
normal: {
formatter: function(params) {
let data = params.data;
return `从${data.fromName}到${data.endName}`;
},
position: "right", //显示位置
show: false
},
emphasis: {
//重点显示
show: true
}
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
}
},
data: //和攻击线图层1的数据格式一样
}
]
};
var chart = this.$echarts.init(document.getElementById('111'));
chart.setOption(option);
// get amap instance
var amap = chart
.getModel()
.getComponent("amap")
.getAMap();
// operations below are the same as amap
// amap.addControl(new AMap.Scale());
// amap.addControl(new AMap.ToolBar());
// add layers
// var satelliteLayer = new AMap.TileLayer.Satellite();//卫星图层
// var roadNetLayer = new AMap.TileLayer.RoadNet();//道路图层
// amap.add([satelliteLayer, roadNetLayer]);
}
}
};
</script>
复制代码
每一个图层的数据自己模拟一下,格式都写在注释里了。你要是复制粘贴跑不起来报错了也可以评论问我一下。
来源:oschina
链接:https://my.oschina.net/u/4346209/blog/3304773