arcgis 4.x 加载geoserver矢量切片

准备点线面图层并发布图层组

此处我准备了石家庄市的县界名称（点）、高速公路（线）、县界（面），依次发布geoserver服务，创建图层组（过程不赘述了），把准备好的三个图层组成一个图层组，效果如下。

图层组发布矢量切片

矢量切片主要用到了geoserver 的 vector Tiles 插件，下载对应版本的插件压缩包，解压到geoserver的lib目录下，重启server，查看图层组的Tile Caching页面，出现如下，则安装成功，勾选需要的Tile Image Format即可。

查看webcache

进入浏览器/geoserver/gwc/demo路径，查看缓存服务是否有相应的各式。

代码加载

先贴参考文档

VectorTileLayer | ArcGIS API for JavaScript

Style Specification | Mapbox GL JS | Mapbox

Mapbox Style 规范 - 初晓之博的个人空间 - OSCHINA - 中文开源技术交流社区

代码

filter，circleColor，fillColor为自定义的几个条件

filter：只有鹿泉区和长安区显示，其他不显示。

circleColor：长安区颜色#FFD273，鹿泉区颜色#E86D68，其他#f28cb1

fillColor：颜色线性分布，人口10000#FFD273， 500000#E86D68，1000000#9BFF69，中间值的颜色会自动生成。

style.source.osm.tiles的url请求路径可以在geoserver预览页面的控制台网络查看（进入浏览器/geoserver/gwc/demo路径，找到相应的地图服务，点击openlayer[“pdf”,“xxx”,“xxx”]）。

关于layers节点，根据实例代码和文档自行理解。

若文字不显示，很有可能是字体设置的问题，可以自行搜索mapbox glyphs的相关介绍。

定义字体文件请求路径模板 “glyphs”: “./glyphs/{fontstack}/{range}.pbf”

layer使用的字体 ‘text-font’ : [‘Microsoft YaHei Regular’]

    //自定义条件
    var filter = [
      "match",
      ["get", "DATA"],
      ["鹿泉区", "长安区"],
      true,
      false
    ];

    var circleColor = [
      "match",
      ["get", "DATA"],
      "长安区", '#FFD27