Vue+OpenLayers学习系列（七）OpenLayers 加载GeoServer发布的矢量切片地图

一、首先要切片

注意首先要下载 GeoServer 的矢量切片插件（参见：https://zhuanlan.zhihu.com/p/62751184）

安装完矢量切片插件后，发布图层时，需要勾选如下：

然后找到发布的矢量切片图层

打开预览，并且查看浏览器中的源码，查看它的调用方式（在后面OpenLayers调用它时可以用同样的方式去调用）：

二、OpenLayers 调用

<template>
  <div>
    <div id="map" ref="rootmap">
    </div>
  </div>
</template>

<script>
  import "ol/ol.css";
  import { Map, View } from "ol";
  import {VectorTile as VectorLayerTile,Tile} from 'ol/layer'
  import {Style,Fill,Stroke} from 'ol/style';
  import {VectorTile as VectorSourceTile,OSM,WMTS} from 'ol/source'
  import {createXYZ} from 'ol/tilegrid';
  import WMTSTileGrid from 'ol/tilegrid/WMTS'
  import MVT from 'ol/format/MVT'
  import {Projection} from 'ol/proj'
  import {GeoJSON} from 'ol/format'

  export default {
    name: 'OlVectorTiles',
    data() {
      return {
        map: null,
        baseUrl: 'http://localhost:8080/geoserver/gwc/service/wmts',
        params: null,
        gridsetName: null
      };
    },
    mounted() {     //可以出来结果
      this.gridsetName = 'EPSG:4326',
      this.params = {
        'REQUEST': 'GetTile',
        'SERVICE': 'WMTS',
        'VERSION': '1.0.0',
        'LAYER': 'test-world:opengeo_countries',
        'STYLE': '',
        'TILEMATRIX': this.gridsetName + ':{z}',
        'TILEMATRIXSET': this.gridsetName,
        'FORMAT': 'application/json;type=geojson',
        'TILECOL': '{x}',
        'TILEROW': '{y}'
      };

      //切片名
      let matrixIds = ['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'];

      //分辨率
      let 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];

      //底图
      let tileOSM = new Tile({
        source: new OSM()
      });

      //切片策略
      let tileGrid = new WMTSTileGrid({
        tileSize: [256,256],
        extent: [-180.0,-90.0,180.0,90.0],  //范围
        origin: [-180.0, 90.0],   //切片原点
        resolutions: resolutions,   //分辨率
        matrixIds: matrixIds    //层级标识列表，与地图级数保持一致
      });

      //设置地图投影
      let projection = new Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu'
      });

      let vectorSource = new VectorSourceTile({
        url: this.urlConstruct(),
        format: new GeoJSON({}),    //切片格式
        projection: projection,
        tileGrid: tileGrid
      });
      let vectorLayer = new VectorLayerTile({
        source: vectorSource,
        wrapX:false,
      });
      let views = new View({
        center: [0, 0],
        projection: projection,
        zoom: 2,
        resolutions: resolutions,
        extent: [-180.0,-90.0,180.0,90.0]
      });
      this.map = new Map({
        layers: [tileOSM, vectorLayer],
        view: views,
        target: 'map',
      });

    },
    methods:{
      urlConstruct(){
        let url = this.baseUrl + '?';
        for (let param in this.params){
           url = url + param + '=' + this.params[param] + '&';
        }
        url = url.slice(0, -1);
        return url;
      }
    }
  };
</script>

<style>
  #map{
    height:800px;
    width: 1400px;
  }
  /*隐藏ol的一些自带元素*/
  .ol-attribution,.ol-zoom { display: none;}

</style>