Leaflet.js | 官方控件Control

1、比例控件

一个简单的比例控件,以公制 (m/km) 和英制 (mi/ft) 系统显示当前屏幕中心的比例,可扩展。

使用示例

L.control.scale().addTo(map);

创造

构造 描述
L.control.scale(<Control.Scale options> options?) 使用给定选项创建缩放控件。

选项

选择 类型 违约 描述
maxWidth Number 100 控件的最大宽度(以像素为单位)。宽度动态设置以显示舍入值(例如 100、200、500)。
metric Boolean True 是否显示公制刻度线 (m/km)。
imperial Boolean True 是否显示英制比例线 (mi/ft)。
updateWhenIdle Boolean false 如果为 true,则控件在 moveend 上更新,否则它始终是最新的(在移动时更新)。

2、属性控件

归因控件允许您在地图上的小文本框中显示归因数据。默认情况下,除非您将其属性控制选项设置为 ,否则它会放在地图上,并且它会使用 getAttribution 方法自动从图层中获取属性文本。扩展控制。false

创造

构造 描述
L.control.attribution(<Control.Attribution options> options) 创建归因控件。

选项

选择 类型 违约 描述
prefix String|false 'Leaflet' 在属性之前显示的 HTML 文本。

方法

方法 返回 描述
setPrefix(<String|false> prefix) this 在属性之前显示的 HTML 文本。通过以禁用。false
addAttribution( text) this 添加属性文本(例如 )。'© OpenStreetMap contributors'
removeAttribution( text) this 删除属性文本。

三、缩放控件

具有两个按钮(放大和缩小)的基本缩放控件。默认情况下,它会放在地图上,除非您将其 zoomControl 选项设置为 。扩展控制。false

创造

构造 描述
L.control.zoom(<Control.Zoom options> options) 创建缩放控件

选项

选择 类型 违约 描述
zoomInText String '' 在“放大”按钮上设置的文本。
zoomInTitle String 'Zoom in' 在“放大”按钮上设置的标题。
zoomOutText String '' 在“缩小”按钮上设置的文本。
zoomOutTitle String 'Zoom out' 在“缩小”按钮上设置的标题。

4、图层控件

图层控件使用户能够在不同的基础图层之间切换并打开/关闭叠加层(查看详细示例),可扩展。

使用示例

var baseLayers = {
    "Mapbox": mapbox,
    "OpenStreetMap": osm
};

var overlays = {
    "Marker": marker,
    "Roads": roadsLayer
};

L.control.layers(baseLayers, overlays).addTo(map);

图层名称作为键,图层对象作为值

{
    "<someName1>": layer1,
    "<someName2>": layer2
}

图层名称可以包含 HTML,这允许您向项目添加其他样式:

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

创造

构造 描述
L.control.layers( baselayers?, overlays?, <Control.Layers options> options?) 创建具有给定层的层控件。基础图层将使用单选按钮进行切换,而叠加层将使用复选框进行切换。请注意,所有基础图层都应在基础图层对象中传递,但在映射实例化期间,只应将一个基础图层添加到地图中。

选项

选择 类型 违约 描述
collapsed Boolean true 如果为true ,控件将折叠为图标,并在鼠标悬停、触摸或键盘激活时展开。
autoZIndex Boolean true 如果 true,控件将按递增顺序为其所有层分配 zIndex,以便在打开/关闭它们时保留顺序。
hideSingleBase Boolean false 如果 true,则当只有一个时,控件中的基层将被隐藏。
sortLayers Boolean false 是否对图层进行排序。当 时,图层将保持顺序 它们被添加到控件中。false
sortFunction Function * 将用于对图层进行排序的比较函数。

方法

方法 返回 描述
addBaseLayer( layer, name) this 将具有给定名称的基础层(单选按钮条目)添加到控件。
addOverlay( layer, name) this 将具有给定名称的覆盖(复选框条目)添加到控件。
removeLayer( layer) this 从控件中删除给定的层。
expand() this 展开控件容器(如果已折叠)。
collapse() this 折叠控件容器(如果已展开)。
posted @ 2023-01-12 02:09  槑孒  阅读(311)  评论(0编辑  收藏  举报