Leaflet

Question

黄色是图像，青色是坐标，红色是两者的中心。坐标是这样的，因为那是地图中允许的区域。

我得到了坐标，它们的实际中心不是坐标的中点。这意味着每一边都离中心有点不稳。

我从坐标中知道确切的中心，是否可以将该中心锚定到图像的中间，它是这些坐标的实际中心。把它拍在那里真是太棒了。

或者我可以以某种方式向每个方向添加一个边距，这样我就可以像插图中那样制作它。

我曾尝试自己调整坐标以使其适合图像，但感觉不可能使其正确，图像要么不稳定，要么我添加的标记在我得到一个时就偏离了正确的位置右边的边缘。

编辑：我在这里使用 CRS.Simple。

Answer 1

最好的解决方案是使用 turf 库

const map = L.map('mapid').setView([52.308478623663355, 19.281005859375004], 5);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


const test = [
  [15.3369140625, 49.55372551347579],
  [23.97216796875, 49.55372551347579],
  [23.97216796875, 54.316523240258256],
  [15.3369140625, 54.316523240258256],
  [15.3369140625, 49.55372551347579]
];

const polygon = turf.polygon([test]);
const centroid = turf.centroid(polygon);

const featCollection = {
  features: [polygon, centroid]
}

const polu = L.geoJSON(featCollection).addTo(map);
map.fitBounds(poly.getBounds());

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  min-height: 100%;
}

#mapid {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

<div id="mapid"></div>

Answer 2

如果没有必要，我不建议使用 turf。

您可以使用 Leaflet 内置的 getCenter() 功能。

getCenter() 适用于折线、多边形和矩形。

getCenter(): Returns the center (centroid) of the polyline / polygon / rectangle.

Answer 3

解决方法是在 imageOverlay 上制作校准点，从这些点获取坐标，将它们作为标记添加到传单中，然后再次摆弄，但使用这些校准点我在不到一个小时的时间内将它们居中。仍然不完美，但我想我很满意。

Leaflet - 是否可以将坐标与图像中的设定点居中

Leaflet - Could it be possible to center the coordinates with a set point in the image