UI 图层
Marker 标记
- 作用：在地图上标记特定位置点
- 特点：
- 支持自定义图标（图片/SVG/HTML 元素）
- 可拖拽交互
- 可绑定弹出窗口(Popup)和工具提示(Tooltip)
- 坐标定位：通过经纬度(LatLng)确定位置
L.marker(<LatLng> latlng, <Marker options> options?)，根据一个地理点和一个可选的选项对象实例化一个 Marker 对象。
js
// 创建默认图标的标记
const marker = L.marker([39.904, 116.405]).addTo(map);
// 创建并绑定弹出窗口
L.marker([39.904, 116.405]).addTo(map).bindPopup("伦敦塔桥");配置选项（Options）
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
icon | L.Icon | 默认蓝色图标 | 设置自定义图标 |
draggable | Boolean | false | 是否允许拖拽标记 |
autoPan | Boolean | false | 当拖动此标记靠近边缘时，是否平移地图 |
autoPanPadding | Point | Point(50, 50) | 地图边缘开始平移的距离（以像素为单位，向左/右和向上/向下） |
autoPanSpeed | Number | 10 | 地图应平移的像素数 |
keyboard | Boolean | true | 是否可以通过键盘聚焦并按回车键点击标记 |
title | String | '' | 浏览器提示文本（鼠标悬停时显示） |
alt | String | '' | 图标 alt 属性（无障碍访问） |
zIndexOffset | Number | 0 | 调整标记的 z-index（用于控制重叠顺序） |
opacity | Number | 1.0 | 标记透明度（0-1） |
riseOnHover | Boolean | false | 鼠标悬停时标记是否上浮（提升 z-index） |
riseOffset | Number | 250 | 用于 riseOnHover 功能的 z-index 偏移量 |
pane | String | 'markerPane' | 指定标记所在的 Map Pane |
shadowPane | String | 'shadowPane' | 指定标记阴影所在的 Map Pane |
bubblingMouseEvents | Boolean | false | 鼠标事件是否冒泡到地图 |
autoPanOnFocus | Boolean | true | 点击标记时是否自动平移地图 |
常用方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
addTo(map) | this | 将标记添加到地图 |
remove() | this | 从地图中移除标记 |
getLatLng() | LatLng | 获取当前标记位置 |
setLatLng(latlng) | this | 设置标记位置 |
getIcon() | Icon | 获取当前标记图标 |
setIcon(icon) | this | 设置标记图标 |
setZIndexOffset(offset) | this | 设置 z-index 偏移量 |
setOpacity(opacity) | this | 设置透明度 |
bindPopup(content, options) | this | 绑定弹出窗口（点击标记时显示） |
toGeoJSON() | Object | 返回标记的 GeoJSON 表示 |
事件系统
Marker 触发的事件可通过on()方法监听：
| 事件类型 | 触发条件 |
|---|---|
dragstart | 开始拖拽标记 |
drag | 拖拽过程中 |
dragend | 拖拽结束 |
move | 标记位置改变 |
movestart | 标记开始移动 |
moveend | 标记结束移动 |
js
marker.on("move", (e) => {
console.log(e.target.getLatLng());
});DivOverlay
作用：在地图上显示一个可交互的、包含丰富 HTML 内容的弹出窗口，通常在用户点击地图上的某个要素（如 Marker）时显示。
特点：
- 提供定位、内容设置和开关的通用机制。
- 支持自定义 CSS 类和所属的地图 Pane。
- 处理与地图的交互，如自动平移。
坐标定位：
DivOverlay通过其子类（如Popup和Tooltip）绑定到特定的地理坐标或图层。
配置选项（Options）
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
offset | Point | Point(0, 0) | 覆盖物相对于其锚点（通常是经纬度）的像素偏移量。 |
className | String | '' | 要添加到覆盖物容器的自定义 CSS 类名。 |
pane | String | 'undefined' | 指定覆盖物所在的 Map Pane（例如 'popupPane' 或 'tooltipPane'）。 |
interactive | Boolean | false | 如果为真，弹窗/提示框将监听鼠标事件。 |
content | String/HTMLElement | '' | 弹窗/提示框的内容（HTML 字符串或 DOM 元素）。 |
常用方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
openOn(map) | this | 将覆盖层添加到地图上。 |
close() | this | 关闭覆盖物。 |
toggle() | this | 切换覆盖物的可见性。 |
setLatLng(latlng) | this | 设置覆盖物的位置。 |
getLatLng() | LatLng | 获取覆盖物当前的位置。 |
setContent(content) | this | 设置覆盖物的内容（HTML 字符串或 DOM 元素）。 |
getContent() | String | 获取覆盖物当前的内容。 |
update() | this | 更新覆盖物的位置和内容。 |
isOpen() | Boolean | 获取覆盖物当前的可见性。 |
bringToFront() | this | 将覆盖物提升到所有其他图层的顶部。 |
bringToBack() | this | 将覆盖物降低到所有其他图层的底部。 |
事件系统
| 事件类型 | 触发条件 |
|---|---|
contentupdate | 覆盖物内容更新 |
Popup 弹出窗口
作用：
Popup用于在地图上显示一个可交互的、包含丰富 HTML 内容的弹出窗口，通常在用户点击地图上的某个要素（如 Marker）时显示。特点：
- 支持显示任意 HTML 内容。
- 可绑定到任何
Layer对象（如Marker,Circle,Polygon等）。 - 通常带有关闭按钮，并支持点击地图外部自动关闭。
- 可配置最大/最小宽度和高度，以及自动平移地图以确保可见。
坐标定位：
L.popup(<Popup options> options?, <Layer> source?)：根据一个可选的选项对象和一个可选的源图层实例化一个 Popup 对象。layer.bindPopup(content, options?)：将 Popup 绑定到指定的图层，当图层被点击时显示。
js
// 创建一个独立的弹出窗口并打开
const popup = L.popup()
.setLatLng([39.904, 116.405])
.setContent("我是一个独立的弹出窗口")
.openOn(map);
// or
var popup = L.popup([39.904, 116.405], {
content: "<p>Hello world!<br />This is a nice popup.</p>",
}).openOn(map);
// 将弹出窗口绑定到标记
L.marker([39.904, 116.405])
.addTo(map)
.bindPopup("<b>你好!</b><br />我是一个绑定到标记的弹出窗口。")
.openPopup();配置选项（Options）
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
pane | String | 'popupPane' | Map pane 弹出窗口将被添加的位置 |
offset | Point | Point(0, 7) | 弹出窗口位置的偏移量 |
maxWidth | Number | 300 | 弹出窗口的最大宽度（像素）。 |
minWidth | Number | 50 | 弹出窗口的最小宽度（像素）。 |
maxHeight | Number | null | 弹出窗口的最大高度（像素），如果内容超出则显示滚动条。 |
autoPan | Boolean | true | 当弹出窗口打开时，是否自动平移地图以使其完全可见。 |
autoPanPaddingTopLeft | Point | null | 自动平移时，弹出窗口左上角与地图视图边缘的最小距离。 |
autoPanPaddingBottomRight | Point | null | 自动平移时，弹出窗口右下角与地图视图边缘的最小距离。 |
autoPanPadding | Point | Point(5, 5) | 相当于将左上角和右下角的自动平移填充设置为相同的值 |
keepInView | Boolean | false | 当地图缩放时，弹出窗口是否保持在地图视图内。 |
closeButton | Boolean | true | 是否显示关闭按钮。 |
autoClose | Boolean | true | 点击地图关闭弹出窗口。 |
closeOnEscapeKey | Boolean | true | 是否允许通过按下 Esc 键关闭弹出窗口。 |
closeOnClick | Boolean | - | 是否允许通过点击地图关闭弹出窗口。 |
className | String | '' | 自定义类名，用于设置弹出窗口的样式。 |
常用方法
| 事件类型 | 触发条件 |
|---|---|
openOn | map.openPopup(popup) 的替代方案。将弹窗添加到地图上并关闭上一个弹窗 |
js
marker.on("popupopen", (e) => {
console.log("弹出窗口已打开，内容是:", e.popup.getContent());
});
marker.on("popupclose", (e) => {
console.log("弹出窗口已关闭");
});Tooltip 工具提示
作用：
Tooltip用于在地图上显示一个简单的文本标签，通常在用户鼠标悬停或聚焦在某个要素上时显示。它通常是非交互式的，用于提供额外的信息。特点：
- 显示纯文本或简单的 HTML 内容。
- 可绑定到任何
Layer对象。 - 支持不同的显示方向（上、下、左、右、自动）。
- 可配置为永久显示或仅在悬停时显示。
- 可配置为“粘性”，即跟随鼠标移动。
坐标定位：
L.tooltip(<Tooltip options> options?, <Layer> source?)：根据一个可选的选项对象和一个可选的源图层实例化一个 Tooltip 对象。layer.bindTooltip(content, options?)：将 Tooltip 绑定到指定的图层，当鼠标悬停时显示。
js
// 创建一个独立的工具提示并打开
const tooltip = L.tooltip()
.setLatLng([39.904, 116.405])
.setContent("我是一个独立的工具提示")
.openOn(map);
// or
var tooltip = L.tooltip([39.904, 116.405], {
content: "Hello world!<br />This is a nice tooltip.",
}).addTo(map);
// 将工具提示绑定到标记
L.marker([39.904, 116.405])
.addTo(map)
.bindTooltip("这是一个标记的提示", { permanent: true, direction: "right" })
.openTooltip();配置选项（Options）
| 选项名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
pane | String | 'tooltipPane' | 指定工具提示所在的 Map Pane。 |
direction | String | 'auto' | 工具提示的显示方向：'right', 'left', 'top', 'bottom', 'center', 'auto'。 |
permanent | Boolean | false | 如果为 true，工具提示将永久显示，而不是仅在悬停时显示。 |
sticky | Boolean | false | 如果为 true，工具提示将跟随鼠标指针移动。 |
opacity | Number | 0.9 | 工具提示的透明度（0-1）。 |
offset | Point | Point(0, 0) | 工具提示相对于其锚点的像素偏移量。 |
js
marker.on("tooltipopen", (e) => {
console.log("工具提示已打开，内容是:", e.tooltip.getContent());
});
marker.on("tooltipclose", (e) => {
console.log("工具提示已关闭");
});