Arcgis加载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"],
  "长安区", '#FFD273',
  "鹿泉区", '#E86D68',
  "#f28cb1" // other
]

var fillColor = [
  'interpolate',
  ['linear'],
  ['get', '人口'],
  10000, '#FFD273',
  500000, '#E86D68',
  1000000, '#9BFF69'
];

//定义style
var geo_layer = 'test:sjz1'
var epsg = '900913';
var style = {
  "version": 8,
  "sources": {
    "osm": {
      "tiles": ["http://****/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER="+geo_layer+"&STYLE=&TILEMATRIX=EPSG:"+epsg+":{z}&TILEMATRIXSET=EPSG:"+epsg+"&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"],
      "type": "vector"
    }
  },
  "glyphs": "./glyphs/{fontstack}/{range}.pbf",
  "layers": [
    {
      id: "xj",
      type: "fill",
      source: "osm",
      "source-layer": "xj",
      paint: {
        "fill-color": fillColor
      },
      // filter: filter
    },
    {
      id: "line_xj",
      type: "line",
      source: "osm",
      "source-layer": "xj",
      paint: {
        "line-color": '#000000',
      }
    },
    {
      id: "line_gslg",
      type: "line",
      source: "osm",
      "source-layer": "gslg",
      "minzoom": 6,
      paint: {
        "line-color": '#6495ED',
        "line-width": 2,
        "line-gap-width": 10
      }
    },
    {
      id: "text_gslg",
      type: "symbol",
      source: "osm",
      "source-layer": "gslg",
      "minzoom": 7,
      layout: {
        "symbol-placement" : 'line',
        'text-field': ['get', "DATA"],
        'text-font' : ['Microsoft YaHei Regular']
      }
    },
    {
      id: "text_xjs",
      type: "symbol",//circle symbol
      source: "osm",
      "source-layer": "xjs",
      "minzoom": 6,
      layout: {
        'text-field': ['get', "DATA"],
        'text-font' : ['hwxk'],
        "text-size": {
            "base": 1,
            "defaul": 10,
            //字体默认大小为1，10-16级字体为大小为 11.5
            //大于16级字体大小为18
            "stops": [
                [
                    10,
                    15
                ],
                [
                    16,
                    40
                ]
            ]
        }
      }
    }
  ],
  "id": "test"
}

//初始化地图并加载
  const map = new Map({
    basemap: "topo-vector"
  });
  const view = new MapView({
    container: "viewDiv", // Reference to the view div created in step 5
    map: map, // Reference to the map object created before the view
    zoom: 8, // Sets zoom level based on level of detail (LOD)
    center: [114.4, 38.2]
  });

  var tileLyr = new VectorTileLayer({
    style: style
  });

  map.add(tileLyr)