前端加载高德离线地图的解决方案

news/2025/2/7 7:01:05/

核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图。

使用BIGMap工具下载地图离线瓦片到本地 下载地址:http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-全能版

需要注册试用版(免费)

试用版可以下载到16级别的瓦片,单次下载不能超过100M

  1. 关于单次下载不能超过100M的问题 想到是否可以分多次框选区域去下载 得出结论是不行 因为分块下载的文件 同级别瓦片的文件名都是一样的 算法是根据瓦片名字去一一对应加载到屏幕相应xy位置上的。

下载瓦片时也可以通过选择行政区域来进行区域的划分

2、但是可以分级别去下载,然后再集成加载。

免费的可以下载谷歌、arcgis、TMS服务的瓦片,我下载的是arcgis服务的高德地图瓦片。

关于地图渲染流程:

电子地图涉及几种坐标系, 每种坐标的计量单位如下:经纬度是球面坐标,我们日常使用经纬度单位的是角度(deg),

在进行投影计算时需要换算为弧度(rad) 墨卡托投影得到的二维坐标单位是米(m);电子屏幕坐标的单位是像素(px)。

前端拿到的地图数据中绝大多数是墨卡托坐标,很小一部分是经纬度坐标。墨卡托或经纬度坐标需要先被换算成屏幕坐标,最后被CSS拼接或WebGL渲染。

加载本地arcgis算法如下:

AMapLoader.load({

key: "", // 申请好的Web端开发者Key,首次调用 load 时必填

version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 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,

});

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]); // 中心点坐标

})

.catch((e) => {

console.error(e); //加载错误提示

});

通过算法来加载下载好得离线瓦片,这样就实现了离线地图。


http://www.ppmy.cn/news/792235.html

相关文章

如何搭建高德离线地图服务

下载离线地图数据(支持谷歌、百度、高德等所有地图源) 发布时间:2019-03-12 版权: 离线地图分为两种:一种叫“金字塔瓦片”数据,一种叫“矢量地图数据”。我们看的在线地图比如,百度,谷歌,高德…

Git Stash:有效管理你的临时代码更迭

需求 在软件开发中,我们经常会遇到需要切换分支或处理紧急 bug 的情况,但又不希望丢失正在进行中的工作进展。这时候,Git Stash 就是你的救命稻草。本文将介绍 Git Stash 的用法,以便于你更好地管理你的临时代码更迭。 实现 在软…

Freertos-mini智能音箱项目---IO扩展芯片PCA9557

项目上用到的ESP32S3芯片引脚太少,选择了PCA9557扩展IO,通过一路i2c可以扩展出8个IO。这款芯片没有中断输入,所以更适合做扩展输出引脚用,内部寄存器也比较少,只有4个,使用起来很容易。 输入寄存器 输出寄存…

linux 黑屏后死机,如何修复各种各样的黑屏死机

每次我们打开这些设备,我们都希望我们生活中的科技能发挥作用。当他们不能工作时,会让我们非常沮丧,尤其是当我们不知道如何解决问题时。所谓的“死亡黑屏”在操作系统之间很常见,当您打开机器,但屏幕空白。有时监视器…

MacOS VSCode 突然打开黑屏的解决办法

症状 打开VSC后一直卡在如下界面,重装无果。 使用./Electron --verbose启动之,发现先是报错ERROR:interface_endpoint_client.cc(659)] Message 1068032789 rejected by interface network.mojom.NetworkService,然后网络服务崩溃退出&…

怎么查mac电脑是不是正品_Mac电脑突然黑屏怎么办?

苹果笔记本开机后突然黑屏的解决方法 方法一: 如果将带有磁铁的设备放在Mac笔记本下方,或置于掌托的位置,电脑可能会意外进入睡眠,从而产生“黑屏”的状态。因此,可以先检查一下是否有以下情形: 将 iPhone、…

python中列表,集合和元组的特点和使用方法

列表list ls [a,b,c,d,e,f,g] --------- 弱数据类型 特点: 1.常见线性表(数组 栈 队列 链表(单链表和双链表))----- 基于链表实现的(双链表) !!!python里面…

如何使用多线程

一个进程正在运行时,至少会有一个线程在运行。 package ChapterOne;public class Test {public static void main(String[] args) {System.out.println(Thread.currentThread().getName());//currentThread方法返回正在被执行的线程的信息//getName返回正在被执行线…