传单自定义图标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,单张将使你的图标形象"为是",即仿佛其末端是其左上角.然后,您可以应用一个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 */
}

使用a时DivIcon,这种用法可能会更有趣,您可能事先不知道它的大小,并使用CSS变换来定位它.

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

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

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