geometry 相关问题

我正在尝试使用 Leaf.js 和（按照 ChatGPT 的建议）Turf 构建一些东西。我有一张地图，并在上面绘制了 GeoJSON 多边形： ...</desc> <question vote="2"> 我正在尝试使用 Leaf.js 和（按照 ChatGPT 的建议）Turf 构建一些东西。 我有一张地图，并在上面绘制了 GeoJSON 多边形： <pre><code><script type="application/javascript"> var initialGeoJSON = <?=$mapregion->geojson?>; var map; let mapboxToken = '<?=MAPBOX_TOKEN?>'; let pathWidth = 39; $(document).ready(function () { // Initialize the map with satellite view as the default map = L.map('map').setView([40.9479, -87.1856], 15); // Create a satellite tile layer using Mapbox Satellite L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { maxZoom: 19, id: 'mapbox/satellite-streets-v12', // Mapbox Satellite tile layer accessToken: mapboxToken, // Use the global variable for Mapbox access token }).addTo(map); var initialPoly = L.geoJSON(initialGeoJSON, { editable: true, }); initialPoly.addTo(map); centerMapToPolygon(initialPoly); function centerMapToPolygon(polygonLayer) { var bounds = polygonLayer.getBounds(); var centerLatLng = bounds.getCenter(); map.setView(centerLatLng, 13); } }); </script> </code></pre> 这工作正常。 <a href="https://i.stack.imgur.com/3MbvW.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzNNYnZXLnBuZw==" alt=""/></a> 然而，我真的陷入了困境，很可能是由于我自己缺乏中级代数以外的数学技能，并且由于我的日常工作和睡眠不足而不知所措，我似乎不知道如何做到这一点下一部分。 因为我知道路径 (<pre><code>pathWidth</code></pre>) 并且知道多边形的形状，所以我认为在多边形上绘制这些路径线应该相对简单。 将其视为该田地中可能存在的一排农作物的简单描绘。 我已经尝试了一些不同的事情，而且，可能是因为我已经精疲力尽和不知所措，我什至无法让任何东西工作，即使是远程接近。 由于多边形永远不会是完美的矩形，甚至不会像这样定向，因此这个问题变得更具挑战性，并且需要动态处理形状。 示例： <a href="https://i.stack.imgur.com/gErsv.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2dFcnN2LnBuZw==" alt=""/></a> 我的一个想法是，忽略最后一段，我可以以某种方式在多边形上放置一个具有已知间距（<pre><code>pathWidth</code></pre>）的网格，然后只保留重叠的位。然而，我对此一无所获。 我即将完全放弃这个想法，所以我为取得任何进展而进行的最后努力将交给你们这些可爱的、聪明的人类。 请赐教。 更新！ 这比简单的操作更复杂，但我正在取得进展！完成后我会分享解决方案。 <a href="https://i.stack.imgur.com/Cx52T.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0N4NTJULmpwZw==" alt=""/></a> 更新2：我已经取得了一些相当好的进展，但我对我的代码不是很满意。在我得到一些东西之前，这一切都是大量的黑客攻击和砍伐，我需要回去把它清理干净。 <pre><code><script type="application/javascript"> var initialGeoJSON = <?=$mapregion->geojson?>; var map; let envelope; let mapboxToken = '<?=MAPBOX_TOKEN?>'; let pathWidth = 39; $(document).ready(function () { // Initialize the map with satellite view as the default map = L.map('map').setView([40.9479, -87.1856], 15); // Create a satellite tile layer using Mapbox Satellite L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { maxZoom: 19, id: 'mapbox/satellite-streets-v12', // Mapbox Satellite tile layer accessToken: mapboxToken, // Use the global variable for Mapbox access token }).addTo(map); var initialPoly = L.geoJSON(initialGeoJSON, { editable: true, }); initialPoly.addTo(map); var longestEdge = null; var coordinates = initialGeoJSON.geometry.coordinates[0]; envelope = turf.envelope(initialGeoJSON); coordinates = envelope.geometry.coordinates[0]; for (var i = 0; i < coordinates.length - 1; i++) { var pair = [ coordinates[i], coordinates[i + 1] ]; var lengthAndHeading = calculateEdgeLengthAndHeading(pair); if (longestEdge != null) { if (longestEdge.distance < lengthAndHeading.distance) { longestEdge = lengthAndHeading; } } else { longestEdge = lengthAndHeading; } } // Plot the parallel line on the map var latLngs = longestEdge.coordinates.map(function (coord) { return [coord[1], coord[0]]; }); var polyline = L.polyline(latLngs, {color: 'yellow'}).addTo(map); var heading = longestEdge.headings; // Calculate perpendicular angle to longest edge's heading var perpendicularAngle = (heading + 90) % 360; var thisLine = longestEdge; var parallelLine = null; var offsetDistance = pathWidth / 2; var linesPlotted = 0; var colors = ['gray', 'white']; var keepGoing = true; do { // Calculate distance to offset parallel line from longest edge if (linesPlotted >= 1) { offsetDistance = pathWidth; } if (thisLine.coordinates == undefined && thisLine.geometry != undefined) { thisLine.coordinates = thisLine.geometry.coordinates; } var startPoint = thisLine.coordinates[0]; var endPoint = thisLine.coordinates[1]; var startParallel = turf.destination(turf.point(startPoint), offsetDistance, perpendicularAngle, {units: 'feet'}).geometry.coordinates; var endParallel = turf.destination(turf.point(endPoint), offsetDistance, perpendicularAngle, {units: 'feet'}).geometry.coordinates; parallelLine = turf.lineString([startParallel, endParallel]); var intersected = turf.lineIntersect(parallelLine, initialGeoJSON.geometry); var color = colors.shift(); colors.push(color); if (linesPlotted % 10 == 0) color = 'black'; if (intersected.features.length >= 2) { for (var i = 0; i < intersected.features.length; i += 2) { var intersectionStart = intersected.features[i].geometry.coordinates; var intersectionEnd = intersected.features[i + 1].geometry.coordinates; var line = turf.lineString([intersectionStart, intersectionEnd]); var latLngs = line.geometry.coordinates.map(function (coord) { return [coord[1], coord[0]]; }); var polyline = L.polyline(latLngs, {color: color}).addTo(map); } linesPlotted++; } else if (intersected.features.length == 1) { var latLngs = parallelLine.geometry.coordinates.map(function (coord) { return [coord[1], coord[0]]; }); var polyline = L.polyline(latLngs, {color: color}).addTo(map); linesPlotted++; } else if (linesPlotted == 0) { heading = (heading + 180) % 360; perpendicularAngle = (heading + 90) % 360; } else { keepGoing = false; break; } if (linesPlotted > 0) { thisLine = parallelLine; } } while (keepGoing); function calculateEdgeLengthAndHeading(coordinates) { var edgeLengths = []; var edgeHeadings = []; for (var i = 0; i < coordinates.length - 1; i++) { var startPoint = coordinates[i]; var endPoint = coordinates[i + 1]; var distance = turf.distance(turf.point(startPoint), turf.point(endPoint), { units: 'feet' }); var bearing = turf.bearing(turf.point(startPoint), turf.point(endPoint)); edgeLengths.push(distance); edgeHeadings.push(bearing); } if (edgeLengths.length == 1) edgeLengths = edgeLengths.pop(); if (edgeHeadings.length == 1) edgeHeadings = edgeHeadings.pop(); return { distance: edgeLengths, headings: edgeHeadings, coordinates: coordinates }; } centerMapToPolygon(initialPoly); function centerMapToPolygon(polygonLayer) { var bounds = polygonLayer.getBounds(); var centerLatLng = bounds.getCenter(); map.setView(centerLatLng, 13); } function calculateHeading(startPoint, endPoint) { // Calculate the heading between two points var deltaX = endPoint[0] - startPoint[0]; var deltaY = endPoint[1] - startPoint[1]; var angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI); var heading = (angle + 360) % 360; return heading; } function findLongestEdge(coordinates) { var longestEdge = null; var longestEdgeLength = 0; for (var i = 0; i < coordinates.length - 1; i++) { var startPoint = coordinates[i]; var endPoint = coordinates[i + 1]; var edge = turf.lineString([startPoint, endPoint]); var edgeLength = turf.length(edge, { units: 'feet' }); if (edgeLength > longestEdgeLength) { longestEdgeLength = edgeLength; longestEdge = edge; } } return longestEdge; } }); </script> </code></pre> 这是其中的一些示例图像： <a href="https://i.stack.imgur.com/Ne1eT.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL05lMWVULmpwZw==" alt=""/></a> 字段 #1 - 按预期工作 <a href="https://i.stack.imgur.com/bS1wJ.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2JTMXdKLmpwZw==" alt=""/></a> 提交 #2 - 没有按预期工作。多边形的南边有 3 个切口，只有 1 个得到遵守。 <a href="https://i.stack.imgur.com/6yqLc.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZ5cUxjLmpwZw==" alt=""/></a> 领域 #4 - 作品 <a href="https://i.stack.imgur.com/s6PHr.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3M2UEhyLmpwZw==" alt=""/></a> 领域 #5 - 作品 <a href="https://i.stack.imgur.com/pn5Q1.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3BuNVExLmpwZw==" alt=""/></a> 领域 #6 - 作品 <a href="https://i.stack.imgur.com/09FMl.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzA5Rk1sLmpwZw==" alt=""/></a> 领域 #7 - 作品 <a href="https://i.stack.imgur.com/RJgRv.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1JKZ1J2LmpwZw==" alt=""/></a> 领域 #8 - 作品 <a href="https://i.stack.imgur.com/TGC1u.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1RHQzF1LmpwZw==" alt=""/></a> 领域 #9 - 作品 <a href="https://i.stack.imgur.com/Gg5jR.jpg" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0dnNWpSLmpwZw==" alt=""/></a> 领域 #10 - 作品 似乎只有在多边形中有不止一个切口的字段才会受到影响，我现在可能可以处理这个问题。 但是如果有人对我在这里缺少的东西有任何想法，我会非常高兴听到他们的声音！ </question> <answer tick="false" vote="-1"> 根据我的经验，岬角田界记录可能会产生很多噪音，因此使用记录的数据来获取所有段，将它们模数为 [0,90) 度，并制作总路径长度的直方图可能会更好。 5 度或 10 度箱。看起来这可以产生一组选项，供操作员在前三个角度之间进行选择。 </answer> </body></html>

javascript leaflet geometry turfjs

回答 0 投票 0

将坐标重新格式化为 GeoJSON 格式

我正在尝试将一些多边形坐标数据重新格式化为 QuPath 可用的 GeoJSON 格式。我觉得我已经完成了 90%，但我仍在努力处理多边形中的孔，因为......

python geometry geojson

回答 1 投票 0

如何从绕其中心旋转一个 svg 元素“转换”为绕其中一个中心旋转 2 个或多个元素？

我正在构建 SVG 画布程序来制作形状并编辑它们。我需要能够使用 x、y、宽度、高度属性显示，并且我需要能够使用变换旋转 o...

css svg matrix geometry transform

回答 1 投票 0

Python - 如何对 2D 形状重新采样？

我正在编写一个Python脚本，用于一些几何数据操作（计算多驱动工业机器的运动轨迹）。一般来说，这个想法是有一个给定的形状（让我们......