高德地图离线部署方案

站长

2024年04月14日 20:07 · 阅读数 5

需求详情：用离线方式部署高德地图，能够在web端访问离线地图。

在线使用

首先不考虑离线，要对高德地图的api有足够了解。高德地图的api的旧版本是1.4.15，新版本是2.0以上。高德地图JSAPI v1.4 高德地图JSAPI v2.0

两个版本的api会有差别，注意区分。

以下是一个1.4.15版本的例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=5567a49cbd225f5a1923de1577f0a965"></script>

<script>
    var map = new AMap.Map('container', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
        zoom:12, // 初始化地图层级
        center: [118.6218, 24.7363], // 初始化地图中心点
    });
    AMap.plugin(['AMap.ToolBar','AMap.Geolocation'],function(){
      map.addControl(new AMap.ToolBar())
      let geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 1000,
        position: 'LB',
        zoomToAccuracy: true
      })
      map.addControl(geolocation)
      geolocation.getCurrentPosition()
      AMap.event.addListener(geolocation, 'complete', function(e){
        console.log(e);
      })
      AMap.event.addListener(geolocation, 'error', function(e){
        console.log(e);
      })
    })
</script>
</body>
</html>

离线使用前准备

离线使用的思路是，把jsapi的核心代码下载下来，然后把使用到的地图数据也下载到本地自己保存，让api直接调用本地保存的地图数据显示。

技术核心是参考网上的文章（高德地图离线加载方案）

具体操作

npm create vue@latest 根据提示创建一个简单的vue项目，不需要vue-router。把下载下来的amap包放在libs文件夹下，amap包

把amap包放在项目src/libs目录下。这里使用的是2.0.1版本的jsapi。

修改src/libs/amap/AMap.js

    let base_url = window.location.origin + window.location.pathname
    const _tileUrl = `${base_url}/src/libs/amap/2.0.1`;
    const mapsplugin = `${base_url}/src/libs/amap/mapsplugin.js`
    const init = `${base_url}/src/libs/amap/init.js`

编辑App.vue

<script setup>
import { onMounted } from 'vue';
const mapUrl = '.'
console.log('created');
let script = document.createElement('script')
script.src = `${mapUrl}/src/libs/amap/AMap.js`
document.head.appendChild(script)
let map = null
const startLngLat = [118.6218,24.7363]
onMounted(() => {
  console.log('onMounted');
  setTimeout(() => init(),3000)
})
const init = () => {
  const layers = [new AMap.TileLayer({
    getTileUrl: function(x,y,z){
      return `${mapUrl}/MAP_ZXY/${z}/${x}/${y}.png`
    },
    opacity: 1,
    zIndex: 99
  })]
  map = new AMap.Map('container', {
    viewMode: '2D',
    zoom: 12,
    center: startLngLat,
    layers: layers
  })
  AMap.plugin(['AMap.ToolBar'],() => {
    map.addControl(new AMap.ToolBar())
  })
}
</script>

<template>
  
  <div class="map">
    <div id="container"></div>
  </div>
</template>
<style scoped>
#container{
    width: 100vw;
    height: 100vh;
}
</style>

在onMounted周期里特地做了个延时等待AMap加载完成，然后定义了layers，在创建地图的时候指定使用layers，这样在获取地图图片的时候就会从配置好的路径去拿。资源的路径根据项目的实际情况填写。这里我把地图瓦片资源放在根目录的MAP_ZXY目录下。（实际部署的时候应该单独放在服务器的静态资源目录。）

运行项目即可看到首页可以显示离线地图。

高德地图离线部署方案目前这个amap包里面包含了ToolBar，Driving，MoveAnimation等插件，如果其他插件可以用在线地图模式先下载，然后在浏览器的application里面找找源代码。

参考

高德地图离线参考方案

转载自:https://juejin.cn/post/7341962661825429555