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

问题描述

有人可以解释如何使用此处列出的传单标记图标 XY 坐标: _{(图块礼貌}

var myIcon = L.icon({iconUrl: 'path/to/image.png',//相对于您的脚本位置，或绝对iconSize: [25, 41],//[x, y] 以像素为单位图标锚:[12, 41]});

如文档中所述，如果您指定 iconSize 而不是 iconAnchor，Leaflet 将假定您的图标提示位于图像的中心并相应地定位它(相同阴影).

但是，如果您不指定 既不 iconSize 也不 iconAnchor，Leaflet 将按原样"定位您的图标图像，即好像它的小费是它的左上角.然后你可以应用

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

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

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

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.

解决方案

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

_{(tile courtesy MapQuest)}

As in most image manipulation software:

• X increases from left to right
• Y increases from top to bottom

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]
});

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).

But if you do specify neither iconSize nor 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 */
}

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.

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屋！