maptalks矩形绘制结束后，获取最大经度最大纬度，最小经度最小纬度，从左上角开始依次获取并展示坐标
重点
// 获取绘制的矩形图形对象
const rectangle = param.geometry;
// 获取矩形外接矩形范围（西南角/东北角坐标）
const extent = rectangle.getExtent();
console.log('西北角(左上)：', extent.xmin, extent.ymax)
console.log('东北角（右上）：', extent.xmax, extent.ymax);
console.log('东南角（右下）：', extent.xmax, extent.ymin)
console.log('西南角（左下）：', extent.xmin, extent.ymin);
全部代码
<!DOCTYPE html>
<html>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>交互 - 绘制工具</title>
<style type='text/css'>
html,
body {
margin: 0px;
height: 100%;
width: 100%;
}
.container {
width: 100%;
height: 100%;
}
</style>
<link rel='stylesheet' href='https://maptalks.com/api/maptalks-gl.css' />
<script type='text/javascript' src='https://maptalks.com/api/maptalks-gl.js'></script>
<body>
<div id="map" class="container"></div>
<script>
const map = new maptalks.Map("map", {
center: [113.049, 51.498568],
zoom: 8,
baseLayer: new maptalks.TileLayer("base", {
urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
subdomains: ["a", "b", "c", "d"],
attribution: "© <a href='http://osm.org'>OpenStreetMap</a> contributors, © <a href='https://carto.com/'>CARTO</a>",
}),
});
const layer = new maptalks.VectorLayer("vector").addTo(map);
const drawTool = new maptalks.DrawTool({
mode: "Point",
})
.addTo(map)
.disable();
drawTool.on("drawend", function (param) {
console.info(param.geometry);
console.log(param.geometry.getCoordinates());
// 获取绘制的矩形图形对象
const rectangle = param.geometry;
// 获取矩形外接矩形范围（西南角/东北角坐标）
const extent = rectangle.getExtent();
console.log('西北角(左上)：', extent.xmin, extent.ymax)
console.log('东北角（右上）：', extent.xmax, extent.ymax);
console.log('东南角（右下）：', extent.xmax, extent.ymin)
console.log('西南角（左下）：', extent.xmin, extent.ymin);
// console.log('西南角：', extent.xmin, extent.ymin);
// console.log('东北角：', extent.xmax, extent.ymax);
// console.log('西北角：', extent.xmin, extent.ymax)
// console.log('东南角：', extent.xmax, extent.ymin)
layer.addGeometry(param.geometry);
});
const items = [
"Point",
"LineString",
"Polygon",
"Circle",
"Ellipse",
"Rectangle",
"FreeHandLineString",
"FreeHandPolygon",
].map(function (value) {
return {
item: value,
click: function () {
drawTool.setMode(value).enable();
},
};
});
const toolbar = new maptalks.control.Toolbar({
items: [{
item: "Shape",
children: items,
},
{
item: "Disable",
click: function () {
drawTool.disable();
},
},
{
item: "Clear",
click: function () {
layer.clear();
},
},
],
}).addTo(map);
</script>
</body>
</html>