Leaflet API - Polygon 多边形中文文档

发布时间: 2022-10-10 所属分类: 文章标签:

当前位置：

麻辣GIS » GIS手册 » Leaflet中文API手册（V1.9） » Leaflet API - Polygon 多边形中文文档

本文介绍下 Leaflet 中 Polygon 多边形 API的详细使用说明。

Polygon 多边形 API 调用方法

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

请注意，您在创建多边形时传递的最后一个点不应该和第一个相同 - 最好过滤掉这些点。

使用示例

// 从一个 LatLng 点的数组中创建一个红色的多边形
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 将地图放大到多边形的位置
map.fitBounds(polygon.getBounds());

你也可以传递一个latlngs的数组，第一个数组代表外部形状，其他数组代表外部形状中的孔:

var latlngs = [
  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
  [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
];

此外，你可以传递一个多维数组来表示一个MultiPolygon形状。

var latlngs = [
  [ // first polygon
    [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
    [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
  ],
  [ // second polygon
    [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
  ]
];

Creation

构造函数	说明
`L.polygon(<LatLng[]> latlngs, <Polyline options> options?)`

Options 选项

继承自 Polyline 的选项

选项	类型	默认值	说明
`smoothFactor`	`Number`	`1.0`	在每个缩放级别简化多段线的程度。更多意味着更好的性能和更平滑的外观，而更少意味着更精确的表现。
`noClip`	`Boolean`	`false`	禁用折线剪裁。

继承自 Path 的选项

选项	类型	默认值	说明
`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 layer 的选项

选项	类型	默认值	说明
`interactive`	`Boolean`	`true`	如果是 `false`, 该图层将不会发出鼠标事件，而是作为底层地图的一部分。

继承自 Layer 图层的选项

选项	类型	默认值	说明
`pane`	`String`	`'overlayPane'`	默认情况下，该图层将被添加到地图的 overlay pane（覆盖窗格）中。覆盖该选项将导致该图层被默认放置在另一个窗格中。
`attribution`	`String`	`null`	归属控制中要显示的字符串，例如 "© OpenStreetMap 贡献者"。它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。

Events 事件

继承自 Interactive layer（交互图层）的鼠标事件

事件	数据	说明
`click`	`MouseEvent`	当用户 click 或 tap 该图层时触发。
`dblclick`	`MouseEvent`	当用户 double-click 或 double-tap 该图层时触发。
`mousedown`	`MouseEvent`	当用户在该图层上按下鼠标按钮时触发。
`mouseup`	`MouseEvent`	当用户在该图层上释放按下的鼠标按钮时触发。
`mouseover`	`MouseEvent`	鼠标进入该图层时触发。
`mouseout`	`MouseEvent`	当鼠标离开该图层时触发。
`contextmenu`	`MouseEvent`	当用户在图层上点击右键时触发，如果该事件有监听者，可以防止显示默认的浏览器上下文菜单。在手机上，当用户保持单次触摸一秒钟（也叫长按）时也会触发。

继承自 Layer 图层的事件

事件	数据	说明
`add`	`Event`	在图层添加到地图后触发
`remove`	`Event`	从地图中移除图层后触发

继承自 Layer 的弹出（Popup）事件

事件	数据	说明
`popupopen`	`PopupEvent`	当绑定到该层的 popup 打开时触发
`popupclose`	`PopupEvent`	当绑定到该层的 popup 关闭时触发

继承自 Layer 图层的工具提示（Tooltip）事件

事件	数据	说明
`tooltipopen`	`TooltipEvent`	当绑定到该层的 tooltip 打开时触发。
`tooltipclose`	`TooltipEvent`	当绑定到该层的 tooltip 关闭时触发。

Methods 方法

方法	返回值	说明
`toGeoJSON(<Number\|false> precision?)`	`Object`	坐标值使用具有指定 `precision` 的 `formatNum` 函数进行四舍五入。返回折线的 `GeoJSON` 表示 (作为 GeoJSON `Polygon` 或 `MultiPolygon` Feature)。

继承自 Polyline 的方法

方法	返回值	说明
`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`访问）。

继承自 Path 的方法

方法	返回值	说明
`redraw()`	`this`	重绘该图层。在你改变了路径使用的坐标后，有时会很有用。
`setStyle(<Path options> style)`	`this`	根据 `Path options` 对象中的选项，改变Path的外观。
`bringToFront()`	`this`	将该图层置于所有路径图层的顶部。
`bringToBack()`	`this`	将该图层置于所有路径图层的底部。

继承自 Layer 图层的方法

方法	返回值	说明
`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 选项。

继承自 Layer 图层的 Popup 方法

方法	返回值	说明
`bindPopup(<String\|HTMLElement\|Function\|Popup> content, <Popup options> options?)`	`this`	将一个弹出式窗口与传入的 `content` 层绑定，并设置必要的事件监听器。如果 `Function` 被传递，它将接收图层作为第一个参数，并应返回 `String` 或 `HTMLElement`。
`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`	返回绑定到该图层的弹出窗口。

继承自 Layer 图层的 Tooltip 方法

方法	返回值	说明
`bindTooltip(<String\|HTMLElement\|Function\|Tooltip> content, <Tooltip options> options?)`	`this`	将工具提示（tooltip）绑定到传入的图层 `content` 并设置必要的事件侦听器。如果一个 `Function` 被传递，它将接收图层作为第一个参数，并应返回 `String` 或 `HTMLElement`。
`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`	返回绑定到该层的工具提示。

继承自 Evented 的方法

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