代码改变世界

openlayers加载矢量切片

2020-09-01 09:23  凌霄GISer  阅读(2290)  评论(0)  编辑  收藏  举报

openlayers加载矢量切片，EPSG:4326坐标系和EPSG:900913坐标系有些不同，主要是分辨率（Resolutions）计算的差别。

以下加载代码基于V5.3.3版本的openlayers版本。

EPSG:900913坐标系加载代码如下：

function loadData(){
      var source = new VectorTileSource({
          format: new MVT(),
          tileGrid: createXYZ({
                extent: getProjection('EPSG:900913').getExtent(),
                maxZoom: 22
            }),
          tileUrlFunction:function(tileCoord){         
              return '/geoserver/gwc/service/tms/1.0.0/HNQX:wisdom_mroad@EPSG:900913@pbf/' + (tileCoord[0])
              + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0]) + tileCoord[2]) + '.pbf'
            }
         });
      return source;
  }
View Code

 

EPSG:4326坐标系加载代码如下：

 1 function setTrackData(sourceName){
 2         var source = new VectorTileSource({
 3             format: new MVT(),
 4             tileGrid: createXYZ({
 5                   extent: getProjection('EPSG:4326').getExtent(),
 6                   maxZoom: 22
 7               }),
 8             tileUrlFunction:function(tileCoord){         
 9                 return '/geoserver/gwc/service/tms/1.0.0/HNQX:' + sourceName + '@EPSG:4326@pbf/' + (tileCoord[0] - 1)
10                 + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.pbf'
11               }
12            });
13         return source;
14     }

Tips：截至目前，发现最新6.X版本的openlayers加载矢量切片会出错。