ArcGIS for JavaScript 加载 GeoServer 矢量切片服务

在平台开发时,遇到了前端使用arcgis-js-api访问GeoServer发布的矢量切片服务的情况,在博客:Arcgis加载GeoServer矢量切片 中找到了方法,但是在使用的时候出现在问题

考参上面的博客,编写的加载GeoServer矢量切片服务的核心代码如下:

// 天地图影像底图
var imgWLayer = new WebTileLayer({
   urlTemplate: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=${activeTianToken}`
  })

const style = {
  version: 8,
  glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
  sprite: `mapbox://sprites/mapbox/streets-v8`,
  sources: {
    test: {
      type: 'vector',
      tiles: [
        'http://192.168.100.101:8735/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cu:dt01ggxrj3j9m5xaygcf6rfbtq3y&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}'
      ]
    }
  },
  layers: [
    {
      id: 'test',
      type: 'fill',
      source: 'test',
      'source-layer': 'dt01ggxrj3j9m5xaygcf6rfbtq3y',
      paint: {
        'fill-color': '#FFD273'
      }
    }
  ]
}

const mvtLayer = new VectorTileLayer({
  id: 'mvt',
  title: 'mvt',
  style: style
})

const map = new Map({
  basemap: new Basemap({
    title: '底图',
    baseLayers: [imgWLayer]
  })
})

map.add(mvtLayer)

const mapView = new MapView({
  map,
  container: mapViewRef.value,
  center: [106.376, 29.652],
  zoom: 7,
  spatialReference: new SpatialReference({ wkid: 3857 })
})

mapView.ui.remove('zoom')
mapView.ui.remove('attribution')

运行的时候,发现报错,错出内容如下:

经过查看发现是因为无法解析服务地址中TILEMATRIX EPSG:900913:{z}参数,z表达的是地图缩放层级,但是并没有被识别

通过咨询写上述成功案例的博主,经过排除,怀疑是因为arcgis-js-api的版本问题,于是,将arcgis-js-api降低到npm上提供的最低版本4.18.0
执行npm show @arcgis/corce versions 可以查看arcgis-js-api的全部版本
执行npm install @arcgis/core@4.18.1安装arcgis-js-api4.18版本
运行vue项目,发现,可以正常访问了,证明,当前 arcgis-js-api 4.28版的问题,不知道是bug,还是esri有意为之。

最后,想知道到底是从什么版本后,出现的这个问题,依次测试了 npm 可以安装的 4.xx 正式版的最后版本号,
结论:4.21.2及以下版本都支持访问GeoServer矢量切片
arcgis-js-api v4.28.10
arcgis-js-api v4.27.6
arcgis-js-api v4.26.5
arcgis-js-api v4.25.5
arcgis-js-api v4.24.7
arcgis-js-api v4.23.7
arcgis-js-api v4.22.2
arcgis-js-api v4.21.2
arcgis-js-api v4.20.2
arcgis-js-api v4.19.2
arcgis-js-api v4.18.1

不知道将arcgis-js-api v4.21.2的WebTileLayer.js文件源代码替换 v4.28.10的WebTileLayer.js文件源码是否也是可行的

posted @ 2024-01-15 16:20  lqqgis  阅读(384)  评论(0编辑  收藏  举报