Vue-CLI and Leaflet（2）：地图基本操作（放大，缩小，平移，定位等）

（一）Vue-CLI and Leaflet：起步 - 在 Vue-CLI 中使用 Leaflet

（二）Vue-CLI and Leaflet:地图基本操作（放大，缩小，平移，定位等）

（三）Vue-CLI and Leaflet: 添加 marker, polyline, polygon

（四）Vue-CLI and Leaflet: 添加 tooltips 和 popup

（五）Vue-CLI and Leaflet: 点、线、面 绘制 与 量测

（六）Vue-CLI and Leaflet: 添加各类图图层 ( AGS, OGC )

（七）Vue-CLI and Leaflet: 图层控制基本功能的实现

（八）Vue-CLI and Leaflet: AGS 属性查询与点图查询

一、 功能分析

​ 接着上一篇文章。地图加载成功之后，接下来要开始对对地图的常见功能的实现，一个地图的基本功能包括:地图显示，平移，放大，缩小，定位 等功能。

二、实现思路

1）平移

​ 通常 WebGIS 中地图平移是最为基本且常用的功能，地图会默认开启平移功能。通常情况下都不需要开发者自己去实现 平移的功能。

2）放大与缩小

​ 放大，缩小也一样，地图通常会默认开启此项功能。而大多数情况下，WebGIS 库会提供一些如图所示的控件来实现一级一级地放大的功能。因此， 放大与缩小实现的办法有两种。

1. 自带的控件

   L.map('map', {
    zoomControl: true，
    scrollWheelZoom：true //默认开启鼠标滚轮缩放
   });
   复制代码

2. 通过地图的API实现

   // 逐级放大, delta 默认 1
   map.zoomIn( ?delta )
   
   // 逐级缩小, delta 默认 1
   map.zoomOut( ?delta )
   复制代码

三）代码实现

​ 1）自带的控件

​ 实现很简单，默认情况下 Leaflet地图对象的 zoomControl 是开启的。通常情况下时需要将 zoomControl 关闭。在我们的工程中则应该工程的这个位置去控制：

 // src/views/Map.vue





复制代码

2） 自定义放大缩小功能

​ 大多数时候，项目中为了配合整体的UI风格，需要实现自定义控件的样式来实现缩放工。因此，这里结合Vuejs的特性，我自定义了一个缩放功能的组件。组件的功能包括，放大，缩小，以及回到初始化点。

// src/components/NavigationCtrl.vue




复制代码

然后在 map.vue 引用组件，这里需要注意 Vuejs 中父组件与子组件之间的事件绑定：

// src/views/Map.vue





复制代码

这样基本上开始提到的 地图显示，平移，放大，缩小，定位 就算都完成了。最后一个定位除了使用 setView 方法之外，也可用根据具体的需求采用panTo, flyTo等方法获得更好的交互效果。

panTo	flyTo

四）总结

以上就是第二章的全部内容，这些功能过分简单基础，显得有点无聊。可WebGIS地图中很多实际业务中的功能都是一些简单的功能组合而成。后续的博文中也会涉及到部分复杂的功能，请看到的各位不吝赐教。