上篇讲了点标记能在地图上插上图钉。但实际做项目时光标点肯定不够。外卖骑手从商家到用户中间有条配送路线房产系统里楼盘不是个点而是块占地范围疫情地图上封控区是个封闭区域不是单个坐标。这些都需要在地图上画线、画面、算距离。今天先带着大家入门绘制矢量图形下一篇介绍如何在地图上测算距离。一、折线 Polyline把点连成路线最直观的例子就是导航。从A点到B点不是直接飞过去而是沿着道路走这条路径就是折线。折线本质上是一串坐标点连成的线。给高德API一个坐标数组它自动帮你连起来。代码如下// 折线的节点坐标数组每个元素为 AMap.LngLat 对象 var path [ new AMap.LngLat(116.368904,39.913423), new AMap.LngLat(116.382122,39.901176), new AMap.LngLat(116.387271,39.912501), new AMap.LngLat(116.398258,39.904600) ]; // 创建折线实例 var polyline new AMap.Polyline({ path: path, borderWeight: 2, // 线条宽度默认为 1 strokeColor: red, // 线条颜色 lineJoin: round // 折线拐点连接处样式 }); // 将折线添加至地图实例 map.add(polyline);二、多边形 Polygon圈出一块地折线不闭合多边形是闭合的。用途很明显画范围、圈地块。房产系统里看楼盘不是看个坐标点而是看这块地占多大面积。疫情地图里的中高风险区也是个封闭的多边形区域。代码和折线几乎一样就是换了个类名// 多边形轮廓线的节点坐标数组 var path [ new AMap.LngLat(116.368904,39.913423), new AMap.LngLat(116.382122,39.901176), new AMap.LngLat(116.387271,39.912501), new AMap.LngLat(116.398258,39.904600) ]; var polygon new AMap.Polygon({ path: path, fillColor: #fff, // 多边形填充颜色 borderWeight: 2, // 线条宽度默认为 1 strokeColor: red // 线条颜色 }); map.add(polygon);三、圆形 Circle画个覆盖范围圆形最直观的用途是服务范围。比如外卖店配送3公里充电桩周围500米可用这些都是圆形。只需要圆心和半径高德自动画圆var circle new AMap.Circle({ center: new AMap.LngLat(116.39,39.9), // 圆心位置 radius: 1000, // 圆半径 fillColor: red, // 圆形填充颜色 strokeColor: #fff, // 描边颜色 strokeWeight: 2 // 描边宽度 }); map.add(circle);四、矩形 Rectangle框选一块区域矩形用得相对少主要是规则区域的框选。比如地图截图、批量查询某个矩形范围内的POI。矩形需要指定对角两个点西南角和东北角var southWest new AMap.LngLat(116.356449, 39.859008) var northEast new AMap.LngLat(116.417901, 39.893797) var bounds new AMap.Bounds(southWest, northEast) var rectangle new AMap.Rectangle({ bounds: bounds, strokeColor:red, strokeWeight: 6, strokeOpacity:0.5, strokeDasharray: [30,10], // strokeStyle还支持 solid strokeStyle: dashed, fillColor:blue, fillOpacity:0.5, cursor:pointer, zIndex:50, }) map.add(rectangle)这里有个细节经纬度网格其实不是严格的矩形因为地球是圆的。这涉及到后面要讲的投影变换先留个印象。五、折线编辑让用户自己改路线但实际项目中画好的路线不一定准现场可能发现路走不通需要微调。这时候就需要编辑器。引入编辑器插件开启编辑模式用户可以直接拖动节点改形状代码如下// 引入多边形编辑器插件 map.plugin([AMap.PolylineEditor],function(){ // 实例化多边形编辑器传入地图实例和要进行编辑的多边形实例 polylineEditor new AMap.PolylineEditor(map, polyline); // 开启编辑模式 polylineEditor.open(); });这些图形操作是GIS开发的基础后面做几何计算、数据持久化都要基于它们。大家可以先自己上手尝试看看。