Leaflet API - Icon 图标中文文档

发布时间: 2022-10-14 所属分类: 文章标签:

当前位置：

麻辣GIS » GIS手册 » Leaflet中文API手册（V1.9） » 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` 将尝试自动检测蓝色图标图像的位置。如果你以非标准的方式放置这些图像，请设置该选项以指向正确的路径。