[Front-end small skills] Vue integrates Baidu offline map

Vue project integrates Baidu offline map

I encountered a requirement at work. If I want to use Baidu map on the intranet, then it must be an offline map. After consulting some blog posts, I also encountered various problems during the development process. I will make a record here and hope to guide you. To avoid pitfalls, I also give myself a summary of the development of the past two days.

need:

• Use Baidu map in intranet

• Only display the map of Zhengzhou City, and circle the outline of the map of Zhengzhou City

• Support for drawing points

• Support for drawing lines

• Support multi-point aggregation

technology stack

• View 2
• BMap

renderings

start

1. Project construction

Vue scaffolding will not go into details. By default, you have created a vue-cli project at this moment. At this time, publiccreate a folder under the folder staticand put the resources we need into this folder. The file will be given later. Pay attention to the path, be sure to pay attention to the path, the path in the file has been changed for a long time.

2. Document description and pit avoidance method

• images: icons on the map, such as trees, buildings, etc.
• modules: required js modules
• bmap_offline_api_v3.0.min.js: Create maps, including APIs for various map operations, etc.
• m4.png: aggregation icon, the purple image in the above image (can be replaced according to the project style)
• map_load.js: Initialize some global variables, including file path, tile map loading path, dynamic loading of bmap_offline_api_v3.0.min.js files, etc.
• MarkerClusterer_min.js: implement point aggregation
• TextIconOverlay_min.js: point aggregation related

Modify the through train:

1. Tile map path processing

map_load.js, I saw the configuration written by the blogger on the Internet tiles_dir, but there is no configuration tiles_path, which means that we can only place the tile image in our own project. There are many images, and the Vue project directly compiles and crashes, so for the convenience of development, we still put the tile image The picture is placed in the server, and we can import it here. tiles_pathConfigure the server address in .

Stepping on pit 1: Note: Do not only map_laod.jsconfigure your own js by comparison, you must pay attention to bmap_offline_api_v3.0.jsthe configuration method of the tile address

let bmapcfg = {
  'imgext'      : '.png',   //瓦片图后缀
  'tiles_dir'   : 'tiles',  //瓦片图文件夹
  'tiles_path'  : 'http://localhost:5000/', //如果在服务器上，需要配置服务器地址
  'tiles_hybrid': '',
  'tiles_self'  : ''
};

Corresponding bmap_offline_api_v3.0.jsto the module loading code, note: yours may be different from mine, so you must map_load.jscorrespond to it.

 var tdir =
 bmapcfg.tiles_path ? (bmapcfg.tiles_path + bmapcfg.tiles_dir) : bmapcfg.tiles_dir
 return tdir + '/' + b + '/' + e + '/' + a + bmapcfg.imgext // 使用本地的瓦片

Of course, in the development stage, we can first download the tile image to the local, create a new folder dirName,

and then use it in the corresponding folder: serve 你的文件夹名enable the local service. At this moment, the image can also be accessed with the link address.

Now configure our tile path :

let bmapcfg = {
  'imgext'      : '.png',   //瓦片图后缀
  'tiles_dir'   : 'tiles',       //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目录
  'tiles_path'  : 'http://localhost:5000/',
  ...
};

2. Module loading path configuration

bmap_offline_api_v3.0.js

Our module address is placed modulesunder the folder, so the configuration is as follows:

// 修改 加载本地模块文件，在 modules 目录下
console.log(a) //打印所需模块
if (a.length > 0) {
    
    
    for (i = 0; i < a.length; i++) {
    
    
        mf = bmapcfg.home + 'modules/' + a[i] + '.js'
        oa(mf)
    }
} else {
    
    
	f.kL()
}

3. The map cannot be loaded

Note: An error in the path of the tile map will cause an error in map loading. Be sure to look at the configuration path, if js cannot be loaded, it is also a path problem, a path problem! ! ! !

3. Preparation for map construction

1. Container

As usual, prepare a map container and set the container size

