栅格瓦片转mbtiles文件离线部署

栅格瓦片转mbtiles文件离线部署

前提

​ 由于需要离线部署地图应用,通过太乐等地图下载器的切片占用磁盘空间会很大,而且迁移到生产环境会很麻烦还很耗时,那么如何减少这些瓦片迁移的时间就很重要。下面说的解决方案仅仅针对标准的TMS 的瓦片。

准备工作

  1. 切好的TMS瓦片
  2. python(我使用的版本:3.6.2)
  3. sqlite(我使用的版本:3.25.3)
  4. nodejs(我使用的版本:8.11.3)
  5. MBUtil
  6. mbtiles-server

工具安装

这里只说一下后面两个(MBUtil,mbtiles-server)的安装。当然在其github库的README中都有安装步骤,也可按照那个进行安装。

  1. MBUtil

    windows情况下安装命令:

    # 从github中clone下项目
    git clone git://github.com/mapbox/mbutil.git 
    # 进到mbutil目录中
    cd mbutil
    # 执行安装
    python setup.py install
    # 查看帮助
    python mb-util -h
    

    注: 瓦片目录指向层级(z)这层目录:如下所示

    栅格瓦片转mbtiles文件离线部署_第1张图片

  2. mbtiles-server

    # 安装
    npm install -g mbtiles-server
    #查看帮助
    mbtiles-server --help
    

步骤

  1. 将瓦片转换为.mbtiles格式的文件,在mbutil安装目录下执行此命令

    # 将瓦片转成mbtiles 格式,这里用的都是默认参数
    python mb-util D:\MyTile\ D:\Mymbtiles\layerName.mbtiles
    

    执行过程中会出现如下界面:
    栅格瓦片转mbtiles文件离线部署_第2张图片

    执行结束:
    栅格瓦片转mbtiles文件离线部署_第3张图片

  2. .mbtiles放到一个文件夹下,使用mbtiles-server进行发布

    # 发布服务
    mbtiles-server --cache 存放.mbtiles的目录
    

    直接在浏览器中访问http://localhost:5000/ 这是mbtiles-server默认的请求地址可以看到如下信息:
    栅格瓦片转mbtiles文件离线部署_第4张图片

    访问每个mbtiles会出现该文件的一些信息
    栅格瓦片转mbtiles文件离线部署_第5张图片

    当请求某一个文件中的切片时只要访问对应的http://localhost:5000/mbtileName/z/x/y即可得到对应的图片

  3. 查看是否发布成功,成功的情况下使用前端库(我这里用的OL3 你也可以用Leaflet等)加载预览
    栅格瓦片转mbtiles文件离线部署_第6张图片

    OL3中使用XYZ加载mbtiles-server发布的切片

    
      // 标准TMS瓦片
      var source  = new ol.source.XYZ({
      		tileUrlFunction: function (tileCoord) {
      			var z = tileCoord[0];
      			var x = tileCoord[1];
      			y = Math.pow(2, z) + tileCoord[2] - 1; 
      			return "http://localhost:5000/hainan/" + z + "/" + x + "/" + y + ".png";
      		}
      	})
      /*
      // 谷歌TMS瓦片
      var source  = new ol.source.XYZ({
      		tileUrlFunction: function (tileCoord) {
      			var z = tileCoord[0];
      			var x = tileCoord[1];
      			var y = - tileCoord[2];
      			return "http://localhost:5000/hainan/" + z + "/" + x + "/" + y + ".png";
      		}
      	})
      */
    

你可能感兴趣的:(瓦片部署)