[Pequeñas habilidades de front-end] Vue integra el mapa sin conexión de Baidu

El proyecto Vue integra el mapa fuera de línea de Baidu

Encontré un requisito en el trabajo. Si quiero usar el mapa de Baidu en la intranet, entonces debe ser un mapa fuera de línea. Después de consultar algunas publicaciones de blog, también encontré varios problemas durante el proceso de desarrollo. Haré un registro aquí y espero Para guiarte Para evitar trampas, también me doy un resumen del desarrollo de los últimos dos días.

necesidad:

• Usar el mapa de Baidu en la intranet

• Solo muestre el mapa de la ciudad de Zhengzhou y encierre en un círculo el contorno del mapa de la ciudad de Zhengzhou

• Soporte para dibujar puntos

• Soporte para dibujar líneas.

• Admite agregación multipunto

pila de tecnología

• Ver 2
• Mapa B

representaciones

comenzar

1. Proyecto de construcción

El andamiaje de Vue no entrará en detalles. De forma predeterminada, ha creado un proyecto vue-cli en este momento. En este momento, cree una publiccarpeta debajo de la carpeta staticy coloque los recursos que necesitamos en esta carpeta. El archivo se proporcionará más adelante. Preste atención a la ruta, asegúrese de prestar atención a la ruta, la ruta en el archivo se ha cambiado durante mucho tiempo.

2. Descripción del documento y método para evitar pits

• imágenes: iconos en el mapa, como árboles, edificios, etc.
• módulos: módulos js requeridos
• bmap_offline_api_v3.0.min.js: cree mapas, incluidas las API para varias operaciones de mapas, etc.
• m4.png: ícono de agregación, la imagen morada en la imagen de arriba (se puede reemplazar según el estilo del proyecto)
• map_load.js: inicialice algunas variables globales, incluida la ruta del archivo, la ruta de carga del mapa de mosaicos, la carga dinámica de archivos bmap_offline_api_v3.0.min.js, etc.
• MarkerClusterer_min.js: implementar la agregación de puntos
• TextIconOverlay_min.js: relacionado con la agregación de puntos

Modificar el tren directo:

1. Procesamiento de ruta de mapa de teselas

map_load.js, Vi la configuración escrita por el blogger en Internet tiles_dir, pero no hay configuración tiles_path, lo que significa que solo podemos colocar la imagen del mosaico en nuestro propio proyecto. Hay muchas imágenes, y el proyecto Vue se compila y falla directamente, así que para la conveniencia del desarrollo, todavía ponemos la imagen del mosaico. La imagen se coloca en el servidor y podemos importarla aquí. tiles_pathConfigure la dirección del servidor en .

Al pisar el hoyo 1: Nota: no solo map_laod.jsconfigure su propio js en comparación, debe prestar atención al bmap_offline_api_v3.0.jsmétodo de configuración de la dirección del mosaico

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

Correspondiente bmap_offline_api_v3.0.jsal código de carga del módulo, nota: el tuyo puede ser diferente al mío, por lo que debes map_load.jscorresponder a él.

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

Por supuesto, en la etapa de desarrollo, primero podemos descargar la imagen del mosaico al local, crear una nueva carpeta dirNamey

luego usarla en la carpeta correspondiente: serve 你的文件夹名habilitar el servicio local. En este momento, también se puede acceder a la imagen con el dirección de enlace

Ahora configure nuestra ruta de mosaico:

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

2. Configuración de la ruta de carga del módulo

bmap_offline_api_v3.0.js

La dirección de nuestro módulo se coloca modulesdebajo de la carpeta, por lo que la configuración es la siguiente:

// 修改 加载本地模块文件，在 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. No se puede cargar el mapa

Nota: Un error en la ruta del mapa de mosaicos provocará un error en la carga del mapa. Asegúrese de mirar la ruta de configuración, si js no se puede cargar, ¡también es un problema de ruta, un problema de ruta! ! ! !

3. Preparación para la construcción del mapa

1. Contenedor

Como de costumbre, prepare un contenedor de mapa y establezca el tamaño del contenedor

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

<script>
    ....
</script>

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

2. Inicialización

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

Inicializar el mapa

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. Agregar punto, agregar agregación de puntos

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. Agregar líneas

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. Dibuja el borde de la ciudad

Podemos obtener estos datos a través de la API de mapas en línea. Después de obtenerlos, guarde los datos en un archivo line.jsy coloque el archivo src/dataen la carpeta del proyecto, para que podamos usarlo sin conexión.

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

Agregar datos de borde:

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)
}

Aquí está la dirección del proyecto: https://gitee.com/shanghaipingzi/offlinebmap

Descarga de imagen de mosaico

Extraiga los archivos en el disco de red de Baidu, luego ejecute el archivo exe y seleccione el nivel y la región para descargar

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

Si tiene alguna pregunta, deje un mensaje en el área de comentarios.
El artículo se basa en el código fuente abierto del mapa fuera de línea de un blogger. El blogger lo desarrolla en html puro. Sobre esta base, lo integré en Vue y agregué nuestros requisitos. Hay demasiados enlaces para verificar, si tiene la suerte de estar en los ojos del blogger, ¡por favor chatee en privado y cuelgue el enlace! ¡Gracias de nuevo bloguero!