麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Leaflet API - SVGOverlay 中文文档

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

SVGOverlay API 调用方法

用于在地图的特定边界上加载、显示和提供对 SVG 文件的 DOM 访问。 扩展自 ImageOverlay

SVG overlay 使用了 <svg> 元素。

使用示例

var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
svgElement.setAttribute('viewBox', "0 0 200 200");
svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
var svgElementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
L.svgOverlay(svgElement, svgElementBounds).addTo(map);

Creation

构造函数 说明
L.svgOverlay(<String|SVGElement> svg, <LatLngBounds> bounds, <SVGOverlay options> options?) 给定一个 SVG 元素和它所关联的地理边界,实例化一个 image overlay 对象。 SVG 元素需要 viewBox 属性才能正确放大和缩小。

Options 选项

选项 类型 默认值 说明
opacity Number 1.0 图像图层的不透明度。
alt String '' 图像 alt 属性的文本内容(对于可访问性很有用)。
interactive Boolean false 如果为 true,当单击或悬停时,图像图层将发出 鼠标事件
crossOrigin Boolean|String false 是否将 crossOrigin 属性添加到图像中。 如果提供了字符串,则图像的 crossOrigin 属性将设置为提供的字符串。 如果要访问图像像素数据,则需要这样做。 有关有效的字符串值,请参阅 CORS 设置
errorOverlayUrl String '' 图像图层的 URL,以代替加载失败的图层。
zIndex Number 1 图层的显式 zIndex
className String '' 为图像指定一个自定义类名。默认是空的。
选项 类型 默认值 说明
bubblingMouseEvents Boolean true 当为 true 时,此标记上的鼠标事件将触发地图上的相同事件(除非使用 L.DomEvent.stopPropagation)。
选项 类型 默认值 说明
pane String 'overlayPane' 默认情况下,该图层将被添加到地图的 overlay pane(覆盖窗格)中。 覆盖该选项将导致该图层被默认放置在另一个窗格中。
attribution String null 归属控制中要显示的字符串,例如 "© OpenStreetMap 贡献者"。 它描述了图层数据,通常是对版权所有者和瓦片提供者的法律义务。

Events 事件

事件 数据 说明
load Event 当 ImageOverlay 层加载了它的图像时触发
error Event 当 ImageOverlay 层无法加载其图像时触发
事件 数据 说明
click MouseEvent 当用户 click 或 tap 该图层时触发。
dblclick MouseEvent 当用户 double-click 或 double-tap 该图层时触发。
mousedown MouseEvent 当用户在该图层上按下鼠标按钮时触发。
mouseup MouseEvent 当用户在该图层上释放按下的鼠标按钮时触发。
mouseover MouseEvent 鼠标进入该图层时触发。
mouseout MouseEvent 当鼠标离开该图层时触发。
contextmenu MouseEvent 当用户在图层上点击右键时触发,如果该事件有监听者,可以防止显示默认的浏览器上下文菜单。在手机上,当用户保持单次触摸一秒钟(也叫长按)时也会触发。
事件 数据 说明
add Event 在图层添加到地图后触发
remove Event 从地图中移除图层后触发
事件 数据 说明
popupopen PopupEvent 当绑定到该层的 popup 打开时触发
popupclose PopupEvent 当绑定到该层的 popup 关闭时触发
事件 数据 说明
tooltipopen TooltipEvent 当绑定到该层的 tooltip 打开时触发。
tooltipclose TooltipEvent 当绑定到该层的 tooltip 关闭时触发。

Methods 方法

方法 返回值 说明
getElement() SVGElement

返回此 overlay 使用的 SVGElement 实例。

方法 返回值 说明
setOpacity(<Number> opacity) this

设置 overlay 的不透明度。

bringToFront() this

将图层置于所有 overlay 图层的顶部。

bringToBack() this

将图层置于所有 overlay 图层的底部。

setUrl(<String> url) this

更改图像的 URL。

setBounds(<LatLngBounds> bounds) this

更新当前 ImageOverlay 覆盖的边界

setZIndex(<Number> value) this

更改 image overlay 的 zIndex

getBounds() LatLngBounds

获取此 ImageOverlay 覆盖的边界

getCenter() LatLng

返回 ImageOverlay 的中心坐标。

