I. Functional analysis

Pick up where you left off. After the successful loading of the map, the next step is to start the realization of the common functions of the map. The basic functions of a map include: map display, translation, zoom in, zoom out, positioning and other functions.

Second, implementation ideas

1) translation

Generally, map translation is the most basic and commonly used function in WebGIS, and the map will enable the translation function by default. In most cases, you don’t need to implement panning yourself.

2) Zoom in and out

Zooming in and out is the same. Maps usually have this function enabled by default. In most cases, WebGIS libraries will provide some controls as shown in the figure to achieve the function of zooming in level by level. Therefore, there are two approaches to scaling up and scaling down implementations.

  1. Built-in controls

    L.map('map', {
 zoomControl: true, scrollWheelZoom:true // Mouse wheel zooming is enabled by default
});
Copy the code

  2. Through the map API implementation

    // Step by step, delta defaults to 1map.zoomIn( ? delta )// Step by step, delta defaults to 1map.zoomOut( ? delta )Copy the code

Three) code implementation

1) Built-in controls

The implementation is simple; zoomControl for Leaflet map objects is turned on by default. ZoomControl should normally be turned off. In our project, the position of the project should be controlled:

 // 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>
Copy the code

2) Custom zoom in and out function

Most of the time, in order to match the overall UI style, you need to implement custom control styles for scaling. So, here, in combination with the features of Vuejs, I made a custom component for scaling. Component functions include zooming in, zooming out, and returning to the initialization point.

// 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>
Copy the code

We then reference the component in map.vue, where we need to note the event binding between the parent and child components in 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>
Copy the code

So basically the map display, pan, zoom in, zoom out, and position are all done. Finally, in addition to using setView method, panTo, flyTo and other methods can also be adopted according to specific requirements to obtain better interactive effects.

panTo flyTo

4) summary

That’s the end of Chapter 2. These features are too simple and basic to be boring. However, many practical functions in WebGIS map are composed of some simple functions. Some of the more complex features will be covered in subsequent posts, please feel free to comment on them.



directory

Vue-cli and Leaflet: Start using the Leaflet in VUe-CLI

(2) VUE-CLI and Leaflet: basic map operations (zoom in, zoom out, translation, positioning, etc.)

Vue-cli and Leaflet: Add marker, polyline, polygon

Vue-cli and Leaflet: Add tooltips and popup

Vue-cli and Leaflet: point drawing

Vue-cli and Leaflet: line drawing

(7) VuE-CLI and Leaflet: surface painting system

Vue-cli and Leaflet: Load Esri ArcGIS Map Service

(9) VUE-CLI and Leaflet: layer control implementation of basic functions

(10) VUE-CLI and Leaflet: AGS attribute query and point map query

Vue-cli and Leaflet: point aggregation leaflet. markerCluster

Please refer to my GitHub for the source code. Since the article is written at the same time as coding, the source code in GitHub may be a little confused, you can find the corresponding code according to the function. Later will be sorted out and improved.