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

藍波丶坎迪發表於2019-04-28
Vue地圖
一、 功能分析

​ 接著上一篇文章。地圖載入成功之後，接下來要開始對對地圖的常見功能的實現，一個地圖的基本功能包括:地圖顯示，平移，放大，縮小，定位 等功能。

二、實現思路
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

<template>
  <div class="map-container" id="map-container"></div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "mapView",
  components: {},
  data() {
    return {
      map: null,
      OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    };
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container", {
      zoomControl: true
    });
    
    this.$utils.map.createTileLayer(this.map, this.OSMUrl, {});
    this.map.setView([51.505, -0.09], 13);
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>
複製程式碼

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

2） 自定義放大縮小功能

​ 大多數時候，專案中為了配合整體的UI風格，需要實現自定義控制元件的樣式來實現縮放工。因此，這裡結合Vuejs的特性，我自定義了一個縮放功能的元件。元件的功能包括，放大，縮小，以及回到初始化點。

// src/components/NavigationCtrl.vue
<template>
  <div class="map-navigation">
    <ul>
      <li @click="$emit('zoomIn')">+</i>
      <li @click="$emit('resetMap')">·</i>
      <li @click="$emit('zoomOut')">-</i>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mapNavigation"
};
</script>
<style lang="less">
.map-navigation {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 999;

  width: 30px;
  box-shadow: 0px 0px 50px 2px rgba(0, 0, 0, 0.35);
  background-color: #fff;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;

    li {
      width: 30px;
      height: 28px;
      font-size: 16px;
      line-height: 28px;
      cursor: pointer;
    }

    li:hover {
      background-color: rgb(212, 224, 246);
    }
  }
}
</style>
複製程式碼

然後在 map.vue 引用元件，這裡需要注意 Vuejs 中父元件與子元件之間的事件繫結：

// src/views/Map.vue

<template>
  <div class="map-container">
    <div id="map-container"></div>
    <NavigationCtrl @zoomIn="zoomIn" @zoomOut="zoomOut" @resetMap="resetMap"></NavigationCtrl>
  </div>
</template>

<script>
// @ is an alias to /src
import NavigationCtrl from "@/components/NavigationCtrl.vue";

export default {
  name: "mapView",
  components: { NavigationCtrl },
  data() {
    return {
      map: null,
      OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    };
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container", {
      zoomControl: false
    });
    this.$utils.map.createTileLayer(this.map, this.OSMUrl, {});
    this.map.setView([51.505, -0.09], 13);
  },
  methods: {
    zoomIn() {
      this.map.zoomIn();
    },
    zoomOut() {
      this.map.zoomOut();
    },
    resetMap() {
      // 
      this.map.setView([51.505, -0.09], 13);
    }
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#map-container {
  width: 100%;
  height: 100%;
}
</style>
複製程式碼

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

這樣基本上開始提到的 地圖顯示，平移，放大，縮小，定位 就算都完成了。最後一個定位除了使用 setView 方法之外，也可用根據具體的需求採用panTo, flyTo等方法獲得更好的互動效果。

panTo flyTo
Vue-CLI and Leaflet（2）：地圖基本操作（放大，縮小，平移，定位等）
Vue-CLI and Leaflet（2）：地圖基本操作（放大，縮小，平移，定位等）
四）總結

以上就是第二章的全部內容，這些功能過分簡單基礎，顯得有點無聊。可WebGIS地圖中很多實際業務中的功能都是一些簡單的功能組合而成。後續的博文中也會涉及到部分複雜的功能，請看到的各位不吝賜教。

相關文章