Vue 2.6+Leaflet1.6（二）：Map地图篇

柔情只为你懂 2021-07-25 00:27 685阅读 0赞

一、map简介

二、map创建

三、map选项

3.1 Map State Options（地图状态选项）

3.2 Interaction Options（地图交互操作）

3.3 Keyboard Navigation Options（键盘操纵选项）

3.4 Panning Inertia Options（平移惯性选项）

3.5 Control options（控制选项）

3.6 Animation options（动画选项）

4、Events（事件）

五、方法

5.1、Methods for Modifying Map State（地图状态修改）

5.2、 Methods for Getting Map State（获取地图状态）

5.3、Methods for Layers and Controls（图层控制）

5.4、 Conversion Methods（转换方法）

5.5、Other Methods（其他方法）

6、属性

7、其他相关

7.1 、Locate options（位置选项）

7.2、Map Panes（地图窗口）

--------------------

# Vue 2.6+Leaflet1.6（二）：Map地图篇 #

接上篇，上篇搭建了一个基于vue2.6 和leaflet1.6的项目工程，让工程能跑得起来，今天正式开始说说leaflet的使用。

所有GIS的API起步阶段几乎都是地图map的概念。

# 一、map简介 #

map类是基础和核心，主要作用是页面中创建地图并且对地图操作。

# 二、map创建 #

**L.map**(<String> *id*, <Map options> *options?*)      //第一个参数，传入承载地图的DIV的id号；第二个参数是map选项，详见第三项

示例：

// 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
    });

# 三、map选项 #

所有的选项如何使用，参考下面代码：

L.map('map', {
    //这里面放的就是各种选项，其值可以根据查官网
        center: [51.505, -0.09],
        zoom: 13
        zoomControl: true，
        scrollWheelZoom：true //默认开启鼠标滚轮缩放
    });

## 3.1 Map State Options（地图状态选项） ##

**centre（中心）**：初始化地图的地理中心。  
**zoom（缩放）**：初始化地图的缩放。  
**layers（图层）**：初始化后加载到地图上的图层。  
**minZoom（最小视图）**：地图的最小视图。可以重写地图图层的最小视图。  
**maxZoom（最大视图）**：地图的最大视图。可以重写地图图层的最大视图。  
**maxBounds（最大边界）**：当这个选项被设置后，地图被限制在给定的地理边界内，当用户平移将地图拖动到视图以外的范围时会出现弹回的效果，并且也不允许缩小视图到给定范围以外的区域（这取决于地图的尺寸）。使用setMaxBounds方法可以动态地设置这种约束。  
**crs（坐标参考系统）**：使用的坐标系，当你不确定坐标系是什么时请不要更改。

## 3.2 Interaction Options（地图交互操作） ##

dragging（拖动）：决定地图是否可被鼠标或触摸拖动。  
touchZoom（触摸缩放）：决定地图是否可被两只手指触摸拖拽缩放。  
scrollWheelZoom（滚轮缩放）：决定地图是否被被鼠标滚轮滚动缩放。  
doubleClickZoom（双击缩放）：决定地图是否可被双击缩放。  
boxZoom（多边形缩放）：决定地图是否可被缩放到鼠标拖拽出的矩形的视图，鼠标拖拽时需要同时按住shift键。  
trackResize（追踪尺寸改变）：确定地图在窗口尺寸改变时是否可以自动处理浏览器以更新视图。  
worldCopyJump（领域副本跳转）：当这个选项可用时，当你平移地图到其另一个领域时会被地图捕获到，并无缝地跳转到原始的领域以保证所有标注、矢量图层之类的覆盖物仍然可见。  
closePopupOnClick（点击关闭消息弹出框）：当你不想用户点击地图关闭消息弹出框时，请将其设置为false。

## 3.3 Keyboard Navigation Options（键盘操纵选项） ##

