核心是需要下載地圖瓦片放在本地，脫離在線地圖服務(wù)，實現(xiàn)離線加載地圖。
使用BIGMap工具下載地圖離線瓦片到本地 下載地址：http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-全能版
需要注冊試用版（免費）
試用版可以下載到16級別的瓦片，單次下載不能超過100M
關(guān)于單次下載不能超過100M的問題 想到是否可以分多次框選區(qū)域去下載 得出結(jié)論是不行 因為分塊下載的文件 同級別瓦片的文件名都是一樣的 算法是根據(jù)瓦片名字去一一對應(yīng)加載到屏幕相應(yīng)xy位置上的。
下載瓦片時也可以通過選擇行政區(qū)域來進(jìn)行區(qū)域的劃分
2、但是可以分級別去下載，然后再集成加載。
免費的可以下載谷歌、arcgis、TMS服務(wù)的瓦片，我下載的是arcgis服務(wù)的高德地圖瓦片。
關(guān)于地圖渲染流程：
電子地圖涉及幾種坐標(biāo)系， 每種坐標(biāo)的計量單位如下：經(jīng)緯度是球面坐標(biāo)，我們?nèi)粘Ｊ褂媒?jīng)緯度單位的是角度（deg），
在進(jìn)行投影計算時需要換算為弧度（rad） 墨卡托投影得到的二維坐標(biāo)單位是米（m）；電子屏幕坐標(biāo)的單位是像素（px）。
前端拿到的地圖數(shù)據(jù)中絕大多數(shù)是墨卡托坐標(biāo)，很小一部分是經(jīng)緯度坐標(biāo)。墨卡托或經(jīng)緯度坐標(biāo)需要先被換算成屏幕坐標(biāo)，最后被CSS拼接或WebGL渲染。
加載本地arcgis算法如下：
AMapLoader.load({
key: "", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: ["AMap.Scale","AMap.DistrictSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
var googleMapLayer = new AMap.TileLayer({
getTileUrl: function (a, b, c) {
var oo = "00000000";
var zz = c;
var z = "L" + zz;
var xx = a.toString(16);
var x = "C" + oo.substring(0, 8 - xx.length) + xx;
var yy = (b - 1).toString(16); //注意此處，計算方式變了
var y = "R" + oo.substring(0, 8 - yy.length) + yy;
return "/arcgis_layers/" + z + "/" + y + "/" + x + ".jpg";
},
opacity: 1,
zIndex: 99,
});文章來源：http://www.zghlxwxcb.cn/news/detail-401391.html
this.map = new AMap.Map("container", {
resizeEnable: true,
expandZoomRange: true,
zoom: 9,
zooms: [9, 13],
layers: [ new AMap.TileLayer(), googleMapLayer],
});
this.map.addControl(new AMap.Scale());
this.map.setCenter([106.976692, 26.236684]); // 中心點坐標(biāo)
})
.catch((e) => {
console.error(e); //加載錯誤提示
});
通過算法來加載下載好得離線瓦片，這樣就實現(xiàn)了離線地圖。文章來源地址http://www.zghlxwxcb.cn/news/detail-401391.html
到了這里，關(guān)于前端加載高德離線地圖的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
