转手把手教你制作Iphone户外徒步地图

转自：http://www.sosaw.com/threads-360728-1-1.html

我是一个GIS科班毕业生，户外徒步比较业余，但没事喜欢倒腾地图。最近想去香山看看红叶，借着网络上的资源和学习前辈的经验，自给做了一个Iphone上能用的户外徒步地图，和大家一起分享分享。


先来上个图：


优势
相比之前在手持机上的制图方法的优势在于：
1. DEM晕渲图叠加影像，不仅能一目了然山体情况，也能通过详细的卫星影像给自己提供地标参照。不用来回切换不同地图来看顾此失彼。
2. 用矢量等高线在Tilemill中渲染切片，可以自由定义等高线样式，同时也能满足在不同比例尺显示不同细节的要求，不会出现缩小看到锯齿，放大看不清的问题。同时切片数据平滑了使用性能，不会一次要加载很大面积的等高线导致卡机。
3. 对于我这种没手持机的小驴，可以用手机看到差不多的地图。

地图结构
这个地图呢主要分了5层：
1. 谷歌卫星影像作为最底层的地图。
2. AsterGDEM2生成的晕渲图，叠加在影像之上。
3. AsterGDEM2生成的等高线。
4. 谷歌地图的地标层。
5. 徒步路线和标注层。

实现方式：
谷歌卫星影像和地标层是在线加载的，也可以离线缓存。
AsterGDEM2的晕渲图和等高线是离线的Mbtiles格式的瓦片地图。
徒步路线是通过【跟我走-自制路线分享】ios app画出来的。
最终这一切都在【地图加加】ios app中加载显示出来。

制作的步骤：
1. AsterGDEM2数据下载， GlobalMapper配准，输出矢量等高线shape数据和栅格的GeoTiff晕渲图
2. Mapbox的Tilemill配置等高线样式，加载晕渲图并切图转换为Mbtiles数据
3.【跟我走】ios app手绘香山徒步路线并导出kmz
4.【地图加加】配置谷歌影像和地标，并加载路线kmz、等高线、晕渲图。

相关数据和工具介绍：

【AsterGDEMV2】数据（我一般是在这个地址下载）
http://gdem.ersdac.jspacesystems.or.jp/search.jsp


【GlobalMapper】 一个强大的GIS地图软件，这里我们主要用来对DEM数据进行配准、渲染和导出。

Mapbox的【Tilemill】，可以按照自己需要配置样式，并渲染出MBtiles格式的地图。
https://www.mapbox.com/tilemill/


【跟我走】 ios app可以在手机上手绘徒步路线并导出kmz/gpx。
https://itunes.apple.com/cn/app/id917066259



【地图加加】Ios app可以在手机上加载在线地图和离线地图
https://itunes.apple.com/cn/app/id438868200



下面我来说说怎么一步步的做出这样的地图：
一、等高线数据配准、晕渲图渲染、矢量等高线导出。

1. DEM数据下载，我们这里选用的是AsterGDEMV2的数据。根据香山所处位置总共下载了四块数据。

2. 解压后，通过globalmapper打开这四个块的数据，然后导出为DEM格式，由于我们只需要香山部分的数据，所以在导出时，在Drawbox中选取 香山这一块即可。（这部分和之前很多前辈介绍的方法相同，我就不详细说了，可以参考http://blog.163.com/djy_zxh/blog /static/34269441201210213549637/）


3. 再次打开刚才导出的香山这块的DEM，下面我们需要对这一块做几件事情：

    a. 配准（因为我们最终会在火星坐标系地图上显示，所以我们需要将DEM偏移到火星坐标系上）
   点击图层控制，右键选择DEM图层，并点击右键，选择：Rectify（配准），选择后会弹出如下窗口：


具体的配准过程可以参考前辈的文章http://www.doyouhike.net/forum/comm_nav/1014375,0,0,0.html


    b. 生成等高线

      方法与前辈们的方法相同，参考：

      http://blog.163.com/djy_zxh/blog/static/34269441201210213549637/

     

c. 设置投影（这里不同的是我们不需要改成UTM50的投影，还是使用平面经纬度投影，单位为度）
  点击设置按钮

在弹出的设置窗口，选择投影，这里投影我们还是保留原有的平面经纬度投影，只是把单位改成dgree


d. 添加格网（这里由于单位变了，所以设置格网宽度例如500m，就会改成0.005度）
        继续在设置窗口中选择“General”一般。 选择Current Projection，在custom中输入0.005


  完成后格网如下效果：


e. 导出，与以往不同的是，这里我们将等高线和晕渲图分开导出。等高线导出为矢量shape格式，晕渲图导出为栅格图。
    导出等高线，从菜单上点击 文件(files)→导出矢量数据格式（Export Vector Format...）然后显示如下界面

    在下拉菜单中选择Shapefile