keyboard（键盘）：聚焦到地图且允许用户通过键盘的方向键和加减键来漫游地图。  
keyboardPanOffset（键盘平移补偿）：确定按键盘方向键时地图平移的像素。  
keyboardZoomOffset（键盘缩放补偿）：确定键盘加减键对于的缩放级数。

## 3.4 Panning Inertia Options（平移惯性选项） ##

inertia（惯性）：如果该选项可用，在拖动和在某一时间段内持续朝同一方向移动建有动力的地图时，会有惯性的效果。  
inertiaDeceleration（惯性减速）：确定惯性移动减速的速率，单位是像素每秒的二次方。  
inertiaMaxSpeed（惯性最大速度）：惯性移动的最大速度，单位是像素每秒。  
inertiaThreshold（惯性阈值）：放开鼠标或是触摸来停止惯性移动与移动停止之间的毫秒数。

## 3.5 Control options（控制选项） ##

zoomControl（缩放控制）：确定缩放控制按钮是否默认加载在地图上。  
attributionControl（属性控制）：确定属性控制按钮是否默认加载在地图上。

## 3.6 Animation options（动画选项） ##

fadeAnimation（淡出动画）：确定瓦片淡出动画是否可用。通常默认在所有浏览器中都支持CSS3转场，android例外。  
zoomAnimation（缩放动画）：确定瓦片缩放动画是否可用。通常默认在所有浏览器中都支持CSS3转场，android例外。  
markerZoomAnimation（注记缩放动画）：确定注记的缩放是否随地图缩放动画而播放，如果被禁用，注记在动画中拉长时会消失。通常默认在所有浏览器中都支持CSS3转场，android例外

# 4、Events（事件） #

click（点击）：用户点击或触摸地图时触发。  
dbclick（双击）：用户双击或连续两次触摸地图时触发。  
mousedown（鼠标按下）：用户按下鼠标按键时触发。  
mouseup（鼠标抬起）：用户按下鼠标按键时触发。  
mouseover（鼠标经过）：鼠标进入地图时触发。  
mouseout（鼠标移出）：鼠标离开地图时触发。  
mousemove（鼠标移动）：鼠标在地图上移动时触发。  
contextmenu（情景菜单）：当用户在地图上按下鼠标右键时触发，如果有监听器在监听这个时间，则浏览器默认的情景菜单被禁用。  
focus（聚焦）：当用户在地图上进行标引、点击或移动时进行聚焦。  
blur（变暗）:当地图失去焦点时触发。  
preclick（预先点击）：当鼠标在地图上点击之前触发。有时会在点击鼠标时，并在已存在的点击事件开始处理之前想要某件事情发生时用得到。  
load（载入）：当地图初始化时触发。（当地图的中心点和缩放初次设置时）  
viewreset（视图重置）：当地图需要重绘内容时触发。（通常在地图缩放和载入时发生）这对于创建用户自定义的叠置图层非常有用。  
movestart（移动开始）：地图视图开始改变时触发。（比如用户开始拖动地图）  
move（移动）：所有的地图视图移动时触发。  
moveend（移动结束）：当地图视图结束改变时触发。（比如用户停止拖动地图）  
dragstart（拖动开始）：用户开始拖动地图时触发。  
drag（拖动）：用户拖动地图时不断重复地触发。  
dragend（拖动结束）：用户停止拖动时触发。  
zoomstart（缩放开始）：当地图缩放即将发生时触发。（比如缩放动作开始前）  
zoomend（缩放结束）：当地图缩放时触发。  
autopanstart（自动平移开始）：打开弹出窗口时地图开始自动平移时触发。  
layeradd（添加图层）：当一个新的图层添加到地图上时触发。  
layerremove（图层移除）：当一些图层从地图上移除时触发。  
baselayerchange（基础图层改变）：当通过图层控制台改变基础图层时触发。  
locationfound（位置查找）：当地理寻址成功时触发（使用locate方法）。  
locationerror（定位错误）：当地理寻址错误时触发（使用locate方法）。  
popupopen（打开弹出框）：当弹出框打开时触发（使用openPopup方法）。  
popupclose（关闭弹出框）：当弹出框关闭时触发（使用closePopup方法）。

