基于百度制作离线地图及优化

时间:2024-03-31 09:03:18

1.修改百度离线包,调用本地离线瓦片
https://blog.csdn.net/wml00000/article/details/82219015
2.瓦片下载
Math.pow(2, (18 - zoom)); //把地图级别带进去,就能得出各个级别下1px对应多少米。
可以*选择瓦片地址的层级,xyz,每一层级是由上一层级的图片分成四块。

基于百度制作离线地图及优化

3.服务搭建
图片地址 C:\gis\tiles_hybrid 通过nginx代理出来
基于百度制作离线地图及优化
4.地市边界获取
百度离线开发api: http://lbsyun.baidu.com/jsdemo.htm#c1_10
按照下图方法,需要的城市的边界(是个数组,城市可以会有不是连接在一起的)打印出来,复制到项目中使用。
基于百度制作离线地图及优化
显示效果如下图。
基于百度制作离线地图及优化

5.优化
百度官网地图卫星图部分区域(如海南附近)有空白
基于百度制作离线地图及优化

对基础瓦片图进行美化,需要美工进行配合,通过页面审查元素来定位具体图片。

基于百度制作离线地图及优化

小层级
用户提出了百度离线api的层级缩放比例过大,要实现类似百度官网的功能
通过添加变量 “transform”,整个层级进行放大缩小。
基于百度制作离线地图及优化

基于百度制作离线地图及优化
6.热力图百万级数据加载,通过坐标过滤和kmeans算法进行优化
下面是测试了一些 本地js加载到地图上显示的时间。一般过滤到10W左右数据是可以接受的。
基于百度制作离线地图及优化