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( |
创建具有给定层的层控件。基础图层将使用单选按钮进行切换,而叠加层将使用复选框进行切换。请注意,所有基础图层都应在基础图层对象中传递,但在映射实例化期间,只应将一个基础图层添加到地图中。 |
选项
选择 |
类型 |
违约 |
描述 |
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 |
折叠控件容器(如果已展开)。 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!