Leaflet API - DivIcon 中文文档

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

当前位置：

麻辣GIS » GIS手册 » Leaflet中文API手册（V1.9） » Leaflet API - DivIcon 中文文档

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

DivIcon API 调用方法

代表一个轻量级的标记图标，使用一个简单的 <div> 元素而不是图片。继承自 Icon ，但忽略了 iconUrl 和 shadow 选项。

使用示例

var myIcon = L.divIcon({className: 'my-div-icon'});
// 你可以在 .my-div-icon CSS 中设置样式
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

默认情况下，它有一个 'leaflet-div-icon' CSS类，并被设计成一个带有阴影的白色小方块。

Creation

构造函数	说明
`L.divIcon(<DivIcon options> options)`	用给定的选项创建一个 `DivIcon` 实例。

Options 选项

选项	类型	默认值	说明
`html`	`String\|HTMLElement`	`''`	自定义 HTML 代码，放在 div 元素内，默认为空。或者，一个 `HTMLElement` 的实例。
`bgPos`	`Point`	`[0, 0]`	可选的背景的相对位置，单位是像素

继承自 Icon 的选项

选项	类型	默认值	说明
`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 方法

继承自 Icon 的方法

方法	返回值	说明
`createIcon(<HTMLElement> oldIcon?)`	`HTMLElement`	当必须显示图标时在内部调用，返回根据选项设置样式的 HTML 元素。
`createShadow(<HTMLElement> oldIcon?)`	`HTMLElement`	对于它下面的阴影来说，如同 `createIcon`。