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

Question

有人可以提供有关如何使用此处列出的传单标记图标XY坐标的说明： http://leafletjs.com/examples/custom-icons/

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

Answer 1

不完全确定你的意思＆＃34; lng / lat是否直接映射到x / y？＆＃34;，但这里有一些应该充分说明的解释：

_{（平铺由MapQuest提供）}

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

• X从左向右增加
• Y从上到下增加

为Leaflet自定义图标指定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会将你的图标图像定位为＃34;就像＃34;一样，就像它的提示一样是它的左上角。然后，您可以应用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]

最后，在调整锚点值时，一个有用的技巧是在与自定义图标的标记完全相同的Lat / Lng位置添加普通默认标记，以便您可以轻松比较两个图标提示位置。