传单自定义图标LatLng与XY坐标的说明 [英] Explanation of Leaflet Custom Icon LatLng vs XY Coordinates

问题描述

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

Can someone provide an explanation on how to use the Leaflet Marker Icon XY Coordinates listed here: http://leafletjs.com/examples/custom-icons/

lng/lat是否直接映射到x/y?例如，有时在游戏引擎中，Y像素的值会增加，但会向下进入页面. 一样吗我不能完全包住它.

Is lng/lat directly mapped to x/y? For example, sometimes in game engines, the Y pixel increases in value, but goes down the page. Here is it the same? I can't quite wrap my head around it.

推荐答案

不确定" lng/lat是否直接映射到x/y?"是什么意思，但是这里有一些解释应该说够了:

Not exactly sure what you mean by "Is lng/lat directly mapped to x/y?", but here are some explanations that should talk enough:

_{(由 MapQuest 提供)}

_{(tile courtesy MapQuest)}

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

As in most image manipulation software:

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

当指定 iconAnchor 和

When specifying iconAnchor and shadowAnchor for Leaflet custom icons, these directions still apply. Furthermore, like in most image software as well, the origin is the top left corner of your image.

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将假定您的图标提示位于图像的中心，并相应地定位它(与阴影相同).

As explained in the doc, if you specify iconSize but not iconAnchor, Leaflet will assume your icon tip is at the center of your image and position it accordingly (same for shadow).

但是，如果您未同时指定 和iconSize，则Leaflet会将图标图像按原样"放置，即其尖端位于其左上角.然后，您可以应用 className 选项，并在CSS中使用左边缘和上边缘的负值可以重新定位图像.

But if you do not specify both iconSize and iconAnchor, Leaflet will position your icon image "as is", i.e. as if its tip was its top left corner. Then you can apply a className option and define it in CSS with negative left and top margins to re-position your image.

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变换对其进行定位.

This usage might be more interesting when using a DivIcon, for which you may not know the size in advance, and use CSS transforms to position it.

对于 popupAnchor ，它使用图标提示作为原点，因此您很可能会指定一个负的y值，以使弹出窗口显示在图标上方.

As for the popupAnchor, it uses the icon tip as origin, so you will most likely specify a negative y value, so that the popup appears above the icon.

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

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

Finally when adjusting your anchor values, a useful trick is to add a normal default marker at the exact same Lat/Lng location as the marker with your custom icon, so that you can compare both icon tip positions easily.

这篇关于传单自定义图标LatLng与XY坐标的说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！