前言

應(yīng)甲方要求重繪制高德部分區(qū)域的GIS,以顯示他們所在位置的高清地理信息。重繪后我拿到了ArcGIS的影像文件,文件解壓后如下：

xxx.ige # 存儲(chǔ)柵格的數(shù)據(jù)
xxx.img # 索引文件
xxx.rde # 金字塔文件(rrd)超過(guò)2GB時(shí)會(huì)創(chuàng)建rde文件來(lái)存儲(chǔ)信息
xxx.rrd # 金字塔文件

那究竟怎么處理呢？

用 ArcGIS？ 公司沒(méi)買授權(quán)。最終商討用高德地圖加載第三方標(biāo)準(zhǔn)圖層，而我們使用GeoServer 搭建WMS標(biāo)準(zhǔn)圖層

一、環(huán)境準(zhǔn)備

1. 下載GeoServer最新的war包

2. 用ArcMap 打開(kāi) 解壓出來(lái)的xxx.img (可直接拖到內(nèi)容列表)

   arcmap.png

3. 用ArcMap 導(dǎo)出柵格數(shù)據(jù)
   export_data.png
   export_tiff.png

4. 導(dǎo)出后得到文件如圖所示：

   tiff_file.png
   此時(shí)我們只需要img1.tif這個(gè)文件

二、環(huán)境搭建

1. 下載GeoServer最新的war包

2. 現(xiàn)在完成后放入tomcat/jetty 進(jìn)行運(yùn)行

3. 成功運(yùn)行后會(huì)在war包目錄下解壓生成一個(gè)新同名文件夾，進(jìn)入文件下的data 目錄，在data目錄下新建一個(gè)文件夾然后把之前得到的img1.tif文件放入其中

4. 訪問(wèn)GeoServer web 服務(wù) 默認(rèn)用戶名/密碼:admin/geoserver

5. 添加新的工作區(qū)(雖然也可以用其他默認(rèn)的工作區(qū))
   workspace.png
   new_demo.png

6. 在列表中點(diǎn)擊我們剛新建的工作區(qū)名字進(jìn)行編輯
   edit_workspace.png

7. 添加數(shù)據(jù)源

   add_data.png
   選擇GeoTIFF
   select_geo_tiff.png

8. 如圖：
   data_info.png
   
   
   保存并關(guān)閉后會(huì)出現(xiàn)如下：
   new_layer.png
   點(diǎn)擊發(fā)布

9. 編輯圖層如圖：

   
   
   edit_layer1.png
   edit_layer2.png
   
   
   edit_layer3.png
   
   
   edit_layer4.png
   
   最后一圖中如果Gridset中沒(méi)有EPSG3857 ，則需要在 ·網(wǎng)格(Gridset)設(shè)置· 中添加，參考坐標(biāo)系選擇EPSG:3857再添加相應(yīng)的縮放級(jí)別,再返回來(lái)添加即可。添加Gridset如圖：
   
   add_gridset.png
   
   
   create_gridset.png

10. 圖層預(yù)覽

    
    
    view_layer.png
    
    

    這時(shí)候就應(yīng)該可以看到添加的圖層了

    
    
    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服務(wù)的url地址
    blend: false, // 地圖級(jí)別切換時(shí)，不同級(jí)別的圖片是否進(jìn)行混合
    tileSize: 256, // 加載WMS圖層服務(wù)時(shí)，圖片的分片大小
    params: {
      VERSION: '1.3.0', // wms 版本
      TRANSPARENT: 'TRUE',
      LAYERS: ' demo:img1', // 圖層名
      FORMAT: 'image/png'
    }
});

map.add(layer)

四、總結(jié)及疑問(wèn)

疑問(wèn)

1. 為什么使用EPSG:3857?

   因?yàn)楦叩碌貓D僅支持EPSG3857坐標(biāo)系統(tǒng)的 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>
       -->
   

   兩個(gè)filter 分別對(duì)應(yīng)Tomcat/Jetty 根據(jù)使用的具體web容器解開(kāi)相應(yīng)的注釋以及filter-mapping即可

總結(jié)

地圖服務(wù)雖然搭建好了但是還有很多優(yōu)化空間