This is the first day of my participation in the August Text Challenge.More challenges in August

preface

Based on the limitations of the Intranet, so the need to achieve an offline version of the map. When it comes to offline maps, we should first talk about online maps. Autonavi, Tencent and other maps we usually use can be seen in many software, such as taxi software, which generally shows user positioning, route and point function. The related Api is also perfect. For example, Amap provides a lot of functions, but the online service cannot be used in the Intranet, while OpenLayers is an open source JS library for displaying maps in the Web browser.

Offline map implementation principle

As can be seen from the following figure, when the map is zoomed, it actually shows the map of the corresponding level location. Therefore, to show the offline map, it is necessary to obtain the corresponding map resources first. Usually, the tile map of the corresponding format is downloaded by the downloader.

Tile map generally has several types: 1. Google tile 2. Original tile 3. Standard TMS tile 4. CGISServer tile 5. Water is pumped through the tile.

Openlayers is used in VUE

The official website provides many cases, but there is no documentation in Chinese.

    npm install ol
Copy the code

Initialize the map

const tileLayer = new TileLayer({ source: new XYZ({ url: `tiles/{z}/{x}/{y}.png`})}) specifies the path to get the tile mapnew Map({
        layers: [Map Resources]view: new View({
          center: fromLonLat([xxx,xxx],// Map center point
          zoom: 14.// Zoom level
          minZoom: 0.// Minimum zoom level
          maxZoom: 18.// Maximum zoom level
          constrainResolution: true
        }),
        target: this.$refs.olMap/ / DOM container
      })
Copy the code

In this way, we can preliminarily obtain a map instance. In use, we only need to lay down relevant map resources in advance and pass in the longitude and latitude of the central point to see the corresponding map. The larger the level is, the larger the volume of map resources will be, so we need to store map resources on the server.