<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
    ....
</script>

<style lang="scss">
#container {
  height: 100vh;
  width: 100vw;
}
</style>

2. Initialization

 data() {
    
    
    return {
    
    
      map: null,
      mapPoints: [],
      markerClusterer: [],
    }
  },

Initialize the map

initMap() {
    
    
    let BMap = window.BMap
    this.map = new BMap.Map('container')
    console.dir(this.map)
    let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标
    this.map.centerAndZoom(point, 10) // 初始化地图，设置中心点坐标和地图级别
    //添加地图类型控件
    this.map.setMinZoom(10)
    this.map.setMaxZoom(18)
    this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    // 添加点
    this.addMarker()
    // 添加线
    this.addLine()
    // 添加郑州市的轮廓线
    this.addBorderLine()
},

3. Add point, add point aggregation

addMarker() {
    
    
      let BMap = window.BMap
      let BMapLib = window.BMapLib
      // 初始化要显示的点的坐标
      this.initPoints()
      let mapMarkers = []
      this.mapPoints.forEach((point) => {
    
    
        let marker = new BMap.Marker(point)
        mapMarkers.push(marker)
        this.map.addOverlay(marker)
      })
      let markerClusterer = new BMapLib.MarkerClusterer(this.map, {
    
    
        markers: mapMarkers,
        styles: [
          {
    
    
            url: './static/m4.png',
            size: new BMap.Size(90, 90),
          },
        ],
      })
      markerClusterer.setMinClusterSize(2)
      this.markerClusterer = markerClusterer
    },
    initPoints() {
    
    
      let BMap = window.BMap
      var point = new BMap.Point(113.5001, 34.60468) // 创建点坐标
      var point1 = new BMap.Point(113.6001, 34.61468) // 创建点坐标
      var point2 = new BMap.Point(113.7001, 34.62468) // 创建点坐标
      var point3 = new BMap.Point(113.9001, 34.63468) // 创建点坐标
      this.mapPoints.push(point)
      this.mapPoints.push(point1)
      this.mapPoints.push(point2)
      this.mapPoints.push(point3)
    },

4. Add lines

addLine() {
      let BMap = window.BMap
      let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标
      let point1 = new BMap.Point(113.7001, 34.62468) // 创建点坐标
      let polyline = new BMap.Polyline([point, point1], {
        strokeColor: 'red',
        strokeWeight: 1,
        strokeOpacity: 1,
      })
      this.map.addOverlay(polyline)
    },

5. Draw the edge of the city

We can obtain this data through the online map API. After obtaining it, save the data in a file line.jsand put the file src/datain the project folder, so that we can use it offline

let boundary = new BMap.Boundary()
boundary.get('郑州市', (rs) => {
// res: 郑州市边缘数据
})

Add edge data:

addBorderLine() {
    
    
    let BMap = window.BMap
    let pointArr = []
    dataLine.forEach((pointDetail) => {
    
    
        var point = new BMap.Point(pointDetail.lng, pointDetail.lat) // 创建点坐标
        pointArr.push(point)
    })
    let polyline = new BMap.Polyline(pointArr, {
    
    
        strokeColor: 'red',
        strokeWeight: 3,
        strokeOpacity: 1,
    })
    this.map.addOverlay(polyline)
}

Here is the project address: https://gitee.com/shanghaipingzi/offlinebmap

Tile image download

Extract the files in the Baidu network disk, then run the exe file, and select the level and region to be downloaded

百度网盘链接：https://pan.baidu.com/s/16sOJ9ws7HCgNH3EMf7Ejyg?pwd=0q0e 
提取码：0q0e

If you have any questions, please leave a message in the comment area.
The article draws on the open source code of a blogger's offline map. The blogger develops it in pure html. On this basis, I integrated it into Vue and added our requirements. There are too many links to check, if you are lucky enough to get into the eyes of the blogger, please private chat and hang up the link! Thanks again blogger!