点击下一步后，在shapefile导出设置中勾选导出线，并输入导出路径和文件名，点击OK即导出完毕。


导出的shape文件如下，这里面包含了等高线和格网的矢量线数据


紧接着再导出栅格晕渲图，首先请确认两点：立体光照效果关闭，等高线不显示。




导出栅格格式GeoTIFF地图，点击文件-导出栅格图像(Export Raster/Image format...)，格式选择GeoTiff
   在导出设置中我们可以选择更高的采样精度，这里我选择为0.00005度，值越小生成的GeoTiff文件会越大，但也会越清楚


导出完成后，会生成一个tiff文件：

二 TileMill等高线样式配置和晕渲图渲染切片，生成MBtiles

使用TileMill的目的，是需要使用TileMill把我们第一步制作的等高线与晕渲图输出成MBtiles的地图。这样能导入到手机上。同时由于晕渲图会设置半透明和影像叠加显示，所以等高线和晕渲图会分离开来制作两个MBtiles。



打开TileMill 在Projects里面选择新建一个项目：


在项目列表中找到刚才新建的项目，例如本例我们项目名叫“xiangshan_hike2”。点击进入项目后会出现左侧是地图，右侧是样式表的页面如下


击左下方的图层，选择Add Layer 添加图层，我们现在开始导入刚才的晕渲图和等高线。


导入晕渲图shader.tif文件，设置如下

同样的方式导入等高线Shp数据


查看导入数据，点击图层，选择导入的数据，如shader点击一下放大镜会将地图居中显示


配置项目设置，点击整个应用窗口右上角的设置按钮：




开始配置Style并导出Mbtiles，我们先导出晕渲图，在图层控制选项中关掉等高线和背景countries的显示

删除Map的背景色样式，并保存


这个时候在地图上就只能看到晕渲图了。并且背景是网格白色

导出为MBtiles





完成导出后文件会生成在 我的文档\mapbox\export\*.mbtiles 的位置。



接着我们配置等高线样式，为了看显示效果，我们打开晕渲图和背景，并把如下样式拷贝到样式表中，然后点击Save（也可以自己定义）



#countries {
  polygon-fill: rgb(82,133,78);
}

#shader {
  raster-opacity:0.35;
}

#contourline ::gridline{
  line-width:0.5;
  line-color:#ccc;
  line-opacity:0.5;
  [LAYER='Contour Line, Minor']{
    line-width:0.5;
    line-color:rgb(204,204,26);
    line-opacity:1;
    }
  [LAYER='Contour Line, Intermediate']{
    line-width:1;
    line-color:rgb(204,204,26);
    line-opacity:1;
    }
  [LAYER='Contour Line, Minor']{
    line-width:1;
    line-color:rgb(204,204,26);
    line-opacity:1;
    }
  text-name:[ELEVATION];
  text-face-name:'Arial Regular';
  text-size:12;
  text-fill:rgb(204,204,26);
  text-placement:line;
  }



保存后效果如图：




接下来开始导出等高线，导出之前先关掉背景层和晕渲图，只保留等高线层。





然后选择右上角的Export以同样的方法导出等高线mbtiles文件。



三、跟我走 IOS APP 手绘徒步路线，并导出KMZ。



之所以用跟我走画，我是觉得比在GoogleEarth上面画起来方便，尤其是在地图参照比较好的情况下。直接用手画很快。



在手机上打开跟我走，在画布上找到我们这次徒步的起点，闵庄路南的入口，然后开始沿着路划线。



这个APP操作起来很简单就不细说了。



手指在屏幕上滑动划线



长按添加一个标点




完成后导出



四  地图加加把地图加载进来显示。

地图加加要做几点：

1. 配置谷歌地标，多服务器配置：0,1,2,3   URL规则是

http://mt{$serverpart}.google.cn/vt/imgtp=png32&lyrs=h@279019843&hl=zh-CN&gl=CN&src=app&expIds=201527&rlbl=1&x={$x}&y={$y}&z={$z}&s=Galileo&scale={$scale}

   
2. 配置谷歌影像，多服务器配置：0,1,2,3 URL规则是

http://mt{$serverpart}.google.cn/vt/lyrs=s@159&hl=zh-CN&gl=CN&src=app&expIds=201527&rlbl=1&x={$x}&y={$y}&z={$z}&s=Galileo&scale={$scale}

  
3. 导入MBtiles文件

在Itunes或者Itools上，手机连接电脑后，将之前生成的两个mbtiles导入进来。并把跟我走app画的kmz路线导入进来。



4. 图层配置

设置晕渲图不透明度35%，叠加图层顺序如下图：






最终效果：