高德地图加载三方图层+GeoServer处理的栅格数据

前言

应甲方要求重绘制高德部分区域的GIS,以显示他们所在位置的高清地理信息。重绘后我拿到了ArcGIS的影像文件,文件解压后如下：

xxx.ige # 存储栅格的数据
xxx.img # 索引文件
xxx.rde # 金字塔文件(rrd)超过2GB时会创建rde文件来存储信息
xxx.rrd # 金字塔文件

那究竟怎么处理呢？

用 ArcGIS？ 公司没买授权。最终商讨用高德地图加载第三方标准图层，而我们使用GeoServer 搭建WMS标准图层

一、环境准备

1. 下载GeoServer最新的war包

2. 用ArcMap 打开 解压出来的xxx.img (可直接拖到内容列表)

   arcmap.png
3. 用ArcMap 导出栅格数据 export_data.png export_tiff.png

4. 导出后得到文件如图所示：

   tiff_file.png 此时我们只需要img1.tif这个文件

二、环境搭建

1. 下载GeoServer最新的war包

2. 现在完成后放入tomcat/jetty 进行运行

3. 成功运行后会在war包目录下解压生成一个新同名文件夹，进入文件下的data 目录，在data目录下新建一个文件夹然后把之前得到的img1.tif文件放入其中

4. 访问GeoServer web 服务 默认用户名/密码:admin/geoserver

5. 添加新的工作区(虽然也可以用其他默认的工作区) workspace.png new_demo.png
6. 在列表中点击我们刚新建的工作区名字进行编辑 edit_workspace.png

7. 添加数据源

   add_data.png 选择GeoTIFF select_geo_tiff.png
8. 如图： data_info.png
   保存并关闭后会出现如下： new_layer.png 点击发布

9. 编辑图层如图：

   
   edit_layer1.png edit_layer2.png
   edit_layer3.png
   edit_layer4.png
   最后一图中如果Gridset中没有EPSG3857 ，则需要在 ·网格(Gridset)设置· 中添加，参考坐标系选择EPSG:3857再添加相应的缩放级别,再返回来添加即可。添加Gridset如图：
   add_gridset.png
   create_gridset.png

10. 图层预览

    
    view_layer.png
    

    这时候就应该可以看到添加的图层了

    
    layer_show.png

三、使用

1. 添加图层

// https://lbs.amap.com/api/javascript-api/guide/layers/wms
const layer =  new AMap.TileLayer.WMS({
    url: 'http://host/demo/wms', // wms服务的url地址
    blend: false, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    params: {
      VERSION: '1.3.0', // wms 版本
      TRANSPARENT: 'TRUE',
      LAYERS: ' demo:img1', // 图层名
      FORMAT: 'image/png'
    }
});

map.add(layer)

四、总结及疑问

疑问

1. 为什么使用EPSG:3857?

   因为高德地图仅支持EPSG3857坐标系统的 WMS 图层

2. 跨域怎么处理？
   在GeoServer解压的war包中的WEB-INF/web.xml中有着这样一段

   <!-- Uncomment following filter to enable CORS in Jetty. Do not forget the second config block further down.
       <filter>
       <filter-name>cross-origin</filter-name>
       <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
       <init-param>
           <param-name>chainPreflight</param-name>
           <param-value>false</param-value>
       </init-param>
       <init-param>
           <param-name>allowedOrigins</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
           <param-name>allowedMethods</param-name>
           <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
       </init-param>
       <init-param>
           <param-name>allowedHeaders</param-name>
           <param-value>*</param-value>
       </init-param>
       </filter>
       -->
   <!-- Uncomment following filter to enable CORS in Tomcat. Do not forget the second config block further down.
       <filter>
       <filter-name>cross-origin</filter-name>
       <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
       <init-param>
           <param-name>cors.allowed.origins</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
           <param-name>cors.allowed.methods</param-name>
           <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
       </init-param>
       <init-param>
           <param-name>cors.allowed.headers</param-name>
           <param-value>*</param-value>
       </init-param>
       </filter> -->
       
   <!-- Uncomment following filter to enable CORS
       <filter-mapping>
           <filter-name>cross-origin</filter-name>
           <url-pattern>/*</url-pattern>
       </filter-mapping>
       -->
   

   两个filter 分别对应Tomcat/Jetty 根据使用的具体web容器解开相应的注释以及filter-mapping即可

总结

地图服务虽然搭建好了但是还有很多优化空间