麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Leaflet API - GeoJSON 图层 中文文档

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

GeoJSON 图层 API 调用方法

代表一个 GeoJSON 对象或一个 GeoJSON 对象的数组。允许你解析 GeoJSON 数据并将其显示在地图上。扩展自 FeatureGroup

使用示例

L.geoJSON(data, {
    style: function (feature) {
        return {color: feature.properties.color};
    }
}).bindPopup(function (layer) {
    return layer.feature.properties.description;
}).addTo(map);

Creation

构造函数 说明
L.geoJSON(<Object> geojson?, <GeoJSON options> options?) 创建一个GeoJSON图层。可选择接受一个在地图上显示的 GeoJSON 格式 的对象 (你也可以在以后用 addData 方法添加它) 和一个 options 对象。

Options 选项

选项 类型 默认值 说明
pointToLayer Function * 一个定义 GeoJSON 点如何产生 Leaflet 图层的 Function 。当数据被添加时,它被内部调用,传递GeoJSON点的特征和它的 LatLng。默认是生成一个默认的 Marker:
function(geoJsonPoint, latlng) {
return L.marker(latlng);
}
style Function * 一个定义GeoJSON线条和多边形造型的 Path options 函数 ,在添加数据时内部调用。默认值是不覆盖任何默认值:
function (geoJsonFeature) {
return {}
}
onEachFeature Function * 一个 Function ,在每个创建的 Feature 被创建和样式化后,将被调用一次。对于将事件和弹出窗口附加到要素上很有用。默认情况下,对新创建的图层不做任何处理:
function (feature, layer) {}
filter Function * 一个 Function ,用于决定是否包括一个要素。默认是包括所有要素:
function (geoJsonFeature) {
return true;
}

注意:动态改变 filter 选项将只对新添加的数据产生影响。它 不会 重新评估已经包含的要素。

coordsToLatLng Function * 一个用于将GeoJSON坐标转换为LatLngs的 Function 。默认是 coordsToLatLng 静态方法。
markersInheritOptions Boolean false "Point" 类型要素的默认标记是否继承于组选项。
选项 类型 默认值 说明
interactive Boolean true 如果是 false, 该图层将不会发出鼠标事件,而是作为底层地图的一部分。
bubblingMouseEvents Boolean true 当为 true 时,此标记上的鼠标事件将触发地图上的相同事件(除非使用 L.DomEvent.stopPropagation)。
选项 类型 默认值 说明
pane String 'overlayPane' 默认情况下,该图层将被添加到地图的 overlay pane(覆盖窗格)中。 覆盖该选项将导致该图层被默认放置在另一个窗格中。
attribution String null 归属控制中要显示的字符串,例如 "© OpenStreetMap 贡献者"。 它描述了图层数据,通常是对版权所有者和瓦片提供者的法律义务。

Events 事件

事件 数据 说明
layeradd LayerEvent 当一个图层被添加到该 FeatureGroup 时触发。
layerremove LayerEvent 当一个图层被从该 FeatureGroup中移除时触发。
事件 数据 说明
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 方法

方法 返回值 说明
addData(data) this

将一个 GeoJSON 对象添加到图层中。

resetStyle(layer?) this

将给定的矢量图层的样式重置为原始的 GeoJSON 样式,对于在悬停事件后重置样式很有用。如果省略了 layer ,当前图层中的所有要素的样式都会被重置。

setStyle(style) this

用给定的样式函数改变 GeoJSON 矢量图层的样式。

方法 返回值 说明
bringToFront() this

将图层组置于所有其他图层的顶部。

bringToBack() this

将图层组置于所有其他图层的底部。

getBounds() LatLngBounds

返回要素组的 LatLngBounds(由其子节点的边界和坐标创建)。

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

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

addLayer(<Layer> layer) this

将给定的图层添加到组中。

removeLayer(<Layer> layer) this

将给定的图层从组中移除。

removeLayer(<Number> id) this

将具有给定内部ID的图层从组中移除。

hasLayer(<Layer> layer) Boolean

如果给定的图层当前被添加到组中,则返回 true

hasLayer(<Number> id) Boolean

如果给定的内部 ID 当前被添加到组中,则返回 true

clearLayers() this

移除组中的所有图层。

invoke(<String> methodName, ) this

对该组中包含的每个图层调用 methodName ,并传递任何附加参数。如果包含的图层没有实现 methodName,则没有效果。

eachLayer(<Function> fn, <Object> context?) this

遍历该组的各图层,可以选择指定迭代器函数的上下文。

group.eachLayer(function (layer) {
    layer.bindPopup('Hello');
});
getLayer(<Number> id) Layer

返回具有给定内部 ID 的图层。

getLayers() Layer[]

返回所有添加到组中的图层的数组。

setZIndex(<Number> zIndex) this

对包含在该组中的每个图层调用 setZIndex ,并传递 z-index 。

getLayerId(<Layer> layer) Number

返回一个图层的内部 ID

方法 返回值 说明
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(…)

Functions

这里有几个静态函数可以不通过实例化 L.GeoJSON 来调用:
Function 返回值 说明
geometryToLayer(<Object> featureData, <GeoJSON options> options?) Layer 从一个给定的GeoJSON要素创建一个 Layer 。如果提供选项,可以使用自定义的 pointToLayer 和/或 coordsToLatLng 函数。
coordsToLatLng(<Array> coords) LatLng 从GeoJSON中用于点的2个数字(经度、纬度)或3个数字(经度、纬度、海拔)阵列中创建一个 LatLng 对象。
coordsToLatLngs(<Array> coords, <Number> levelsDeep?, <Function> coordsToLatLng?) Array 从GeoJSON坐标数组中创建一个 LatLng的多维数组。 levelsDeep 指定嵌套级别(0用于点的数组,1用于点的数组,等等,默认为0)。可以使用一个自定义的 coordsToLatLng 函数。
latLngToCoords(<LatLng> latlng, <Number|false> precision?) Array coordsToLatLng相反。坐标值使用 formatNum 函数进行四舍五入。
latLngsToCoords(<Array> latlngs, <Number> levelsDeep?, <Boolean> closed?, <Number|false> precision?) Array coordsToLatLngs的反向 closed ,决定是否应该将第一个点追加到数组的末尾以 close 该要素,仅在 levelsDeep 为 0 时使用,默认为 false 。坐标值使用 formatNum 函数进行四舍五入。
asFeature(<Object> geojson) Object 将 GeoJSON 的 geometries/features 规范化为 GeoJSON features。

其他API

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

相关阅读

麻辣GIS-Sailor

作者:

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

声明

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

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

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

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