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