高德地图离线部署方案
需求详情:用离线方式部署高德地图,能够在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