官方绘制案例：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>