WebGIS开发【智慧校园】实战案例：16. 地图覆盖物-矢量图形

1. 折线 polyline

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

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

// 折线的节点坐标数组，每个元素为 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); 

 

2. 多边形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); 

 

3. 圆形circle

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

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

map.add(circle); 

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

代码： 

 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) 

4. 折线的编辑

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

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

实现效果如下： 

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