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(
|
给定一个 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 事件
事件 | 数据 | 说明 |
---|---|---|
click
|
MouseEvent
|
当用户 click 或 tap 该图层时触发。 |
dblclick
|
MouseEvent
|
当用户 double-click 或 double-tap 该图层时触发。 |
mousedown
|
MouseEvent
|
当用户在该图层上按下鼠标按钮时触发。 |
mouseup
|
MouseEvent
|
当用户在该图层上释放按下的鼠标按钮时触发。 |
mouseover
|
MouseEvent
|
鼠标进入该图层时触发。 |
mouseout
|
MouseEvent
|
当鼠标离开该图层时触发。 |
contextmenu
|
MouseEvent
|
当用户在图层上点击右键时触发,如果该事件有监听者,可以防止显示默认的浏览器上下文菜单。在手机上,当用户保持单次触摸一秒钟(也叫长按)时也会触发。 |
事件 | 数据 | 说明 |
---|---|---|
popupopen
|
PopupEvent
|
当绑定到该层的 popup 打开时触发 |
popupclose
|
PopupEvent
|
当绑定到该层的 popup 关闭时触发 |
事件 | 数据 | 说明 |
---|---|---|
tooltipopen
|
TooltipEvent
|
当绑定到该层的 tooltip 打开时触发。 |
tooltipclose
|
TooltipEvent
|
当绑定到该层的 tooltip 关闭时触发。 |
Methods 方法
方法 | 返回值 | 说明 |
---|---|---|
getElement()
|
SVGElement |
返回此 overlay 使用的
|
方法 | 返回值 | 说明 |
---|---|---|
setOpacity(
|
this |
设置 overlay 的不透明度。 |
bringToFront()
|
this |
将图层置于所有 overlay 图层的顶部。 |
bringToBack()
|
this |
将图层置于所有 overlay 图层的底部。 |
setUrl(
|
this |
更改图像的 URL。 |
setBounds(
|
this |
更新当前 ImageOverlay 覆盖的边界 |
setZIndex(
|
this |
更改 image overlay 的 zIndex 。 |
getBounds()
|
LatLngBounds
|
获取此 ImageOverlay 覆盖的边界 |
getCenter()
|
LatLng
|
返回 ImageOverlay 的中心坐标。 |
方法 | 返回值 | 说明 |
---|---|---|
addTo(
|
this |
将图层添加到指定的地图或图层组(LayerGroup)。 |
remove()
|
this |
从当前处于活动状态的地图中删除图层。 |
removeFrom(
|
this |
从指定的地图中删除图层 |
removeFrom(
|
this |
从指定的
|
getPane(
|
HTMLElement |
返回代表地图上指定窗格的
|
getAttribution()
|
String |
由 |
方法 | 返回值 | 说明 |
---|---|---|
bindPopup(
|
this |
将一个弹出式窗口与传入的
|
unbindPopup()
|
this |
移除之前用 |
openPopup(
|
this |
在指定的
|
closePopup()
|
this |
如果与当前图层绑定的弹窗(popup)时打开的,则关闭当前弹窗。 |
togglePopup()
|
this |
根据当前状态,打开或关闭与该层绑定的弹出窗口。 |
isPopupOpen()
|
boolean |
如果与该层绑定的弹出窗口当前已打开,则返回
|
setPopupContent(
|
this |
设置绑定到该图层的弹出窗口的内容。 |
getPopup()
|
Popup
|
返回绑定到该图层的弹出窗口。 |
方法 | 返回值 | 说明 |
---|---|---|
bindTooltip(
|
this |
将工具提示(tooltip)绑定到传入的图层
|
unbindTooltip()
|
this |
移除之前用
|
openTooltip(
|
this |
在指定的
|
closeTooltip()
|
this |
如果该图层处于打开状态,则关闭绑定到该图层的工具提示。 |
toggleTooltip()
|
this |
根据当前状态打开或关闭绑定到该图层的工具提示。 |
isTooltipOpen()
|
boolean |
如果该层绑定的工具提示当前已打开,则返回
|
setTooltipContent(
|
this |
设置绑定到该层的工具提示的内容。 |
getTooltip()
|
Tooltip
|
返回绑定到该层的工具提示。 |
方法 | 返回值 | 说明 |
---|---|---|
on(
|
this |
为对象的特定事件类型添加一个监听函数( |
on(
|
this |
添加一组 type/listener,例如
|
off(
|
this |
移除一个先前添加的监听器函数。如果没有指定函数,它将从对象中删除该特定事件的所有监听器。请注意,如果您向
|
off(
|
this |
删除一组 type/listener |
off()
|
this |
移除该对象上所有事件的所有监听器。这包括隐含的附加事件。 |
fire(
|
this |
触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性,事件可以选择性地传播到事件父级。 |
listens(
|
Boolean |
如果一个特定的事件类型有任何监听器连接到它,则返回
|
once(…)
|
this |
与 |
addEventParent(
|
this |
向父级
|
removeEventParent(
|
this |
删除之前向父级
|
addEventListener(…)
|
this |
同 |
removeEventListener(…)
|
this |
同 |
clearAllEventListeners(…)
|
this |
同 |
addOneTimeEventListener(…)
|
this |
同
|
fireEvent(…)
|
this |
同
|
hasEventListeners(…)
|
Boolean |
其他API
Leaflet中文API文档手机(v.19版本)参考:《Leaflet中文API文档手机(v.19版本)》
相关阅读
声明
1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。
2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。