矢量瓦片

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://xxx: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://xxx: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)