Arcgis加載Geoserver矢量切片

原帖地址

灑家廢物 - 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)

效果圖