WebGIS开发智慧校园（16）地图覆盖物-矢量图形

往期内容：
WebGIS开发智慧校园（1）GIS开发的基本概念
WebGIS开发智慧校园（2）WebGIS开发平台介绍
WebGIS开发智慧校园（3）开发环境搭建
WebGIS开发智慧校园（4）Web开发HTML
WebGIS开发智慧校园（5）Web开发CSS
WebGIS开发智慧校园（6）JavaScript
WebGIS开发智慧校园（7）开发准备
WebGIS开发智慧校园（8）地图控件
WebGIS开发智慧校园（9）点标记和几何计算
WebGIS开发智慧校园（10）GeoJSON
WebGIS开发智慧校园（11）测试高德API
WebGIS开发智慧校园（12）测试高德API地图参数
WebGIS开发智慧校园（13）地图的组成和操作
WebGIS开发智慧校园（14）地图控件的添加
WebGIS开发智慧校园（15）地图点击事件的引入和点标记

+文末↓小助手，备注【智慧校园】无偿获取 【完整版视频+笔记源码】

1. 折线 polyline

通过构建经纬度点数组，添加图层来绘制折线：

代码如下：这里需要考虑的是，如何动态的⽣成折线数组，能否实现点击⼀下就添加⼀段？

// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象 var path = [newAMap.LngLat(116.368904,39.913423),newAMap.LngLat(116.382122,39.901176),newAMap.LngLat(116.387271,39.912501),newAMap.LngLat(116.398258,39.904600)];// 创建折线实例varpolyline=newAMap.Polyline({path:path,borderWeight:2,// 线条宽度，默认为 1 strokeColor: 'red', // 线条颜⾊lineJoin:'round'// 折线拐点连接处样式});// 将折线添加⾄地图实例map.add(polyline);

2. 多边形polygon

和折线的引⼊形式类似，可以添加多边形。

相应的代码如下：

// 多边形轮廓线的节点坐标数组varpath=[newAMap.LngLat(116.368904,39.913423),newAMap.LngLat(116.382122,39.901176),newAMap.LngLat(116.387271,39.912501),newAMap.LngLat(116.398258,39.904600)];varpolygon=newAMap.Polygon({path:path,fillColor:'#fff',// 多边形填充颜⾊borderWeight:2,// 线条宽度，默认为 1strokeColor:'red',// 线条颜⾊});map.add(polygon);

3. 圆形circle

圆形只需要指定圆⼼坐标和半径即可

varcircle=newAMap.Circle({center:newAMap.LngLat(116.39,39.9),// 圆⼼位置radius:1000,// 圆半径fillColor:'red',// 圆形填充颜⾊strokeColor:'#fff',// 描边颜⾊strokeWeight:2,// 描边宽度});map.add(circle);

这里有⼀个问题，就是经纬度网其实并不见得就是矩形，这⾥涉及到后面要了解的投影变换的概 念。后面要留意。

代码：

varsouthWest=newAMap.LngLat(116.356449,39.859008)varnorthEast=newAMap.LngLat(116.417901,39.893797)varbounds=newAMap.Bounds(southWest,northEast)varrectangle=newAMap.Rectangle({bounds:bounds,strokeColor:'red',strokeWeight:6,strokeOpacity:0.5,strokeDasharray:[30,10],// strokeStyle还⽀持 solidstrokeStyle:'dashed',fillColor:'blue',fillOpacity:0.5,cursor:'pointer',zIndex:50,})map.add(rectangle)

4. 折线的编辑

可以引⼊编辑器插件来实现在线更新折线。

// 引⼊多边形编辑器插件map.plugin(["AMap.PolylineEditor"],function(){// 实例化多边形编辑器，传⼊地图实例和要进⾏编辑的多边形实例polylineEditor=newAMap.PolylineEditor(map,polyline);// 开启编辑模式polylineEditor.open();});

实现效果如下：

通过拖动折线的节点，就可以改变折线的形状了。

+文末↓小助手，备注【智慧校园】无偿获取 【完整版视频+笔记源码】