麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Leaflet API - Icon 图标 中文文档

本文介绍下 Leaflet 中 Icon 图标 API的详细使用说明。

Icon 图标 API 调用方法

代表创建标记时提供的一个图标。

使用示例

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

L.Icon.Default 扩展自 L.Icon ,是 Leaflet 默认用于标记的蓝色图标。

Creation

构造函数 说明
L.icon(<Icon options> options) 用给定的选项创建一个图标实例。

Options 选项

选项 类型 默认值 说明
iconUrl String null (必填) 图标图像的URL(绝对路径或目前脚本所在的相对路径)。
iconRetinaUrl String null 图标图像的视网膜尺寸版本的URL(绝对路径或目前脚本所在的相对路径), 用于视网膜屏幕设备。
iconSize Point null 图标图像的尺寸,单位是像素。
iconAnchor Point null 图标 "tip" 的坐标(相对于其左上角)。图标将被对齐,使该点位于标记的地理位置。如果指定了尺寸,默认为居中,也可以在CSS中设置负的边距。
popupAnchor Point [0, 0] 弹出窗口(popup)的坐标,相对于图标锚点而言,将从该点打开。
tooltipAnchor Point [0, 0] 工具提示(tooltip)的坐标,相对于图标锚点而言,将从该点打开。
shadowUrl String null 图标阴影图像的URL。如果不指定,将不会创建阴影图像。
shadowRetinaUrl String null
shadowSize Point null 阴影图像的大小,单位是像素。
shadowAnchor Point null 阴影 "tip" 的坐标(相对于其左上角)(如果没有指定,则与iconAnchor相同)。
className String '' 用户给图标和阴影图像指定自定义类名,默认为空
crossOrigin Boolean|String false 是否将 crossOrigin 属性添加到瓦片中。 如果提供了字符串,则所有瓦片的 crossOrigin 属性都将设置为提供的字符串。 如果您想访问平铺像素数据,则需要这样做。 有关有效的字符串值,请参阅 CORS 设置

Methods 方法

方法 返回值 说明
createIcon(<HTMLElement> oldIcon?) HTMLElement

当必须显示图标时在内部调用,返回根据选项设置样式的 HTML 元素。

createShadow(<HTMLElement> oldIcon?) HTMLElement

对于它下面的阴影来说,如同 createIcon

Icon.Default

Icon的一个微不足道的子类,当没有指定图标时,代表在 Marker中使用的图标。指向随 Leaflet 发布的蓝色标记图像。

为了定制默认图标,只需改变 L.Icon.Default.prototype.options的属性 (这是一组 Icon options)。

如果你想 全部 取代默认的图标,用你自己的图标覆盖 L.Marker.prototype.options.icon

选项 类型 默认值 说明
imagePath String Icon.Default 将尝试自动检测蓝色图标图像的位置。如果你以非标准的方式放置这些图像,请设置该选项以指向正确的路径。

其他API

Leaflet中文API文档手机(v.19版本)参考:《Leaflet中文API文档手机(v.19版本)

相关阅读

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

手机阅读
公众号关注
知识星球
手机阅读
麻辣GIS微信公众号关注
最新GIS干货
关注麻辣GIS知识星球
私享圈子

留言板(小编看到第一时间回复)