麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Leaflet API - Rectangle 矩形 中文文档

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

Rectangle 矩形 API 调用方法

一个用于在地图上绘制矩形覆盖物的类。扩展自 Polygon

使用示例

// 定义矩形的地理边界
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// 创建一个橙色的矩形
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// 将地图放大到矩形的边界上
map.fitBounds(bounds);

Creation

构造函数 说明
L.rectangle(<LatLngBounds> latLngBounds, <Polyline options> options?)

Options 选项

选项 类型 默认值 说明
smoothFactor Number 1.0 在每个缩放级别简化多段线的程度。更多意味着更好的性能和更平滑的外观,而更少意味着更精确的表现。
noClip Boolean false 禁用折线剪裁。
选项 类型 默认值 说明
stroke Boolean true 是否沿路径绘制边框。把它设置为false ,可以禁用多边形或圆形的边框。
color String '#3388ff' Stroke(描边)颜色
weight Number 3 Stroke(描边)宽度,单位:像素
opacity Number 1.0 Stroke(描边)的不透明度
lineCap String 'round' 定义描边 结束时使用的形状 的字符串。
lineJoin String 'round' 定义在描边 转角处使用的形状 的字符串。
dashArray String null 一个定义描边的点画线的 图案范式的字符串。 在一些旧的浏览器中,对 Canvas-powered 图层不起作用。
dashOffset String null 一个字符串,它定义了进入 dash 范式的距离,以 dash 开始。 在一些旧的浏览器中,对 Canvas-powered 图层不起作用。
fill Boolean depends 是否对路径进行颜色填充。设置为 false 可以禁止对多边形或圆形的填充。
fillColor String * 填充颜色。默认为 color 选项的值。
fillOpacity Number 0.2 填充的不透明度。
fillRule String 'evenodd' 一个字符串,定义 形状的内部区域 是如何被确定的。
bubblingMouseEvents Boolean true 当为 true时,这个路径上的鼠标事件将在地图上触发相同的事件 (除非使用 L.DomEvent.stopPropagation )。
renderer Renderer 在这个路径上使用这个特定的 Renderer(渲染器) 实例。 优先于地图的 default renderer(默认渲染器)
className String null 在一个元素上设置的自定义类名。仅适用于 SVG 渲染器。
选项 类型 默认值 说明
interactive Boolean true 如果是 false, 该图层将不会发出鼠标事件,而是作为底层地图的一部分。
选项 类型 默认值 说明
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 当用户在图层上点击右键时触发,如果该事件有监听者,可以防止显示默认的浏览器上下文菜单。在手机上,当用户保持单次触摸一秒钟(也叫长按)时也会触发。
事件 数据 说明
add Event 在图层添加到地图后触发
remove Event 从地图中移除图层后触发
事件 数据 说明
popupopen PopupEvent 当绑定到该层的 popup 打开时触发
popupclose PopupEvent 当绑定到该层的 popup 关闭时触发
事件 数据 说明
tooltipopen TooltipEvent 当绑定到该层的 tooltip 打开时触发。
tooltipclose TooltipEvent 当绑定到该层的 tooltip 关闭时触发。

Methods 方法

方法 返回值 说明
setBounds(<LatLngBounds> latLngBounds) this

用传递的边界重绘矩形。

方法 返回值 说明
toGeoJSON(<Number|false> precision?) Object

坐标值使用具有指定 precisionformatNum 函数进行四舍五入。返回折线的 GeoJSON 表示 (作为 GeoJSON PolygonMultiPolygon Feature)。

方法 返回值 说明
getLatLngs() LatLng[]

返回 path(路径)中的点的数组,如果是多段折线,则返回点的嵌套数组。

setLatLngs(<LatLng[]> latlngs) this

用给定的地理点数组替换多段折线中的所有点。

isEmpty() Boolean

如果折线没有经纬度,则返回 true

closestLayerPoint(<Point> p) Point

返回折线上最接近 p 的点。

getCenter() LatLng

返回折线的中心坐标 (centroid) 。

getBounds() LatLngBounds

返回路径的 LatLngBounds

addLatLng(<LatLng> latlng, <LatLng[]> latlngs?) this

将一个给定的点添加到折线上。默认情况下,如果是多段折线,会添加到折线的第一个环上,但是可以通过传递一个特定的环作为LatLng数组来重写(你可以提前用 getLatLngs访问)。

方法 返回值 说明
redraw() this

重绘该图层。在你改变了路径使用的坐标后,有时会很有用。

setStyle(<Path options> style) this

根据 Path options 对象中的选项,改变Path的外观。

bringToFront() this

将该图层置于所有路径图层的顶部。

bringToBack() this

将该图层置于所有路径图层的底部。

方法 返回值 说明
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知识星球
私享圈子

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