官方繪製案例：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>