maptalks矩形绘制结束后，获取最大经度最大纬度，最小经度最小纬度，从左上角开始依次获取并展示坐标
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: , 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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]