开发 地图 JS API 2.0 进阶教程 线 折线编辑插件

折线编辑插件 PolyEditor 最后更新时间: 2023年03月23日

PolyEditor 插件提供了对绘制折线进行编辑能力。

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

折线编辑器 PolyEditor

创建方式如下:

1

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});
2

折线的节点坐标数组

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

创建折线实例

var polyline = new AMap.Polyline({
    path: path,  
    borderWeight: 2, // 线条宽度,默认为 1
    strokeColor: 'red', // 线条颜色
    lineJoin: 'round' // 折线拐点连接处样式
});
4

将折线添加至地图实例

map.add(polyline);
5

构造折线编辑对象,并开启折线的编辑状态

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

   // 开启编辑模式
   polylineEditor.open(); 
});    
示例
中心
常见
问题
智能
客服