Vue-cli and Leaflet (1) : Displays a map

An overview,

This paper will describe how to combine leaflet.js in vue. js project to develop map-related functions. Readers are required to have some background knowledge of Vuejs and LeafletJS. Using Leaflet in vue. js Under this theme, I will share the development experience I have learned in practical work with readers, and summarize common examples of map function implementation for readers’ reference. First of all, Vue. Js and Leaflet are briefly introduced.

1) Vuejs

2) Leaflet

The title of the Leaflet official website is very straightforward and simple:

Leaflet is a very lightweight WebGIS library, which is an interactive map optimized for mobile terminal and an open source Javascript library. Combined with its surrounding resources, it is sufficient to cover the vast majority of functions for Web GIS that are not so complex to analyze functional requirements.

While using Leaflet in vue.js in this series you will see everything as follows:

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.

Two, environment construction and code implementation

1) Development environment construction

The machine I use for development is Win10 or iMac. Development using IDES is also quite mainstream VS Code. The development environment is relatively simple:

1. Nodejs must be installed. Refer to the website

2. Vue-cli standard tools must be installed. Refer to the website

   npm install -g @vue/cli
   Copy the code

2) Create vue-CLI project

Vue-CLI After the installation is complete, create a Vue project and run the command.

vue create leaflet-tutorail
Copy the code

The official website for creating a Vue project is very detailed. Please refer to it if necessary. After the installation is complete, you should get such a project directory.

Usually, after some simple engineering modularization, the project directory is as follows, and the reference in main.js is modified to mount the toolset module in the project on the Vue object:

Vue.prototype.$utils = utils;
Copy the code

3) Install the Leaflet in VUE

npm install leaflet --save
Copy the code

After the leaflet package is installed successfully, it needs to be introduced into the Vue project. What I usually do is to separate the leaflet works as tools for map modules into map.js in a module. In this way, if the logic of the function is complicated or some loading options need to be customized, map.js maintenance can make the code more concise, improve the code readability, maintainability.

It should be noted that the style of Leaflet. CSS should also be introduced when quoting Leaflet.

// utils/map.js

import "leaflet/dist/leaflet.css"
import $L from "leaflet";

export default{};Copy the code

Also mount the map module in the toolset:

import map from "./map";

export default {
  map
};
Copy the code

4) Loading a map is simple

After the above three preparations, you can start the operation of map display.

A simple way to load a map is like this:

1. Create a map object.

   Map objects as opposed to containers containing geographical resources. Geographic resources include everything you see in the map view window, such as common map service resources, geographic graphics (points, lines, planes), and map controls. The creation method is also simple. In my project, I need to add the following methods to create map objects:

   // utils/map.js
   
   import "leaflet/dist/leaflet.css"
   import $L from "leaflet";
   
   const createMap = (divId, options) = > {
     let map = $L.map(divId, options);
     return map;
   };
   
   export default { createMap };
   Copy the code

   After the map object is successfully created, you can see the map view window as shown below:

   // src/views/Map.Vue
   
   <template>
     <div class="map-container" id="map-container"></div>
   </template>
   
   <script>
   export default {
     name: "map",
     components: {},
     data(){
       return {
         map: null
       }
     },
     mounted() {
       this.map = this.$utils.map.createMap("map-container");
     }
   };
   </script>
   <style lang="less">
   .map-container {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
   </style>
   Copy the code

2) Load the map service

Having a map container does not mean you can see the map. Map views need to add layers or graphics to display content. Here I modified the example on the official website, adding an Open Street Map service:

First add layer loading methods to map.js. It should be noted that the method of creating layers in leaflet is asynchronous, so I use async and await to deal with asynchronous problems.

// src/utils/map.js

const createTileLayer = async (map, url, options) => {
  let tileLayer = await $L.tileLayer(url, options);
  tileLayer.addTo(map);
  return tileLayer;
};
Copy the code

Next, call this method again on the map page to display the map.

// src/views/Map.Vue <template> <div class="map-container" id="map-container"></div> </template> <script> 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"); / / load the open street map layer service this. $utils. Map. CreateTileLayer (enclosing map, enclosing 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

This completes the first step of using Leaflet in vue-CLI.

3) the summary

This series of articles is a summary of previous work. The content may be relatively simple, hopefully helpful to those who see it. At the same time also hope to have a powerful god to see can give advice.