标签：返回 Map 触发 缩放 地图 js Leaflet 给定 像素
1、初始化
L.map(<String> id , options ?) //用地图div的id创建
L.map(<HTMLElement>el , options?) //用地图div的name创建
// 简单示例
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
2、参数
a.控件选项
| 选择 |
类型 |
默认 |
描述 |
| attributionControl |
Boolean |
true |
地图右下角的信息说明控件。 |
| zoomControl |
Boolean |
true |
左上角的缩放控件。 |
b.交互选项
| 选择 |
类型 |
默认 |
描述 |
| closePopupOnClick |
Boolean |
true |
如果点击(click)地图时不想Popup被关闭，把该参数设置为false |
| boxZoom |
Boolean |
true |
地图是否可以缩放到由指定的矩形区域，这个区域是你按住SHIFT同时拖动鼠标在地图上画的一个矩形区域 |
| doubleClickZoom |
Boolean|String |
true |
是否允许双击鼠标进行放大，按住SHIFT双击鼠标缩小,默认true；如果将该参数值设置为'center'，则缩放时会固定以view的中心为中心进行缩放，不随鼠标的位置变化而变化 |
| dragging |
Boolean |
true |
地图是否可通过鼠标/触摸拖动。 |
| zoomSnap |
Number |
1 |
强制地图的缩放后地图等级始终为这个参数的倍数，对fitBounds()方法作用很大 |
| zoomDelta |
Number |
1 |
每次缩放的倍数。 |
| trackResize |
Boolean |
true |
地图是否自动处理浏览器窗口大小调整以自行更新。 |
c.平移惯性选项
| 选择 |
类型 |
默认 |
描述 |
| inertia |
Boolean |
* |
如果启用，地图平移将产生惯性效应，其中 地图在拖动时建立动力并继续移动 一段时间内方向相同。触感特别好 设备。默认启用。 |
| inertiaDeceleration |
Number |
3000 |
惯性运动减慢的速率，以像素/秒²为单位。 |
| inertiaMaxSpeed |
Number |
Infinity |
惯性运动的最大速度，以像素/秒为单位。 |
| easeLinearity |
Number |
0.2 |
|
| worldCopyJump |
Boolean |
false |
启用此选项后，当您平移到另一个“副本”时，地图将进行追踪 并无缝跳转到原始世界，以便所有叠加 像标记和矢量层仍然可见。 |
| maxBoundsViscosity |
Number |
0.0 |
如果设置，此选项将控制边界的实心 在拖动地图时。默认值允许 用户以正常速度拖动到边界外，较高的值将 减慢地图拖出边界的速度，并完全设置边界 实心，防止用户拖到边界之外。 |
d.键盘导航选项
| 选择 |
类型 |
默认 |
描述 |
| keyboard |
Boolean |
true |
使用+``-和上下左右箭头对地图进行控制 |
| keyboardPanDelta |
Number |
80 |
按箭头键时要平移的像素量。 |
e.鼠标滚轮选项
| 选择 |
类型 |
默认 |
描述 |
| scrollWheelZoom |
Boolean|String |
true |
是否可以使用鼠标滚轮缩放地图 |
| wheelDebounceTime |
Number |
40 |
限制车轮可以点火的速率（以毫秒为单位）。默认情况下用户通过滚轮缩放的频率不能超过每 40 毫秒一次。 |
| wheelPxPerZoomLevel |
Number |
60 |
滚动多少像素，表示更改一个完整的缩放级别。较小的值将使滚轮缩放更快（反之亦然）。 |
f.触摸交互选项
| 选择 |
类型 |
默认 |
描述 |
| tapHold |
Boolean |
|
启用事件模拟。 |
| tapTolerance |
Number |
15 |
用户在触摸过程中可以移动手指的最大像素数。 |
| touchZoom |
Boolean|String |
* |
是否可以通过用两根手指触摸拖动来缩放地图。 |
| bounceAtZoomLimits |
Boolean |
true |
如果不希望地图缩放到超过最小/最大缩放，请将其设置为 false，然后在缩放时反弹回去。 |
g.地图状态选项
| 选择 |
类型 |
默认 |
描述 |
| crs |
CRS |
L.CRS.EPSG3857 |
要使用的坐标参考系 |
h.动画选项
| 选择 |
类型 |
默认 |
描述 |
| zoomAnimation |
Boolean |
true |
是否启用地图缩放动画。默认情况下，它处于启用状态 在除 Android 之外的所有支持 CSS3 过渡的浏览器中。 |
| zoomAnimationThreshold |
Number |
4 |
如果缩放差异超过此值，则不会对缩放进行动画处理。 |
| fadeAnimation |
Boolean |
true |
是否启用磁贴淡入淡出动画。默认情况下，它处于启用状态 在除 Android 之外的所有支持 CSS3 过渡的浏览器中。 |
| markerZoomAnimation |
Boolean |
true |
标记是否使用缩放动画对其缩放进行动画处理（如果禁用） 它们将在动画的长度内消失。默认情况下，它是 在除 Android 之外的所有支持 CSS3 过渡的浏览器中启用。 |
| transform3DLimit |
Number |
2^23 |
定义 CSS 转换转换的最大大小。默认 除非 Web 浏览器将图层放置在 做大事后错了地方.panBy |
3、事件
a.图层事件
| 事件 |
数据 |
描述 |
| baselayerchange |
LayersControlEvent |
当通过层控件更改基础层时触发。 |
| overlayadd |
LayersControlEvent |
通过图层控件选择叠加时触发。 |
| overlayremove |
LayersControlEvent |
通过图层控件取消选择叠加时触发。 |
| layeradd |
LayerEvent |
将新图层添加到地图时触发。 |
| layerremove |
LayerEvent |
从地图中移除某些图层时触发 |
b.地图状态变化事件
| 事件 |
数据 |
描述 |
| zoomlevelschange |
Event |
当地图上的缩放级别数因更改而触发 以添加或删除图层。 |
| resize |
ResizeEvent |
调整地图大小时触发。 |
| unload |
Event |
使用删除方法销毁地图时触发。 |
| viewreset |
Event |
当地图需要重绘其内容时触发（这通常会发生） 在地图上缩放或加载）。对于创建自定义叠加非常有用。 |
| load |
Event |
初始化地图时触发（设置其中心和缩放比例时） 第一次）。 |
| zoomstart |
Event |
在地图缩放即将更改时触发（例如，在缩放动画之前）。 |
| movestart |
Event |
当地图视图开始更改时触发（例如，用户开始拖动地图）。 |
| zoom |
Event |
在变焦级别发生任何变化时反复触发， 包括缩放和飞行动画。 |
| move |
Event |
在地图的任何移动过程中反复发射， 包括平移和飞行动画。 |
| zoomend |
Event |
在任何动画之后，地图缩放更改时触发。 |
| moveend |
Event |
当地图中心停止更改时触发 （例如，用户停止拖动地图或在非居中缩放后）。 |
c.弹出式事件
| 事件 |
数据 |
描述 |
| popupopen |
PopupEvent |
在地图上打开弹出窗口时触发 |
| popupclose |
PopupEvent |
关闭地图中的弹出窗口时触发 |
| autopanstart |
Event |
打开弹出窗口时地图开始自动平移时触发。 |
d.工具提示事件
| 事件 |
数据 |
描述 |
| tooltipopen |
TooltipEvent |
在地图中打开工具提示时触发。 |
| tooltipclose |
TooltipEvent |
关闭地图中的工具提示时触发。 |
e.位置事件
| 事件 |
数据 |
描述 |
| locationerror |
ErrorEvent |
在地理位置（使用定位方法）失败时触发。 |
| locationfound |
LocationEvent |
在地理位置定位时触发（使用定位方法） 成功了。 |
f.交互事件
| 事件 |
数据 |
描述 |
| click |
MouseEvent |
当用户单击（或点击）地图时触发。 |
| dblclick |
MouseEvent |
当用户双击（或双击）地图时触发。 |
| mousedown |
MouseEvent |
当用户在地图上按下鼠标按钮时触发。 |
| mouseup |
MouseEvent |
当用户在地图上释放鼠标按钮时触发。 |
| mouseover |
MouseEvent |
鼠标进入地图时触发。 |
| mouseout |
MouseEvent |
鼠标离开地图时触发。 |
| mousemove |
MouseEvent |
当鼠标在地图上移动时触发。 |
| contextmenu |
MouseEvent |
当用户在地图上按下鼠标右键时触发，阻止 默认浏览器上下文菜单显示是否有侦听器 此事件。当用户按住单次触摸时，也会在移动设备上触发 一秒钟（也称为长按）。 |
| keypress |
KeyboardEvent |
当用户按下键盘上的键时触发，该键在聚焦地图时生成字符值。 |
| keydown |
KeyboardEvent |
当用户在聚焦地图时从键盘按键时触发。与事件不同的是， 为生成字符值的键和键触发事件 不生成字符值。keypress``keydown |
| keyup |
KeyboardEvent |
当用户在聚焦地图时从键盘松开键时触发。 |
| preclick |
MouseEvent |
在鼠标单击地图之前触发（有时在 希望在任何现有点击之前在点击时发生一些事情 处理程序开始运行）。 |
g.其他
| 事件 |
数据 |
描述 |
| zoomanim |
ZoomAnimEvent |
每个缩放动画至少触发一次。对于连续变焦，如捏合变焦，在变焦期间每帧触发一次。 |
4、方法
| 方法 |
返回 |
描述 |
| getRenderer( layer) |
Renderer |
返回应该用于呈现给定路径的渲染器实例。它将确保地图和路径的选项 得到尊重，并且渲染器确实存在于地图上。renderer |
a.图层和控件的方法
| 方法 |
返回 |
描述 |
| addControl( control) |
this |
将给定控件添加到映射 |
| removeControl( control) |
this |
从映射中删除给定的控件 |
| addLayer( layer) |
this |
将给定图层添加到地图 |
| removeLayer( layer) |
this |
从地图中移除给定图层。 |
| hasLayer( layer) |
Boolean |
如果给定图层当前已添加到地图中，则返回true |
| eachLayer( fn, |
this |
循环访问地图的层，可以选择指定迭代器函数的上下文。map.eachLayer(function(layer){ layer.bindPopup('Hello'); }); |
| openPopup( popup) |
this |
在关闭之前打开的弹出窗口的同时打开指定的弹出窗口（以确保一次只打开一个弹出窗口以提高可用性）。 |
| openPopup(<String|HTMLElement> content, latlng, options?) |
this |
创建具有指定内容和选项的弹出窗口，并在地图上的给定点中将其打开。 |
| closePopup( popup?) |
this |
关闭以前使用 openPopup 打开的弹出窗口（或给定弹出窗口）。 |
| openTooltip( tooltip) |
this |
打开指定的工具提示。 |
| openTooltip(<String|HTMLElement> content, latlng, options?) |
this |
创建具有指定内容和选项的工具提示并将其打开。 |
| closeTooltip( tooltip) |
this |
关闭作为参数给出的工具提示。 |
b.修改地图状态的方法
| 方法 |
返回 |
描述 |
| setView( center, zoom, <Zoom/pan options> options?) |
this |
使用给定的设置地图视图（地理中心和缩放） 动画选项。 |
| setZoom( zoom, <Zoom/pan options> options?) |
this |
设置地图的缩放比例。 |
| zoomIn( delta?, options?) |
this |
将地图的缩放比例增加（默认情况下为缩放增量）。delta |
| zoomOut( delta?, options?) |
this |
将地图的缩放比例减小（默认情况下为缩放增量）。delta |
| setZoomAround( latlng, zoom, options) |
this |
缩放地图，同时在地图上保留指定的地理点 静止（例如，内部用于滚动缩放和双击缩放）。 |
| setZoomAround( offset, zoom, options) |
this |
缩放地图，同时保持地图上的指定像素（相对于左上角）不变。 |
| fitBounds( bounds, options?) |
this |
设置包含给定地理边界的地图视图，其中 最大缩放级别可能。 |
| fitWorld( options?) |
this |
设置一个地图视图，该视图主要包含整个世界，最大值 缩放级别可能。 |
| panTo( latlng, options?) |
this |
将地图平移到给定中心。 |
| panBy( offset, options?) |
this |
按给定数量的像素平移地图（动画）。 |
| flyTo( latlng, zoom?, <Zoom/pan options> options?) |
this |
设置地图视图（地理中心和缩放）执行平滑 平移缩放动画。 |
| flyToBounds( bounds, options?) |
this |
使用平滑的动画（如 flyTo）设置地图视图， 但采用边界参数，如 fitBounds。 |
| setMaxBounds( bounds) |
this |
将地图视图限制为给定边界。 |
| setMinZoom( zoom) |
this |
设置可用缩放级别的下限。 |
| setMaxZoom( zoom) |
this |
设置可用缩放级别的上限。 |
| panInsideBounds( bounds, options?) |
this |
将地图平移到位于给定边界内的最近视图（如果尚未平移），并使用特定选项（如果有）控制动画。 |
| panInside( latlng, options?) |
this |
将地图平移为最小量以使其可见。用 填充选项，使显示适合更受限制的边界。 如果已在（可选填充）显示边界内， 不会平移地图。latlng``latlng |
| invalidateSize(<Zoom/pan options> options) |
this |
检查地图容器大小是否更改，如果是，则更新地图 — 在动态更改地图大小后调用它，同时进行动画处理 默认平移。 |
| invalidateSize( animate) |
this |
检查地图容器大小是否更改，如果是，则更新地图 — 在动态更改地图大小后调用它，同时进行动画处理 默认平移。 |
| stop() |
this |
停止当前正在运行的动画或动画（如果有panTo``flyTo）。 |
c.地理定位方法
| 方法 |
返回 |
描述 |
| locate( options?) |
this |
尝试使用地理位置 API 定位用户，在成功时触发包含位置数据的位置找到事件，或在失败时触发位置错误`事件。 |
| stopLocate() |
this |
停止监视先前由 启动的位置，如果 使用 调用了 map.locate ，则中止重置地图视图。 |
d.其他方法
| 方法 |
返回 |
描述 |
| addHandler( name, HandlerClass) |
this |
将新的处理程序添加到映射中，给定其名称和构造函数。 |
| remove() |
this |
销毁映射并清除所有相关的事件侦听器。 |
| createPane( name, container?) |
HTMLElement |
使用给定名称创建新的地图窗格（如果尚不存在）， 然后返回它。窗格创建为 、 或 的子项 作为主地图窗格的子项（如果未设置）。container |
| getPane(<String|HTMLElement> pane) |
HTMLElement |
返回给定其名称或 HTML 元素（其标识）的地图窗格。 |
| getPanes() |
Object |
返回一个纯对象，其中包含所有窗格的名称作为键和 窗格作为值。 |
| getContainer() |
HTMLElement |
返回包含映射的 HTML 元素。 |
| whenReady( fn, |
this |
在映射初始化时运行给定函数 视图（居中和缩放）和至少一个图层，或立即 如果已初始化，可以选择传递函数上下文。fn |
e.获取地图状态的方法
| 方法 |
返回 |
描述 |
| getCenter() |
LatLng |
返回地图视图的地理中心 |
| getZoom() |
Number |
返回地图视图的当前缩放级别 |
| getBounds() |
LatLngBounds |
返回当前地图视图中可见的地理边界 |
| getMinZoom() |
Number |
返回地图的最小缩放级别（如果在地图或任何图层的选项中设置）或默认缩放级别。 |
| getMaxZoom() |
Number |
返回地图的最大缩放级别（如果在地图或任何图层的选项中设置）。 |
| getBoundsZoom( bounds, inside?, padding?) |
Number |
返回给定边界适合地图的最大缩放级别。 |
| getSize() |
Point |
返回地图容器的当前大小（以像素为单位）。 |
| getPixelBounds() |
Bounds |
以投影像素为单位返回当前地图视图的边界 坐标（有时在层和覆盖实现中很有用）。 |
| getPixelOrigin() |
Point |
返回 的左上角的投影像素坐标 地图图层（在自定义图层和叠加实现中很有用）。 |
| getPixelWorldBounds( zoom?) |
Bounds |
返回缩放级别的像素坐标中的世界边界。 |
f.转换方法
| 方法 |
返回 |
描述 |
| getZoomScale( toZoom, fromZoom) |
Number |
返回要应用于从缩放级别到 的地图过渡的比例因子。 |
| getScaleZoom( scale, fromZoom) |
Number |
返回地图最终将达到的缩放级别（如果它处于级别并且所有内容都按 的因子缩放）。 |
| project( latlng, zoom) |
Point |
根据投影投影地理坐标 LatLng 的 CRS，然后根据zoom 和 CRS 的变换对其进行缩放。 |
| unproject( point, zoom) |
LatLng |
反转。 |
| layerPointToLatLng( point) |
LatLng |
给定相对于原点像素的像素坐标， 返回相应的地理坐标（对于当前缩放级别）。 |
| latLngToLayerPoint( latlng) |
Point |
给定地理坐标，返回相应的像素坐标 相对于原点像素。 |
| wrapLatLng( latlng) |
LatLng |
返回一个 LatLng，其中 并且已根据 地图的 CRS 和属性（如果它们在 CRS的界限。 |
| wrapLatLngBounds( bounds) |
LatLngBounds |
返回与给定大小相同的 LatLngBounds，确保 它的中心在CRS的范围内。 |
| distance( latlng1, latlng2) |
Number |
根据以下条件返回两个地理坐标之间的距离地图的 CRS。默认情况下，这以米为单位测量距离。 |
| containerPointToLayerPoint( point) |
Point |
给定相对于地图容器的像素坐标，返回相应的相对于原点像素的像素坐标。 |
| layerPointToContainerPoint( point) |
Point |
给定相对于原点像素的像素坐标， 返回相对于地图容器的相应像素坐标。 |
| containerPointToLatLng( point) |
LatLng |
给定相对于地图容器的像素坐标，返回 相应的地理坐标（对于当前缩放级别）。 |
| latLngToContainerPoint( latlng) |
Point |
给定地理坐标，返回相应的像素坐标 相对于地图容器。 |
| mouseEventToContainerPoint( ev) |
Point |
给定一个 MouseEvent 对象，返回相对于 映射事件发生的容器。 |
| mouseEventToLayerPoint( ev) |
Point |
给定一个 MouseEvent 对象，返回相对于 事件发生的原始像素。 |
| mouseEventToLatLng( ev) |
LatLng |
给定一个 MouseEvent 对象，返回地理坐标，其中 活动发生了。 |
5、地图窗格
窗格是用于控制地图上图层顺序的 DOM 元素。你 可以使用 map.getPane 或 map.getPanes 方法访问窗格。可以使用 map.createPane 方法创建新窗格。
每个地图都有以下默认窗格，这些窗格仅在 zIndex 中有所不同。
| 窗 格 |
类型 |
Z 指数 |
描述 |
| mapPane |
HTMLElement |
'auto' |
包含所有其他地图窗格的窗格 |
| tilePane |
HTMLElement |
200 |
网格图层和图块图层的窗格 |
| overlayPane |
HTMLElement |
400 |
矢量窗格（路径s，如折线s 和多边形）、图像叠加 s 和视频叠加 |
| shadowPane |
HTMLElement |
500 |
用于叠加阴影的窗格（例如标记阴影） |
| markerPane |
HTMLElement |
600 |
标记s 的图标s 的窗格 |
| tooltipPane |
HTMLElement |
650 |
工具提示的窗格。 |
| popupPane |
HTMLElement |
700 |
弹出窗口的窗格。 |
标签：返回,
Map,
触发,
缩放,
地图,
js,
Leaflet,
给定,
像素
From： https://www.cnblogs.com/echohye/p/17045312.html