官方绘制案例：https://lbs.qq.com/webDemoCenter/glAPI/glEditor/toolDraw
官方编辑案例：https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsCover
整合绘制和编辑代码如下：
记得把代码里的key改成自己的！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>编辑几何图形</title> </head> <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=改成自己的key"></script> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #map-container { width: 100%; height: 80%; position: relative; } #toolControl { position: absolute; top: 10px; left: 0px; right: 0px; margin: auto; width: 126px; z-index: 1001; } .toolItem { width: 30px; height: 30px; float: left; margin: 1px; padding: 4px; border-radius: 3px; background-size: 30px 30px; background-position: 4px 4px; background-repeat: no-repeat; box-shadow: 0 1px 2px 0 #E4E7EF; background-color: #ffffff; border: 1px solid #ffffff; } .toolItem:hover { border-color: #789CFF; } .active { border-color: #D5DFF2; background-color: #D5DFF2; } #polygon { background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png'); } #circle { background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png'); } #delete { background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/delete.png'); } </style> <body onload="initMap()"> <div id="map-container"></div> <div id="toolControl"> <div class="toolItem" id="polygon" title="多边形" onclick="drawShape('polygon');"></div> <div class="toolItem" id="circle" title="圆形" onclick="drawShape('circle');"></div> <div class=" toolItem" id="delete" onclick="editor.delete();" title="删除"></div> </div> <div> 单选：鼠标左键点击图形<br /> 多选：按下ctrl键后点击多个图形<br /> 删除：选中图形后按下delete键或点击删除按钮可删除图形<br /> 编辑：选中图形后出现编辑点，拖动编辑点可移动顶点位置，双击实心编辑点可删除顶点<br /> 拆分：选中单个多边形后可绘制拆分线，拆分线绘制完成后自动进行拆分<br /> 合并：选中多个相邻多边形后可进行合并，飞地形式的多边形不支持合并<br /> 中断：按下esc键可中断当前操作，点选的图形将取消选中，编辑过程将中断 </div> <script type="text/javascript"> var map, editor, shape; function drawShape(e) { console.log("drawPolygon!!: ", e) shape = e document.getElementById(shape).className = "toolItem active"; editor.setActiveOverlay(shape) editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW); }; function initMap() { // 初始化地图 map = new TMap.Map("map-container", { zoom: 17, // 设置地图缩放级别 center: new TMap.LatLng(40.04019000341765, 116.27446815226199) // 设置地图中心点坐标 }); // 初始化几何图形及编辑器 editor = new TMap.tools.GeometryEditor({ map, // 编辑器绑定的地图对象 overlayList: [ // 可编辑图层 { overlay: new TMap.MultiPolygon({ map, styles: { highlight: new TMap.PolygonStyle({ color: 'rgba(255, 255, 0, 0.6)' }), highlight2: new TMap.PolygonStyle({ color: 'rgba(255, 0, 0, 0.6)' }) } }), id: 'polygon', selectedStyleId: 'highlight' }, { overlay: new TMap.MultiCircle({ map, styles: { highlight2: new TMap.CircleStyle({ color: 'rgba(255, 0, 0, 0.6)' }) } }), id: 'circle', selectedStyleId: 'highlight2' } ], actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式 activeOverlayId: 'polygon', // 激活图层 selectable: true, // 开启点选功能 snappable: true // 开启吸附 }); // 监听删除、修改、拆分、合并完成事件 let evtList = ['delete', 'adjust']; evtList.forEach(evtName => { editor.on(evtName + '_complete', evtResult => { console.log(evtName, evtResult); }); }); // 监听绘制结束事件，获取绘制几何图形 editor.on('draw_complete', (geometry) => { document.getElementById(shape).className = "toolItem"; editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT); }); } </script> </body> </html>
