Leaflet v1.0.0 Map接口API 方法(未完待续)

地图方法(Map Methods)

方法返回值描述
getRenderer( < Path> layer)Renderer返回用来渲染指定path的渲染器(Renderer)实例。它可以保证地图和路径的渲染器实例得到关注,还能保证地图上渲染器真实存在。

层的控制方法(Method for Layers and Controls)

方法返回值描述
addControl( < Control>  control)this向地图添加给定的control
removeControl( < Control>  control)this从地图上移除给定的control
addLayer( < Layer>  layer)this向地图添加给定的layer
removeLayer( < Layer>  layer)this从地图上删除给定的layer
hasLayer( < Layer>  layer)Boolean如果给定layer 已经添加到map则返回true 
eachLayer( <Function>  fn <Object> context?)this遍历地图上的layer,遍历行数的context可选
map.eachLayer(function(layer){
    layer.bindPopup('Hello');
});
openPopup( < Popup>  popup)this关闭之前打开的popup时打开指定的popup(确保同一时间只有一个打开)
openPopup( <String|HTMLElement>  content, < LatLng>  latlng < Popup options>  options?)this使用特定的内容和选项在地图上特定位置打开
closePopup( < Popup>  popup?)this关闭之前使用openPopup打开的popup(或者指定的popup)
openTooltip( < Tooltip>  tooltip)this打开特定的tooltip
openTooltip( <String|HTMLElement>  content, < LatLng>  latlng < Tooltip options> options?)this使用特定的内容和选项创建一个tooltip并打开
closeTooltip( < Tooltip>  tooltip?)this关闭参数中的tooltip

修改地图状态的方法(Methods for modifying map state)

方法返回值描述
setView( < LatLng> center, <Number> zoom, < Zoom/pan options> options?)this使用给定的动画选项设置地图的视图。
setZoom( <Number> zoom, < Zoom/pan options> options)this设置地图的缩放。
zoomIn( <Number> delta?, < Zoom options> options?)this使用delta(默认的zoomDelta)提高地图的缩放。
zoomOut( <Number> delta?, < Zoom options> options?)this使用delta(默认的zoomDelta)降低地图的缩放。
setZoomAround( < LatLng> latlng, <Number> zoom, < Zoom options> options)this在地图上固定保持特定的地理位置时缩放地图(比如用来进行滚动缩放和双击缩放)。
setZoomAround( < Point> offset, <Number> zoom, < Zoom options> options)this在地图上保持特定的像素(相对于地图左上角)时进行缩放。
fitBounds( < LatLngBounds> bounds, < fitBounds options> options)this设置包含使用最大可能缩放、包含给定地理边界的视图。
fitWorld( < fitBounds options> options?)this设置包含使用最大可能缩放、包含整个世界的地图视图。
panTo( < LatLng>  latlng, < Pan options>  options?)this将地图平移至指定的位置中心。
panBy( < Point>  offset)this按指定的像素数量平移地图。
setMaxBounds( < Bounds>  bounds)this使用给定的边界限制地图视图。
setMinZoom( <Number>  zoom)this设置地图可用缩放水平的下限(参阅minZoom选项)。
setMaxZoom( <Number>  zoom)this设置地图可用缩放水平的上限(参阅maxZoom选项)。
panInsideBounds( < LatLngBounds> bounds < Pan options>  options?)this将地图平移到给定边界内部的最近视图,可以使用特定的可选项控制动画。
invalidateSize( <Zoom/Pan options> options)this检查地图容器大小是否改变并更新地图,如果这样的话,当你动态的改变地图大小之后调用它,并且默认使用动画平移。如果options.pan是false,平移不会发生。如果options.debounceMoveend是true,它会延迟moveend事件,这样的话即使该方法在一行中被调用多次也不会经常执行。
invalidateSize( <Boolean>  animate)this检查地图容器大小是否改变并更新地图,如果这样的话,当你动态的改变地图大小之后调用它,并且默认使用动画平移。
stop()this停止当前正在执行的panTo或flyTo动画。
flyTo(

< LatLng>  latlng <Number> zoom? < Zoom/pan options> options?)

this设置地图视图(地理中心和缩放),产生平滑的平移-缩放动画效果
flyToBounds(

< LatLngBounds> bounds < fitBounds options> options?)

this
使用类似flyTo的平滑动画设置地图视图,但是使用一个比如fitBounds的bounds参数。

其他方法(Other Methods)

方法返回值描述
addHandler( <String> name, <Function> HandlerClass)this使用给定的名称和构造器函数向地图添加一个新的Handler
remove()this销毁地图并清除所有相关的事件监听器
createPane( <String> name, <HTMLElement> container?)HTMLElement如果map pane不存在,则使用给定的名称创建一个并返回新创建的map pane。新创建的pane可以作为container的孩子,或者主地图pane的孩子。
getPane( <String|HTMLElement> pane)HTMLElement使用给定的名称或者HTML元素(它的标识)返回一个map pane。
getPanes()Object返回一个包含所有pane的对象,其中pane的名称作为key,pane是值。
getContainer()HTMLElement返回一个包含地图的HTML元素。
whenReady( <Function> fn, <Object> context?)this当地图使用视图(中心和缩放)和至少一个layer初始化后,或者地图刚刚初始化后执行给定的函数fn,参数context可选。

转变方法(Conversion Methods)

方法返回值描述
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

地理定位方法(Geolocation methods)

方法返回值描述
   
   

从Evented继承的方法(Methods inherited from Evented)

方法返回值描述
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Leaflet API 提供了强大而灵活的地图交互和可视化工具,使得用户可以自定义地图控件、图层、标记和图像等元素。这里介绍一个简单的 Leaflet API 实例。 在使用 Leaflet API 之前,需要先引入必要的 JavaScript 库等资源文件。这里以 CDN 链接为例: ```html <!DOCTYPE html> <html> <head> <title>Leaflet API Example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.css" /> <script src="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.js"></script> </head> <body> <div id="map" style="width: 800px; height: 600px;"></div> <script> var map = L.map('map').setView([39.9, 116.4], 12); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors' }).addTo(map); L.marker([39.9, 116.4]).addTo(map) .bindPopup('Hello there!') .openPopup(); </script> </body> </html> ``` 以上代码为一个最简单的 Leaflet API 实例。首先创建一个地图容器 `<div id="map"></div>`,通过 L.map 方法创建一个 Leaflet 地图对象,并指定初始地图中心点坐标和缩放级别。接着使用 L.tileLayer 方法加载并添加地图瓦片图层,这里使用的是 OpenStreetMap 的免费瓦片图源。最后使用 L.marker 方法创建一个标记对象,并绑定一个弹出窗口,用于显示该标记的详细信息。当用户打开该地图时,会看到地图窗口中央有一个标记,点击标记即可弹出窗口,显示“Hello there!”的文本信息。 以上是一个简单的 Leaflet API 实例,用户可以根据需要自定义并配置更多可交互元素,以实现更多实用功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值