leaflet - 传单自定义图标 LatLng 与 XY 坐标的说明

Question

有人可以解释一下如何使用此处列出的传单标记图标 XY 坐标: http://leafletjs.com/examples/custom-icons/

lng/lat 是否直接映射到 x/y？例如，有时在游戏引擎中，Y 像素的值会增加，但会向下页面。这里是一样的吗？我无法完全理解它。

Answer 1

不太确定“lng/lat 是否直接映射到 x/y？”是什么意思，但这里有一些应该足以说明问题的解释:

_{(瓷砖礼貌 MapQuest )}

与大多数图像处理软件一样:

• X 从左到右递增
• Y 从上到下递增

指定 iconAnchor 时和 shadowAnchor对于传单自定义图标，这些说明仍然适用。此外，与大多数图像软件一样，原点是图像的左上角。

var myIcon = L.icon({
  iconUrl: 'path/to/image.png', // relative to your script location, or absolute
  iconSize: [25, 41], // [x, y] in pixels
  iconAnchor: [12, 41]
});

如文档中所述，如果您指定 iconSize 但未指定 iconAnchor，Leaflet 将假设您的图标提示位于图像的中心并相应地定位它(相同)对于阴影)。

但是，如果您既没有指定 iconSize 也没有指定 iconAnchor，Leaflet 会“按原样”定位您的图标图像，即就像其尖端一样是它的左上角。然后您可以申请className选项并在 CSS 中定义它，并使用负左边距和上边距来重新定位图像。

var myIcon = L.icon({
  iconUrl: 'path/to/image.png',
  // iconSize: [25, 41],
  // iconAnchor: [12, 41], // [x, y]
  className: 'custom-icon'
});

.custom-icon {
  margin-left: -12px; /* -x */
  margin-top: -41px; /* -y */
}

当使用 DivIcon 时，这种用法可能会更有趣。 ，您可能事先不知道其大小，并使用 CSS 变换来定位它。

至于popupAnchor ，它使用图标提示作为原点，因此您很可能会指定负 y 值，以便弹出窗口出现在图标上方。

popupAnchor: [1, -34] // [x, y]

最后，在调整 anchor 值时，一个有用的技巧是在与带有自定义图标的标记完全相同的纬度/经度位置添加正常的默认标记，以便您可以轻松比较两个图标尖端位置。