docker实现离线地图server

一：背景

各位大佬们大家好。公司有项目需要集成离线地图功能。我之前曾经将百度成功离线，只是版本比较低。如图

但是总感觉百度离线地图不太好控制，因为很多api都是百度已经实现，功能也不好扩展，于是我一咬牙，准备自己写一套离线地图服务，结果就走上了一条不归路~ ~
​​

二：技术栈

经过的我的一系列努力，终于将技术栈确定：node js + openlayers + XXXXXX.mbtiles

1. node js :简单的说 Node.js 就是运行在服务端的 JavaScript。(自己学习纯属想实践用一下)；
2. openlayers:一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问；
3. XXXXXX.mbtiles :地图瓦片数据。.mbtiles格式是可以通过sqllite打开的文本数据库。可以通过水经注软件下载(收费,下载慢,收费)；

三：安装准备

3.1：安装配置docker

docker 安装非常简单，安装流程是 1.配置docker安装源。2.安装docker 3.设置镜像加速

3.2：准备瓦片文件

我这里下载的是北京市的瓦片文件，文件名称是beijing_e_19.mbtiles。并移动到/App/map/beijing_e_19.mbtiles目录中。如图

3.3：下载所需的git.js 和 CntenLomap.js文件

1.文件仓库：https://github.com/914423503/linemap.git 将该仓库克隆到本地
2.将git.js 移动到 /App/map/。如图
3.修改git.js 中IP地址：（我的虚拟机中ip是:192.168.1.79）如图

四：启动离线地图服务

4.1下载镜像

用docker下载地图镜像：docker pull 914423503/linemap:latest

4.2运行容器

运行docker容器：
docker run -d -p 3000:3000 -v /App/map:/map -v /App/map/script/git.js:/app/public/javascripts/git.js 914423503/linemap:latest

========================================================================
至此地图服务已经启动完毕。浏览器输入http://ip:3000/gis 即可访问。如图：
![访问

五项目中集成map server

做这个地图server的根本目的是在项目中使用，接下来会将地图server和项目的集成，加以说明。已经封装的非常简单
完整代码：https://github.com/914423503/linemap/tree/master/demo

5.1在html中引入相应的js和css文件

  <link rel="stylesheet" href="css/ol.css"/>
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/ol.js" type="text/javascript"></script>
  <script src="js/CntenLomap.js" type="text/javascript"></script>
  <script src="js/git.js" type="text/javascript"></script>

5.2body标签中增加地图渲染的div

	<div class="mapContainer" style="height: 100%;">
      <div id="map" class="map" style="height: 100%;">
        <div id="popup">
          <div id="popup-content">
          </div>
        </div>
      </div>
	</div>

5.3 修改git.js 中的ip修改为地图server 的ip

noce 连我的爱上我自己了

结束

至此，一个完整的离线地图服务搭建完毕。并且可以集成到自己的项目中。谢谢大家的支持与阅读。

学习交流联系本人qq:914423503

Github:https://github.com/914423503
docker:914423503/otomcat,914423503/geoservertomcat
csdn:https://blog.youkuaiyun.com/u010403700
[1]: https://github.com/914423503
[2]: https://blog.youkuaiyun.com/u010403700
[3]: 914423503/otomcat,914423503/geoservertomcat