WebGIS第七课：地图覆盖物-矢量图形

# 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);

# 4 矩形 rectangle

矩形需要指定左下角和右上角，即西南角和东北角的坐标。

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

代码：

    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)

# 5 折线的编辑

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

    // 引入多边形编辑器插件
map.plugin(["AMap.PolylineEditor"],function(){
   // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
   polylineEditor = new AMap.PolylineEditor(map, polyline); 

   // 开启编辑模式
   polylineEditor.open(); 
});

实现效果如下：

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