针对百度、高德等地图不支持PC端离线地图,但是需要在局域网内进行地图展示的解决方案:
需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图。
步骤:
- 准备工作 :下载瓦片工具到本地,使用BIGMap工具下载地图离线瓦片到本地
BIGEMAP GIS Office-全能版
下载的时候要注意存储选项的选择。本案例选择的是瓦片:ArcGis
下载下来的文件要根据级别去修改名称,这样做是为了后续的算法加载瓦片,使用openlayers进行加载。
同级别瓦片的文件名都是一样的 算法是根据瓦片名字去一一对应加载到屏幕相应xy位置上的。
但是可以分级别去下载,然后再集成加载。
关于地图渲染流程:
电子地图涉及几种坐标系, 每种坐标的计量单位如下:经纬度是球面坐标,我们日常使用经纬度单位的是角度(deg),
在进行投影计算时需要换算为弧度(rad) 墨卡托投影得到的二维坐标单位是米(m);电子屏幕坐标的单位是像素(px)。
前端拿到的地图数据中绝大多数是墨卡托坐标,很小一部分是经纬度坐标。墨卡托或经纬度坐标需要先被换算成屏幕坐标,最后被CSS拼接或WebGL渲染。
- 加载本地瓦片的算法
加载本地arcgis算法如下:
//加载本地离线瓦片
source: new ol.source.XYZ({
tileUrlFunction: function(tileCoord) {
//alert(tileCoord[0] + " X= " + tileCoord[1] + " Y= " + tileCoord[2]);
var oo = "00000000";
var zz = tileCoord[0];
var z = "L" + zz;
var xx = tileCoord[1].toString(16);
var x = "C" + oo.substring(0, 8 - xx.length) + xx;
var yy = (-tileCoord[2] - 1).toString(16); //注意此处,计算方式变了
var y = "R" + oo.substring(0, 8 - yy.length) + yy;
return "/arcgis_layers/" + z + "/" + y + "/" + x + ".jpg";
},
projection: "EPSG:3857"
})