Leaflet 自定义修改Marker点标记样式

2022年7月6日 238次阅读 来源: ddxshf

点标记基本用法使用示例：

L.marker([50.5, 30.5]).addTo(map);

默认样式如图
《Leaflet 自定义修改Marker点标记样式》
实际项目中需要修改点标记的样式，如果仅仅需要更换图标，则可以使用Icon，使用示例如下：

var myIcon = L.icon({ 
	iconUrl: 'my‐icon.png',
	iconSize: [38, 95],
	iconAnchor: [22, 94],
	popupAnchor: [‐3, ‐76],
	shadowUrl: 'my‐icon‐shadow.png',
	shadowSize: [68, 95],
	shadowAnchor: [22, 94]
});
L.marker([50.505, 30.57], { icon: myIcon}).addTo(map);

参数解释如下：

参数参数类型默认值说明
iconUrlStringnull（必需）icon图标图像的URL（绝对或相对于您的脚本路径）
iconRetinaUrlStringnull用于Retina屏幕设备大尺寸版本的图标图像的URL（绝对或相对于您的脚本路径）
iconSizePointnullicon图片的大小（单位：像素）
iconAnchorPointnull图标的“指示地理位置的锚点”的坐标（相对于其左上角）。 以便图标显示准确位于标记的地理位置。 如果指定大小，则iconAnchor默认为图标中心点，也可以在带有负边距的CSS中设置
popupAnchorPointnullpopup弹窗相对于图标的锚点“打开”的点的坐标
shadowUrlStringnull图标阴影图像的URL。 如果未指定，将不会创建阴影图像
shadowRetinaUrlStringnull用于Retina屏幕设备大尺寸版本的图标图像阴影图像的URL。 如果未指定，将不会创建阴影图像
shadowSizePointnull阴影部分的图片大小（单位：像素）
shadowAnchorPointnull阴影（相对于其左上角）的“提示”的坐标（与未指定的iconAnchor相同）
classNameString‘’要分配给图标和阴影图像的自定义css类名称。 默认为空

如果需要显示文字信息，则需要用DivIcon，因为div内容部分可以自由控制，支持自定义HTML代码放在div元素中，可以用DivIcon创建任意你能够想到的marker标记。

let htmlStr = '<p><span class="map-circle-name">' + point.name +
            '</span><br><span class="map-circle-count">' + point.count + '</span><p/>'
let icon = L.divIcon({ 
  html: htmlStr,
  iconSize: [80, 80],
  className: 'map-circle'
})
L.marker([50.5, 30.5], { icon: icon}).addTo(map)

实现效果如图
《Leaflet 自定义修改Marker点标记样式》
以上就是Leaflet中Marker点标记样式修改的方法，更多请参考官方文档。

    原文作者：ddxshf
    原文地址: https://blog.csdn.net/ddxshf/article/details/111036397
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