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文件源码是否也是可行的