leaflet 加載 geoserver 自定義座標系 矢量切片 及 偏移問題處理

目錄

一，發佈底圖

二，leaflet加載4490座標底圖

三，geoserver 發佈矢量切片

四，加載矢量切片

---

 

使用leaflet接口加載geoserver 的矢量切片，座標系爲3857時，一切按默認設置可正常加載；當自定義座標系時，就會遇到很多問題；其問題根源在於切圖原點的統一問題，導致切片加載不出或者錯位；

以arcgis server爲例，切圖時會設置一個原點座標，如果是經緯度座標一般默認(x0,y0)=（-400,400）作爲切圖的起始點，即從這開始算行列號。假設切圖的地圖某點座標爲x，y,切圖的瓦片大小爲256，其瓦片的級別分辨率爲resolution，則計算該地圖點的行列號計算如下：

  col  = floor((x0 - x)/(256*resolution));

  row = floor((y0 - y)/(256*resolution));

當使用接口加載時，請求的行列號與切圖的行列號一一對應，才能正確加載；下面詳細記錄一下最近遇到的問題和解決方式；

一，發佈底圖

底圖發佈使用arcgis server，座標4490，切圖原點（-400,400），層級選了0-9；

數據範圍：

二，leaflet加載4490座標底圖

首先，leaflet 接口內置的座標只有4326和3857，這也是網絡底圖較常用的座標系；因此leaflet 加載4490座標底圖時要自定義座標系，需要用到proj4.js 插件，leaflet官網可以找到相應鏈接，包括proj4.js和proj4leaflet.js兩個文件；

然後要找到4490座標的詳細信息，地址：https://epsg.io/4490

加載時，需設置座標系參數，原點(origin)，分辨率(resolutions)，座標系邊界(bounds)，參數根據arcgis 服務配置，代碼如下：

    let crsBounds=new L.bounds([-400,19.89538108464859],[134.77,53.56]);
    let CRS_4490 = new L.Proj.CRS('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs',
     {
         origin:[-400,400],
         bounds:crsBounds,
         resolutions: [
            0.01903568804664224,
            0.00951784402332112,
            0.00475892201166056,
            0.00237946100583028,
            0.00118973050291514,
            5.9486525145757E-4,
            2.97432625728785E-4,
            1.5228550437313792E-4,
            7.614275218656896E-5,
            3.807137609328448E-5
          ]
      });
    let map=new L.map("mapdiv",{           
        center:[27, 115],
        zoom:0,
        crs:CRS_4490
    });

let layer = L.esri.tiledMapLayer({
                        zIndex:0,
                        url: 'http://localhost:6080/arcgis/rest/services/JXXX/MapServer',
                        continuousWorld: false,
                        minZoom: 0 ,
                        maxZoom: 22 
                    });
map.addLayer(layer);

三，geoserver 發佈矢量切片

1.geoserver 發佈 矢量切片需安裝Vector Tile插件

在geoserver官網找到插件列表中的Vector Tile即可下載。下載完成後，解壓縮，將4個jar文件拷貝到GeoServer/WEB-INF/lib中即可。

2.服務發佈時配置

在tile caching 頁勾選以下選項

3.添加座標系

單擊 gridsets，新建座標系，選EPSG:4490。gridset bounds設置最爲關鍵，arcgis server 切圖原點（-400,400），即地圖左上角開始切圖；而geoserver自左下角開始切，因此最小x爲-400。最小y爲400-x*tilesize，並小於full extent 的Ymin，本文Ymin=24.55。此處取400-78*(256*0.0190356880466422)=19.89538108464859<Ymin。0.0190356880466422爲第0級像素分辨率。最大X,Y可以按crs 自動填入。

resolution 嚴格按 arcgis server 服務的分辨率填入。

四，加載矢量切片

加載前，另有一處需要指出：在創建map 時，定義crs 的bounds 也應和geoserver 的gridset bonds一致；

上述代碼中 let crsBounds=new L.bounds([-400,19.89538108464859],[134.77,53.56])，就是依據gridset bonds設置的；

leaflet 加載矢量切片，需要插件支持。加載代碼已在之前寫過：https://blog.csdn.net/u012123612/article/details/98940602