马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
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>
|
