欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > maptalks矩形绘制结束后,获取最大经度最大纬度,最小经度最小纬度,从左上角开始依次获取并展示坐标

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

2025/4/19 18:04:14 来源:https://blog.csdn.net/Aa12364567/article/details/147307719  浏览:    关键词: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: [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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词