0
点赞
收藏
分享

微信扫一扫

Leaflet.js | 官方控件Control

花海书香 2023-01-16 阅读 85

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

折叠控件容器(如果已展开)。

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



举报

相关推荐

0 条评论