高德地图提供了很多API来满足我们在其地图上画不同的图形,比如描绘出一段公交的路线,或确定一个建筑的位置等。
下面我以工作中的例子,描绘在高德地图上如何画出一条飞行轨迹。
高德提供了JS的API,需要先引入,后面的key需要你去高德的开发平台去申请
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=你的key"></script>
在html中定义一个div,来展示地图
<div id="container" style="text-align:center; margin: 0 auto; margin-top:25px;"></div>
下面就可以开始画图了,首先我要调用接口获取所有的飞行点坐标,一个轨迹就是通过一个个点来显示的
var data = postRequest(); //获取地图的中心点坐标 var centerlat = (data.dep.lat + data.arr.lat)/2 var centerlon = (data.dep.lon + data.arr.lon)/2 var centerArr = [centerlat, centerlon]; var map = new AMap.Map('container', { resizeEnable: true, center: centerArr, zoom: 5 });
定义一个地图对象map,其中心点通过起/始点经纬度来计算,zoom为地图显示的缩放级别,resizeEnable:true,表示可以调整地图大小
好了就可以在地图上画线段了,获取点集合,格式为:[[40.0618,116.5991],[40.0552,116.6002],[40.0485,116.6013]],下面也设置了线条的一些样式。
strokeDasharray为勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为dashed 时有效, 此属性在ie9+浏览器有效,用法:
[10,5] 表示10个像素的实线和5个像素的空白(如此反复)组成的虚线
var lineArr1 = data.pointList1; var polyline = new AMap.Polyline({ path: lineArr1, //设置线覆盖物路径 strokeColor: "#3366FF", //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 2, //线宽 strokeStyle: "solid", //线样式 }); polyline.setMap(map); var lineArr2 = data.pointList2; var planPolyline = new AMap.Polyline({ path: lineArr2, //设置线覆盖物路径 strokeColor: "#3366FF", //线颜色 strokeOpacity: 0.7, //线透明度 strokeWeight: 2, //线宽 strokeStyle: "dashed", //线样式 strokeDasharray: [10, 5] //补充线样式 }); planPolyline.setMap(map);
另外还需要画一个飞行物,更好的展示视觉效果,飞行物即一个点坐标,但这个坐标我用一张图片来表示
//添加飞行物图标 var icon = new AMap.Icon({ size: new AMap.Size(54, 52), //图标大小 image: "images/MapPlane.png" }); var marker = new AMap.Marker({ map: map, angle: nowPlanePos.course, position: [nowPlanePos.lng,nowPlanePos.lat], offset: new AMap.Pixel(-27, -52), icon: icon });
使用marker方法来描绘一个点,angle表示点标记的旋转角度,即飞行物的朝向,offset函数一定要加上,因为你如果缩放地图后,那么这个飞行物可能在地图上呈现的位置会相差很大,
可以看看没有设置offset和设置了offset的差别,前两幅是设置了offset,后两幅是没有
可以看到,地缩放比例飞行物的位置相差很多,但实质,坐标的位置都是一样的,飞行物并没有根据地图来改变自己的偏移量
offset的用法:点标记显示位置偏移量,默认值为Pixel(-10,-34)。Marker指定position后,默认以marker左上角位置为基准点,对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量。
以上我的图片宽度是52,只需要设置横线偏移量为宽度一半,向左则为-27。
注意:我的飞行物是不断的移动的,所以我需要实时的请求接口获取最新的点坐标,所以每次需要重新再map上画图,但在画图前,先要清除原来的图标对象,所以delete方法删除即可
比如在画飞行物时,使用:
if(marker != null) { marker.setMap(null); delete marker; }
另外map对象是不需要重画的,map初始化一次即可。
参考: