console
var mapCenter = [39.96872078553816, 116.24899548232133];
var map = [["left:115.048828:top:41.137296:right:117.641602:bottom:39.198205"], ["left:120.852356:top:31.543431:right:122.005920:bottom:30.661541"], ["left:113.697510:top:22.872379:right:114.488525:bottom:22.520169"]];
<!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,geometry&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 80%;
}
#toolControl {
position: absolute;
top: 10px;
left: 0px;
right: 0px;
margin: auto;
width: 252px;
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;
}
#marker {
background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
}
#polyline {
background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
}
#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');
}
#rectangle {
background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
}
#ellipse {
background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
}
</style>
<body onload="initMap()">
<div id="container"></div>
<div id="toolControl">
<div class="toolItem active" id="marker" title="点标记"></div>
<div class="toolItem" id="polyline" title="折线"></div>
<div class="toolItem" id="polygon" title="多边形"></div>
<div class="toolItem" id="circle" title="圆形"></div>
<div class="toolItem" id="rectangle" title="矩形"></div>
<div class="toolItem" id="ellipse" title="椭圆"></div>
</div>
<div>
绘制:鼠标左键点击及移动即可绘制图形<br />
结束绘制:鼠标左键双击即可结束绘制折线、多边形、多边形会自动闭合;圆形、椭圆单击即可结束<br />
中断:绘制过程中按下esc键可中断该过程
</div>
<script type="text/javascript">
var map;
var editor;
var activeType = 'marker';
document.getElementById('toolControl').addEventListener('click', (e) => {
var id = e.target.id;
if (id !== 'toolControl') {
document.getElementById(activeType).className = 'toolItem';
document.getElementById(id).className = 'toolItem active';
activeType = id;
editor.setActiveOverlay(id);
}
});
var tencent = new TMap.LatLng(40.040452, 116.273486);
var oldSummerPalace = new TMap.LatLng(40.006540, 116.303695);
function initMap() {
map = new TMap.Map('container', {
zoom: 18,
center: new TMap.LatLng(28.228274,112.875898),
});
var path = [tencent, oldSummerPalace];
editor = new TMap.tools.GeometryEditor({
map: map,
overlayList: [
{
overlay: new TMap.MultiMarker({
map: map,
}),
id: 'marker',
},
{
overlay: new TMap.MultiPolyline({
map: map,
}),
id: 'polyline',
},
{
overlay: new TMap.MultiPolygon({
map: map,
}),
id: 'polygon',
},
{
overlay: new TMap.MultiCircle({
map: map,
}),
id: 'circle',
},
{
overlay: new TMap.MultiRectangle({
map: map,
}),
id: 'rectangle',
},
{
overlay: new TMap.MultiEllipse({
map: map,
}),
id: 'ellipse',
},
],
actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW,
activeOverlayId: 'marker',
snappable: true,
});
editor.on('draw_complete', (geometry) => {
console.log('11', geometry.paths)
});
}
</script>
</body>
</html>