geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （二）（小白必备：超详细教程）

上一篇讲了 如何利用geoserver 发布矢量切片，接下来我们说 如何去展示，既然做我们就作全面吧，谁让我们gis 就是这么苦逼呢，哈哈。

环境：

geoserver 2.21

vue 2.0

openlayers 6.14

leaflet 1.8

上一篇地址：geoserver 发布矢量切片流程geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （一）（小白必备：超详细教程）

下一篇地址：leaflet加载展示

geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （三）（小白必备：超详细教程）_Giser_往事随风的博客-CSDN博客

二、openlayers 加载geoserver 发布的矢量切片（pbf） 进行前端展示

这里使用的是vue 2的框架哈，老规矩先引入依赖，自己百度吧，我懒得写了。

然后直接放源码吧，懒得叙述了，没啥好说的，不过我看网上有的是直接拿我上一篇获得的地址

http://localhost:7777/geoserver/gwc/service/tms/1.0.0/testXXX%3Ahefei_xiang@EPSG%3A4326@pbf

进行加载的，如下图：

 不过我测试的有点问题，等后面在说吧。这里我取了个巧，直接看geoserver 预览页面里面的源码去做的

找到上篇介绍的预览窗口页面，点击预览，打开控制台，就可以看到geoservre 是如何用openlayers 加载的了。然后拿过来自己改成vue 的加载方式，搞定。下面放源码。

<template>
    <div id="olMap">
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import {Projection} from 'ol/proj'
import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from "ol/source/VectorTile";
export default {
  name: 'OlVectorTiles',
  data() {
    return {
      map: null,
      baseUrl: 'http://localhost:7777/geoserver/gwc/service/wmts',
      params: null,
      gridsetName: null
    };
  },
  mounted() {     //可以出来结果
    this.gridsetName = 'EPSG:4326',
      this.params = {
        'REQUEST': 'GetTile',
        'SERVICE': 'WMTS',
        'VERSION': '1.0.0',
        'LAYER': 'testXXX:hefei_xiang',
        'STYLE': '',
        'TILEMATRIX': this.gridsetName + ':{z}',
        'TILEMATRIXSET': this.gridsetName,
        'FORMAT': 'application/vnd.mapbox-vector-tile',
        '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 TileLayer({
      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 VectorTileSource({
      url: this.urlConstruct(),
      format: new MVT({}),
      projection: projection,
      tileGrid: tileGrid
    });
    let vectorLayer = new VectorTileLayer({
      source: vectorSource,
      wrapX:false,
    });
    let views = new View({
      center: [117.28, 31.86],
      projection: projection,
      zoom: 6,
      resolutions: resolutions,
      extent: [-180.0,-90.0,180.0,90.0]
    });
    this.map = new Map({
      layers: [tileOSM, vectorLayer],
      view: views,
      target: 'olMap',
    });

  },
  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>
#olMap{
  height:100%;
  width: 100%;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}

</style>

如果你是geojson数据，先引入格式

import {GeoJSON} from 'ol/format'

然后把下面的地方改下就行

 

改为下面这个。

  'FORMAT': 'application/json;type=geojson',

  format: new GeoJSON({}),    //切片格式

我发现我这种方式加载的有点意思，更好扩展呢，只要改这两个参数就行了，网上写的可能更有针对性吧。哈哈。

下一篇：leaflet 加载 geoserver 发布的矢量切片（pbf）