离线地图解决方案

针对百度、高德等地图不支持PC端离线地图，但是需要在局域网内进行地图展示的解决方案：

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

步骤：

1. 准备工作 ：下载瓦片工具到本地，使用BIGMap工具下载地图离线瓦片到本地 

下载地址：BIGEMAP GIS Office-全能版   

BIGEMAP GIS Office-全能版

下载的时候要注意存储选项的选择。本案例选择的是瓦片：ArcGis

下载下来的文件要根据级别去修改名称，这样做是为了后续的算法加载瓦片，使用openlayers进行加载。

同级别瓦片的文件名都是一样的  算法是根据瓦片名字去一一对应加载到屏幕相应xy位置上的。

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

 

 

 

关于地图渲染流程：

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

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

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

1. 加载本地瓦片的算法

加载本地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"
            })