Leaflet.js | 官方控件Control-CFANZ编程社区

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	折叠控件容器（如果已展开）。

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