矢量瓦片

Geoserver 发布矢量瓦片

https://docs.geoserver.org/la…

geoserver 矢量图片发布为 mapbox gl style

https://docs.mapbox.com/mapbo…

https://docs.geoserver.org/la…

示例：（注意投影必须是 900913）

{
  "version": 8,
  "name": "AOI",
  "sources": {
    "osm": {
      "type": "vector",
      "tiles": ["http://10.42.169.38:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=beijing_aoi:aoi_china&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}"]
    }
  },
  "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {"background-color": "#ffffff"}
        }, {
            "id": "aoi",
            "type": "line",
            "source": "osm",
            "source-layer": "aoi_china",
            "paint": {"line-color": "#1B9E77"}
        }
    ]
};

Leaflet 调用 mapbox-gl-js

https://openmaptiles.org/docs…

Leaflet for R 调用 mapbox-gl-js

library(leaflet)
library(leaflet.mapboxgl)

leaflet() %>%
  addMapboxGL(accessToken=NA, style = 'http://10.42.169.38:8080/geoserver/www/vectortiles/aoi.js') %>%
  addTiles('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    options=tileOptions(tileSize=256, minZoom=3, maxZoom=20, subdomains="1234"),
    attribution = '&copy; <a href="http://ditu.amap.com/"> 高德地图 </a>',
    group="高德地图" 
  ) %>%
  setView(116.14, 39.9, 10)