当前位置：首页 > news >正文

maptalks矩形绘制结束后，获取最大经度最大纬度，最小经度最小纬度，从左上角开始依次获取并展示坐标

news 来源：原创 2025/5/11 2:56:06

重点

 // 获取绘制的矩形图形对象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: "&copy; <a href='http://osm.org'>OpenStreetMap</a> contributors, &copy; <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>