Vue地图 移动缩放功能

Vue 地图demo开发记录

思路规划

基础构成：

1.用于被显示的base地图，可以用svg等矢量图形文件来表示。

2.用于控制地图缩放的“放大”，“缩小”按钮组件。

3.用于控制地图显示视图移动的“↑”，“↓”，“←”，“→”按钮组件。

构成总结：根据以上的素材，或者用更贴合vue框架的语言来说，拥有以上组件，可以完成一个地图组件所需的基本功能，即:

• 地图显示
• 地图缩放
• 地图视图移动

由此脑海里已经有了一个大致的地图组件的雏形（大概长这样）

实际在项目中遇到的情况很可能就是从这一步开始的，按照画面的式样去做需求分析，这里为了记叙一个完整的思路，所以引进一下前面的构思做铺垫。

目录结构设计：

有了画面和初步的功能分析，现在来思考一下具体实现的框架。
由于现在这个地图充其量不过是画面的一个组件，或者通俗一点说是画面的一个小的功能，所以整体还是采用画面包含组件的结构来部署资源，如下：

• 画面文件夹
  • 组件文件夹
    • Map.vue
    • MoveUpButton.vue
    • MoveDownButton.vue
    • …(左右按钮)
    • ZoomInButton.vue
    • ZoomOutButton.vue
  • ShowMapPage.vue

到此为止需求分析明确了，目录结构也很清晰，可以着手实现功能了。

功能作成（coding）

分析功能

在着手做以前，最好脑子里可以先过一遍，我到底需要实现几个功能，尤其是试做一个全新的机能，让自己先有点谱，比做到哪里算哪里要有建设性的多。
为了做这样的一个可以完成显示，移动控制和缩放功能的地图，我需要提出疑问：
1.固定大小的矢量图形地图，如何缩放？
2.如何来控制显示区域的移动？

带着疑问，根据拿到的素材，即svg文件做了简单分析。
svg的显示原理是其实是通过viewBox属性去控制的，本身只是一个固定像素的矢量图形。
这时只要简单地百度一下就会知道viewBox的显示原理。好记性不如烂笔头，这里也记录一下我的分析和理解。
做一个简单的svg画布，宽为1000，高为800
放一些用于标记位置坐标的矩形，宽高都为200，并在对应的矩形中写上当前矩形右下角到画布起点（左上角）的横向距离和纵向距离，目的是为了标定了画布起点到该矩形的范围。

<svg width="1000" height="800" style="border: 1px solid steelblue" viewBox="0 0 1000 800">
			<rect x="0" y="0" height="200" width="200" fill="pink"></rect>
			<rect x="0" y="200" height="200" width="200" fill="skyblue"></rect>
			<rect x="0" y="400" height="200" width="200" fill="pink"></rect>
			<rect x="0" y="600"