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