# 五、方法 #

使用方式参考如下：

this.map.setView([51.505, -0.09], 13);   //具体的参数可以参考官网

## 5.1、Methods for Modifying Map State（地图状态修改） ##

setView(设定视图)：设定地图（设定其地理中心和缩放），如果forceReset设置的是true，即使移动和缩放动作是合理的，地图也会重载，其默认值是fault。  
setZoom（设定缩放）：设定地图的缩放。  
zoomIn（放大）：通过delta变量放大地图的级别，1是delta的默认值。  
zoomOut（缩小）：通过delta变量缩小地图的级别，1是delta的默认值。  
fitBounds（使适合边界）：将地图视图尽可能大地设定在给定的地理边界内。  
fitWorld（使适合地域范围）：将地图视图尽可能大地设定在包含全部地域的级别上。  
panTo（平移至中心点）：将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。  
panInsideBounds（平移到某边界内）：平移地图到坐落于给定边界最接近的视图内。  
panBy（通过像素点平移）：通过给定的像素值对地图进行平移。  
invalidateSize（无效的大小）：检查地图容器的大小是否改变并更新地图，如果是这样的话，在动态改变地图大小后调用，如果animate是true的话，对地图进行更新。  
setMaxBounds（设置最大边界）：将地图限定在给定的边界内。  
locate（定位）：用地理定位接口获取用户位置信息，在成功定位或定位出错产生locationerror后解除location-found事件与定位数据，且将地图视图设定到检测的确切的用户的位置（如果定位失败则回到地域视图）。在Location Options中有更多详细内容。  
stopLocation（停止定位）：开始map.locate方法时停止预先检测位置信息。

## 5.2、 Methods for Getting Map State（获取地图状态） ##

getCenter（获取地图中心）：返回地图视图的地理中心。  
getZoom（获取缩放级别）：获取地图视图现在所处的缩放级别。  
getMixZoom（获取最小缩放级别）：返回地图最小的缩放级别。  
getMaxZoom（获取最大缩放级别）：返回地图最大的缩放级别。  
getBounds（获取边界）：返回地图视图的经纬度边界。  
getBoundsZoom（获取边界缩放级别）：返回适应整个地图视图边界的最大缩放级别。如果inside的设置时true，这个方法返回适应整个地图视图边界的最小缩放级别。  
getSize（获取大小）：返回现有地图容器的大小。  
getPixelBounds（获取像素边界）：返回地图视图在像素投影坐标系下的边界。（很多时候对用户自定义图层和叠加很有用）  
getPixelOrigin（获取像素原点）：返回地图图层像素投影坐标系下的左上角的点。（很多时候对用户自定义图层和叠加很有用）

## 5.3、Methods for Layers and Controls（图层控制） ##