方法 返回值 说明
addTo(<Map|LayerGroup> map) this

将图层添加到指定的地图或图层组(LayerGroup)。

remove() this

从当前处于活动状态的地图中删除图层。

removeFrom(<Map> map) this

从指定的地图中删除图层

removeFrom(<LayerGroup> group) this

从指定的 LayerGroup 中删除该图层。

getPane(<String> name?) HTMLElement

返回代表地图上指定窗格的 HTMLElement。如果 name 被省略,则返回该层的窗格。

getAttribution() String

attribution 控件使用,返回 attribution 选项

方法 返回值 说明
bindPopup(<String|HTMLElement|Function|Popup> content, <Popup options> options?) this

将一个弹出式窗口与传入的 content 层绑定,并设置必要的事件监听器。如果 Function 被传递,它将接收图层作为第一个参数,并应返回 StringHTMLElement

unbindPopup() this

移除之前用 bindPopup 绑定的弹出窗口。

openPopup(<LatLng> latlng?) this

在指定的 latlng 处打开绑定的弹出窗口,如果没有设置 latlng,则在默认的位置打开弹窗(popup)。

closePopup() this

如果与当前图层绑定的弹窗(popup)时打开的,则关闭当前弹窗。

togglePopup() this

根据当前状态,打开或关闭与该层绑定的弹出窗口。

isPopupOpen() boolean

如果与该层绑定的弹出窗口当前已打开,则返回 true

setPopupContent(<String|HTMLElement|Popup> content) this

设置绑定到该图层的弹出窗口的内容。

getPopup() Popup

返回绑定到该图层的弹出窗口。

方法 返回值 说明
bindTooltip(<String|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

将工具提示(tooltip)绑定到传入的图层 content 并设置必要的事件侦听器。如果一个 Function 被传递,它将接收图层作为第一个参数,并应返回 StringHTMLElement

unbindTooltip() this

移除之前用 bindTooltip 绑定的工具提示(tooltip)。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 处打开绑定的工具提示(tooltip),如果没有指定 latlng,则在默认的锚点打开工具提示(tooltip)。

closeTooltip() this

如果该图层处于打开状态,则关闭绑定到该图层的工具提示。

toggleTooltip() this

根据当前状态打开或关闭绑定到该图层的工具提示。

isTooltipOpen() boolean

如果该层绑定的工具提示当前已打开,则返回 true

setTooltipContent(<String|HTMLElement|Tooltip> content) this

设置绑定到该层的工具提示的内容。

getTooltip() Tooltip

返回绑定到该层的工具提示。

方法 返回值 说明
on(<String> type, <Function> fn, <Object> context?) this

为对象的特定事件类型添加一个监听函数(fn)。你可以选择性地指定监听器的上下文(这个关键字将指向的对象)。你也可以传递几个空格分隔的类型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一组 type/listener,例如 {click: onClick, mousemove: onMouseMove}

off(<String> type, <Function> fn?, <Object> context?) this

移除一个先前添加的监听器函数。如果没有指定函数,它将从对象中删除该特定事件的所有监听器。请注意,如果您向 on 传递了一个自定义的上下文,您必须向 off 传递相同的上下文,以便删除监听器。

off(<Object> eventMap) this

删除一组 type/listener

off() this

移除该对象上所有事件的所有监听器。这包括隐含的附加事件。

fire(<String> type, <Object> data?, <Boolean> propagate?) this

触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性,事件可以选择性地传播到事件父级。

listens(<String> type, <Boolean> propagate?) Boolean

如果一个特定的事件类型有任何监听器连接到它,则返回 true。验证可以选择性地被传播,如果父级有监听器连接到它,它将返回true

once() this

on(...)的行为一样,不过监听器只会被触发一次后然后被删除。

addEventParent(<Evented> obj) this

向父级 Evented 添加事件

removeEventParent(<Evented> obj) this

删除之前向父级 Evented 添加的事件

addEventListener() this

on(…)

removeEventListener() this

off(…)

clearAllEventListeners() this

off()

addOneTimeEventListener() this

once(…)

fireEvent() this

fire(…)

hasEventListeners() Boolean

listens(…)

其他API

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

相关阅读

麻辣GIS-Sailor

作者:

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

声明

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

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

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

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