一、概述
眾所周知，目前常見的地圖（高德、百度、騰訊等）只提供在線API服務，對于一些內網應用而言，如果需要使用地圖展示，則由于不能訪問互聯(lián)網而無法使用類似的第三方地圖服務。
本文，通過將高德地圖瓦片數(shù)據(jù) 和 在線JS API做了本地部署，并修改API，將其所有的網絡請求均變?yōu)楸镜卣埱?。成功實現(xiàn)了私有化部署！
二、爬取瓦片數(shù)據(jù)
1.獲取地圖下載器
這是一個開源項目，使用Java開發(fā)的地圖瓦片圖下載工具，支持OpenStreetMap、天地圖、谷歌地圖、高德地圖、騰訊地圖、必應地圖的XYZ瓦片圖下載與合并。點擊以下任意鏈接獲取工具。
1）源碼下載，編譯后使用
2）百度網盤下載編譯后的程序，下載后直接使用即可。
鏈接：https://pan.baidu.com/s/1odjFKYzefLnu6c1223Fb_w?pwd=eocr
提取碼：eocr
2.下載地圖瓦片數(shù)據(jù)
PS：程序運行需要在全英文路徑中
1）下載解壓運行run.bat
2）選擇地圖資源 -> 選擇省份/城市 -> 下載地圖
3）選擇層級我這里不需要太詳細，所以到12層就夠了，層級越高瓦片越多。命名風格選擇/{z}/{x}/{y}.png，選擇下載位置，點擊下載開始下載
三、獲取高德離線開發(fā)包
高德離線包已經存至我的Gitee項目中：（點擊鏈接下載即可）高德地圖離線開發(fā)包
如何使用高德地圖請參考官方文檔：快速上手-地圖 JS API 2.0 | 高德地圖API
四、如何在項目中使用
以vue項目為例：
1.將下載的瓦片數(shù)據(jù)和離線包放到項目的public下
2.在MapView.vue中直接加載下載的amap文件夾下的AMap3.js，其余文件不可刪除?。?！如下圖：
import "../../public/amap/AMap3.js"
3.在頁面中定義地圖顯示元素：
<div id='map-container' style="width: 100%; height: 600px;">
4.在代碼中直接new AMap即可，vue項目的話不需要再去導入map插件配置，如下圖直接使用即可。
MapView.vue的全部代碼如下：
<template>
<div id='map-container' style="width: 100%; height: 600px;">
</div>
<div>
<button @click="handleMarker()">標記</button>
<button @click="handlePolyline()">折線</button>
<button @click="handleTextmark()">文本標記</button>
</div>
</template>
<script>
import "../../public/amap/AMap3.js"
export default {
data() {
return {
mapObj: null,
}
},
methods: {
initMap() {
// 自定義地圖層
const base_url = "/"
const layers = [new AMap.TileLayer({
getTileUrl: function (x, y, z) {
return `${base_url}MAP_zxy/${z}/${x}/${y}.png`;
},
opacity: 1,
zIndex: 99,
})]
this.mapObj = new AMap.Map('map-container', { // 設置地圖容器id
resizeEnable: true,
zoom: 15,
rotateEnable: true,
pitchEnable: true,
center: [113.098980, 23.361340],
defaultCursor: 'pointer',
showLabel: true, //是否顯示文字標注
layers: layers,
})
},
handleMarker() {
const marker = new AMap.Marker({
position: [113.098980, 23.361340], //位置
});
this.mapObj.add(marker); //添加到地圖
},
handlePolyline() {
const lineArr = [
[113.098980, 23.361340],
[113.092980, 23.361340],
[113.092980, 23.366340]
];
const polyline = new AMap.Polyline({
path: lineArr, //設置線覆蓋物路徑
strokeColor: "red", //線顏色
strokeWeight: 5, //線寬
strokeStyle: "solid", //線樣式
});
this.mapObj.add(polyline);
},
handleTextmark() {
// 創(chuàng)建純文本標記
let text = new AMap.Text({
text:'粵電花都燃氣電廠',
anchor:'center', // 設置文本標記錨點
draggable:true,
cursor:'pointer',
angle:10,
style:{
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'white',
'width': '10rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '20px',
'color': 'blue'
},
position: [113.098980, 23.362240]
});
text.setMap(this.mapObj);
let text1 = new AMap.Text({
text:'雙一橡膠',
anchor:'center', // 設置文本標記錨點
draggable:true,
cursor:'pointer',
angle:10,
style:{
'padding': '.75rem 1.25rem',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'white',
'width': '10rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
'text-align': 'center',
'font-size': '20px',
'color': 'blue'
},
position: [113.092980, 23.366340]
});
text1.setMap(this.mapObj)
},
},
mounted() {
this.initMap()
}
}
</script>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
display: flex;
align-items: center;
}
}
</style>
應用效果如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-761704.html
聲明：本項目僅供個人學習研究使用，如應用于商業(yè)項目，請先獲得高德公司授權！一切法律后果由使用者承擔，特此聲明！文章來源地址http://www.zghlxwxcb.cn/news/detail-761704.html
到了這里，關于手把手教你搭建個人地圖服務器（高德離線部署解決方案）：獲取地圖瓦片數(shù)據(jù)、高德JS API、私有化部署和調用。。。的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
