Geoserve發佈Mapbox矢量切片格式openlayer加載案例

一.Geoserver安裝配置

1.下載安裝geoserver，官網地址點擊
2.在官網配置與geoserver版本一致的[下載地址這裏是2.5.1的版本]，(https://sourceforge.net/projects/geoserver/files/GeoServer/2.15.1/extensions/geoserver-2.15.1-vectortiles-plugin.zip/download)
3.重啓GeoServer

二.發佈矢量圖層

1.發佈圖層的時候勾選如下

注意：發佈的圖層必須有座標系

三.代碼調用

<template>
  <div>
    <div id="mapDiv"></div>
  </div>
</template>
<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import GeoJSON from 'ol/format/GeoJSON';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import TileWMS from 'ol/source/TileWMS';
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';
import WMTS from 'ol/tilegrid/WMTS';
import TileGrid from 'ol/tilegrid/TileGrid';
import Projection from 'ol/proj/Projection';
import { Fill, Icon, Stroke, Style, Text } from 'ol/style';
import "ol/ol.css";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initMap();
  },

  methods: {

    initMap() {
      var gridsetName = 'EPSG:4326';
      var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
      var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
      var style = '';
      var format = 'application/vnd.mapbox-vector-tile';
      var infoFormat = 'text/html';
      var layerName = 'zhaoxiyang:mdj';
      var projection = new Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu'
      });
      var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
      const params = {
        REQUEST: 'GetTile',
        SERVICE: 'WMTS',
        VERSION: '1.0.0',
        LAYER: layerName,
        STYLE: style,
        TILEMATRIX: gridsetName + ':{z}',
        TILEMATRIXSET: gridsetName,
        FORMAT: format,
        TILECOL: '{x}',
        TILEROW: '{y}'
      };

      var url = baseUrl + '?'
      for (var param in params) {
        url = url + param + '=' + params[param] + '&';
      }
      url = url.slice(0, -1);
      var source = new VectorTileSource({
        url: url,
        format: new MVT({}),
        projection: projection,
        tileGrid: new WMTS({
          tileSize: [256, 256],
          origin: [-180.0, 90.0],
          resolutions: resolutions,
          matrixIds: gridNames
        }),
        wrapX: true
      });

      new Map({
        target: "mapDiv",
        layers: [
          // new TileLayer({
          //   source: new XYZ({
          //    url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
          //   }),
          //   isGroup: true,
          //   name: "天地圖文字標註"
          // }),
          // new TileLayer({
          //   source: new OSM()
          // }),
          // new TileLayer({
          //   // source: new TileWMS({
          //   //   url: 'http://localhost:8080/geoserver/zhaoxiyang/wms',
          //   //   params: {
          //   //     FORMAT: 'image/png',
          //   //     VERSION: '1.1.1',
          //   //     tiled: true,
          //   //     LAYERS: 'zhaoxiyang:mdj',
          //   //     exceptions: 'application/vnd.ogc.se_inimage',
          //   //     tilesOrigin: 128.222948 + "," + 43.423849
          //   //   }
          //   // })
          // }),
          new VectorTileLayer({
            source: new VectorTileSource({
              url: 'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=zhaoxiyang:mdj02&STYLE=&TILEMATRIX=EPSG:4326:{z}&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}',
              format: new MVT({}),
              // projection: projection,
              tileGrid: new WMTS({
                //  tileSize: [256, 256],
                origin: [-180.0, 90.0],
                resolutions: resolutions,
                //   matrixIds: gridNames
              }),
              //  wrapX: true,
            })
          }),
        ],
        view: new View({
          projection: "EPSG:4326",    //使用這個座標系
          center: [129.607643, 44.562347],
          zoom: 8
        })
      });
    }
  }
};
</script>
<style scoped>
#map {
  height: 937px;
  width: 100%;
}
</style>