arcgis_js_api加载mvt并获取属性

由于项目中前端地图使用了arcgis js api，所以尝试了下其加载mvt的功能，其中踩了些坑，特此记录一下，（如果有可能的话，我更倾向于openLayers，实现难度相对较低，由于本人主要偏向后端开发，所以，不足之处请指正交流)，闲话不说，上代码：

如下是mvt的style配置

var style = {
				"id": "layer",
				"version": 8,
				"sources": {
					"osm": {
						"tiles": [
							"http://xxx/{x}/{y}/{z}.pbf"
						],
						"type": "vector"
					}
				},
				"glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
				"layers": [{
						id: "line-layer",
						type: "line",
						source: "osm",
						"source-layer": "line-layer",
						paint: {
							"line-color":  ["get", "color"]
						}
					},
					{
						id: "text-layer",
						type: "symbol",
						source: "osm",
						"source-layer": "text-layer",
						layout: {
							"text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
							"text-field": "{text}",
						},
						paint: {
							"text-color": ["get", "color"],
							"text-halo-width": 1, // 设置文本轮廓宽度为1个像素
							"text-halo-color": "#000000" ,// 设置文本轮廓颜色为黑色
						}
					},
					{
						id: "polygon-layer",
						type: "line",
						source: "osm",
						minzoom: 0,
						"source-layer": "polygon-layer",
						paint: {
							"fill-color": [
								"match",
								["get", "id"],
								199,
								["match", ["get", "layer"], "房子", "blue", ["get", "color"]],
								["get", "color"]
							],
							"fill-opacity": 0.3,
							'fill-outline-color': ["get", "color"],
						}
					}
				]
			}

这里用到的是arcgis的 VectorTileLayer组件

var map = new Map();

var view = new MapView({
	container: "viewDiv",
	map: map,
	center: [112.888, 30.25],
	zoom: 16
});
// 创建矢量瓦片图层
var tileLyr = new VectorTileLayer({
	style: style,
	maxZoom: 19
});
map.add(tileLyr);

 问题1：

渲染出的mvt没有文字，查看了text-layer图层配置没错，反复测试对比arcgis的demo，发现是少了如下引用

"glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf"

这个引入的矢量瓦片的字体资源，不加这个，可能会导致看不见文字内容

 

 问题2：

arcgis点击图形对象，无法获取到mvt中附加的额外属性，经过调研测试之后，发现从4.29的版本开始才能读取到mvt中的属性

4.29之前的版本

4.29版本 

具体可以参考4.29的 release note

 

 问题3：

这个问题主要是mvt的style配置，当需要一些动态计算或者匹配的时候，写起来很繁琐复杂，例如

"fill-color": [
    "match",
	["get", "id"],
	199,
	["match", ["get", "layer"], "房子", "blue", ["get", "color"]],
	["get", "color"]
]

示例中当 id == 199 && layer == '房子' =》填充色为蓝色，其余情况则是数据本身指定的颜色。主要是有些表达式也不太好查，只能遇到再研究一下，顺便附上 mvt的style配置文档

这是我目前遇到的问题，关于mvt表达式如何配置动态的内容，后续研究一下再交流。如果对您有帮助的话，请点个赞，谢谢！