<table> 
 <tbody> 
  <tr> 
   <td>方法</td> 
   <td>返回值</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>addControl(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#control" rel="nofollow">Control</a>&gt;&nbsp;control)</td> 
   <td>this</td> 
   <td>向地图添加给定的control</td> 
  </tr> 
  <tr> 
   <td>removeControl(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#control" rel="nofollow">Control</a>&gt;&nbsp;control)</td> 
   <td>this</td> 
   <td>从地图上移除给定的control</td> 
  </tr> 
  <tr> 
   <td>addLayer(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#layer" rel="nofollow">Layer</a>&gt;&nbsp;layer)</td> 
   <td>this</td> 
   <td>向地图添加给定的layer</td> 
  </tr> 
  <tr> 
   <td>removeLayer(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#layer" rel="nofollow">Layer</a>&gt;&nbsp;layer)</td> 
   <td>this</td> 
   <td>从地图上删除给定的layer</td> 
  </tr> 
  <tr> 
   <td>hasLayer(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#layer" rel="nofollow">Layer</a>&gt;&nbsp;layer)</td> 
   <td>Boolean</td> 
   <td>如果给定layer&nbsp;已经添加到map则返回true&nbsp;</td> 
  </tr> 
  <tr> 
   <td>eachLayer(&lt;Function&gt;&nbsp;fn,&nbsp;&lt;Object&gt;context?)</td> 
   <td>this</td> 
   <td>遍历地图上的layer，遍历行数的context可选 <pre>
<code>&nbsp;</code></pre> 
    <ol> 
     <li> <p><code>map.eachLayer(function(layer){ </code></p> </li> 
     <li> <p><code>layer.bindPopup('Hello');</code></p> </li> 
     <li> <p><code>});</code></p> </li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>openPopup(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#popup" rel="nofollow">Popup</a>&gt;&nbsp;popup)</td> 
   <td>this</td> 
   <td>关闭之前打开的popup时打开指定的popup（确保同一时间只有一个打开）</td> 
  </tr> 
  <tr> 
   <td>openPopup(&lt;String|HTMLElement&gt;&nbsp;content,&lt;<a href="http://leafletjs.com/reference-1.0.0.html#latlng" rel="nofollow">LatLng</a>&gt;&nbsp;latlng,&nbsp;&lt;<a href="http://leafletjs.com/reference-1.0.0.html#popup-option" rel="nofollow">Popup options</a>&gt;&nbsp;options?)</td> 
   <td>this</td> 
   <td>使用特定的内容和选项在地图上特定位置打开</td> 
  </tr> 
  <tr> 
   <td>closePopup(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#popup" rel="nofollow">Popup</a>&gt;&nbsp;popup?)</td> 
   <td>this</td> 
   <td>关闭之前使用openPopup打开的popup（或者指定的popup）</td> 
  </tr> 
  <tr> 
   <td>openTooltip(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#tooltip" rel="nofollow">Tooltip</a>&gt;&nbsp;tooltip)</td> 
   <td>this</td> 
   <td>打开特定的tooltip</td> 
  </tr> 
  <tr> 
   <td>openTooltip(&lt;String|HTMLElement&gt;&nbsp;content,&lt;<a href="http://leafletjs.com/reference-1.0.0.html#latlng" rel="nofollow">LatLng</a>&gt;&nbsp;latlng,&nbsp;&lt;<a href="http://leafletjs.com/reference-1.0.0.html#tooltip-option" rel="nofollow">Tooltip options</a>&gt;options?)</td> 
   <td>this</td> 
   <td>使用特定的内容和选项创建一个tooltip并打开</td> 
  </tr> 
  <tr> 
   <td>closeTooltip(&lt;<a href="http://leafletjs.com/reference-1.0.0.html#tooltip" rel="nofollow">Tooltip</a>&gt;&nbsp;tooltip?)</td> 
   <td>this</td> 
   <td>关闭参数中的tooltip</td> 
  </tr> 
 </tbody> 
</table>

addlayer（添加图层）：将图层添加到地图上。如果insertAtTheBottom的选项为true，图层添加时在所以图层之下。（在切换基底图时比较有用）  
removelayer（移除图层）：将图层在地图上移除。  
haslayer（是否有此图层）：如果添加的图层是当前图层则返回true。  
openPopup（打开弹出框）：当关闭前一个弹出框时弹出指定的对话框。（确定在同一时间只有一个打开并可用）  
closePopup（关闭弹出框）：关闭openPopup打开的弹出框。  
addControl（添加控制）：在地图上添加控制选项。  
removeControl（移除控制）：在地图上移除控制选项。

## 5.4、 Conversion Methods（转换方法） ##

latlngToLayerPoint（将经纬度添转变为图层上的点）：返回地图图层上与地理坐标相一致的点。（在地图上进行位置叠加时比较有用）  
layerPointToLatLng（将图层上的点转换为经纬度点）：返回给定地图上点的地理坐标系。  
containerPointToLayerPoint（容器点到图层点）：将于地图容器相关的点转换为地图图层相关的点。  
layerPointToContainerPoint（图层点到容器点）：将地图图层相关的点转换为地图容器相关的点。  
LatLngToContainerPoint（经纬度点到容器点）：返回与给定地理坐标系相符的地图容器的点。  
containerPointToLatLng（容器点转换为经纬度点）：返回给定地理容器点的地理坐标。  
project（投影）：将地理坐标投影到指定缩放级别的像素坐标系中。  
unproject（反投影）：将像素坐标系投影到指定缩放级别的地理坐标系中。（默认为当前的缩放级别）  
mouseEventToContainerPoint（鼠标点击事件到地图容器点）：返回鼠标点击事件对象的像素坐标（与地图左上角相关）。  
mouseEventToLayerPoint（鼠标点击事件到地图容器点）：返回鼠标点击事件对象的像素坐标（与地图图层相关）。  
mouseEventToLatLng（鼠标点击事件到经纬度点）：返回鼠标点击事件对象的地理坐标。

## 5.5、Other Methods（其他方法） ##

getContainer（获取容器）：返回地图容器对象。  
getPanes（获取地图边框）：返回不同地图对象的边框（叠加渲染)  
whenReady（准备就绪）：当地图的位置和缩放初始化好或是时间发生之后，运行给定的回调方法，通常传递一个函数内容。

# 6、属性 #

地图属性包括互动操作，允许你在运行环境中互动地控制地图行为，比如通过拖拽和点击缩放级别显示和不显示某要素。你也可以通过地图属性来接受默认的地图控制项，比如属性控制。  
dragging（拖拽）：地图拖拽处理程序，可以通过鼠标和触摸的形式。  
touchZoom（触摸缩放按钮）：触摸地图缩放处理程序。  
doubleClickZoom（双击缩放）：双击缩放处理程序。  
scrollWheelZoom（滚动缩放）：滚动缩放处理程序。  
boxZoom（矩形框缩放）：矩形框（利用鼠标拖动）缩放处理程序。  
keyboard（键盘）：键盘导向处理程序。  
zoomControl（缩放控制）：缩放控制。  
attributionControl（属性控制）：属性控制。

# 7、其他相关 #

## 7.1 、Locate options（位置选项） ##

watch（监听）：如果该值为真，则开始利用W3C的watchPosition方法监听位置变化情况（而不是指监听一次）。你可以通过map.stoplocate()方法来停止监听。  
setView（设置视图）：如果该值为真，则通过自动将地图视图定位到用户一定精度范围内的位置，如果地理定位失败则显示全部地图。  
maxZoom（最大级别）：在使用setView选项时视图缩放的最大级别。  
timeout（超时）：在触发locationerror事件之前等待地理定位的毫秒为单位的时间。  
maximumAge（最大生命周期）：位置监听的最大生命周期。如果比最后定位回复后毫秒用时短，则locate返回一个缓存位置。  
enableHighAccuracy（开启高精度）：开启高精度，参加W3C SPEC的描述。

## 7.2、Map Panes（地图窗口） ##

这是一个包括可以用来放置自定义图层的不同的地图窗口的对象。最大的区别是图层的叠置。  
mapPane（地图窗口）：包含其他地图窗口的窗口。  
tilePane（切片窗口）：切片图层的窗口。  
objectsPane（对象窗口）：包含除切片窗口以外所有窗口的窗口。  
shadowPane（隐含窗口）：用来隐藏图层的窗口（如标注的隐藏）。  
overlayPane（图层窗口）：这线段和多边形一类图层的窗口。  
markerPane（标注窗口）：标注图标的窗口。  
popupPane（弹出窗口）：弹出的窗口。