Openlayer加载geoserver发布的矢量切片

灰太狼 2022-09-13 05:27 402阅读 0赞

ol版本使用6.1.1访问矢量切片会报错，推荐使用5.3.3版本

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16][]

拉下来，添加3857

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

选择进行预览（注意：预览4326/geojson没有问题，但是3857和900913的geojson预览不出来。不过不用担心，虽然预览不出来，但是前端是可以访问到的）

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

# 使用WMTS加载矢量切片 #

<template>
      <div>
        <div id="map" style="width: 100vw; height: 100vh"></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 } from "ol/source";
    import WMTSTileGrid from "ol/tilegrid/WMTS";
    import { GeoJSON } from "ol/format";
    
    export default {
      name: "OlVectorTiles",
      data() {
        return {
          map: {},
        };
      },
      mounted() {
        this.map = new Map({
          target: "map",
          view: new View({
            center: [100, 30],
            zoom: 6,
            projection: "EPSG:4326",
          }),
          layers: [
            new Tile({
              source: new OSM(),
            }),
            new VectorLayerTile({
              source: new VectorSourceTile({
                url: "http://120.76.197.111:8090/geoserver/gwc/service/wmts?request=GetTile&service=WMTS&version=1.0.0&layer=cite:sichuan&style=&tilematrix=EPSG:4326:{z}&tilematrixset=EPSG:4326&format=application/json;type=geojson&tilecol={x}&tilerow={y}",
                format: new GeoJSON(), //切片格式
                tileGrid: new WMTSTileGrid({
                  extent: [-180.0, -90.0, 180.0, 90.0], //范围
                  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,
                  ],
                }),
              }),
              // 对矢量切片数据应用的样式
              style: new Style({
                fill: new Fill({
                  color: "rgba(255,128,0,0.5)",
                }),
                stroke: new Stroke({
                  color: "#40FF00",
                  width: 1,
                }),
              }),
            }),
          ],
        });
      },
      methods: {},
    };
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

# 使用MVT切片格式加载矢量切片 #

加载3857

> 注意：
> 
> 1.  加载900913也可以，把下面所有的3857换成900913即可。但是我用MVT没加载出4326
> 2.  postgis 切片生成的是mvt格式图片,所以要用web墨卡托坐标系3857

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

## 使用4326加载矢量切片：暂未成功 ##

网上都说用以下代码，但我并没有成功加载4326。

可以换种实现方式，把shp数据发布成在线geojson，使用wfs在前端加载此在线geojson。参考：[https://blog.csdn.net/qq\_40323256/article/details/107817399][https_blog.csdn.net_qq_40323256_article_details_107817399]

<template>
      <div>
        <div id="map" style="width: 100vw; height: 100vh"></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 } from "ol/source";
    import MVT from "ol/format/MVT";
    
    import * as olProj from "ol/proj";
    import { createXYZ } from "ol/tilegrid";
    
    export default {
      name: "OlVectorTiles",
      data() {
        return {
          map: {},
        };
      },
      mounted() {
        this.map = new Map({
          target: "map",
          view: new View({
            center: [105, 28],
            zoom: 6,
            projection: "EPSG:4326",
          }),
          layers: [
            new Tile({
              source: new OSM(),
            }),
            new VectorLayerTile({
              source: new VectorSourceTile({
                projection: "EPSG:4326",
                format: new MVT(), //切片格式
                tileGrid: createXYZ({
                  extent: olProj.get("EPSG:4326").getExtent(),
                  maxZoom: 22,
                }),
                tilePixelRatio: 1,
                // 矢量切片服务地址
                tileUrlFunction: function (tileCoord) {
                  return (
                    "http://120.76.197.111:8090/geoserver/gwc/service/tms/1.0.0/" +
                    "cite:sichuan@EPSG%3A4326@pbf/" +
                    (tileCoord[0] - 1) +
                    "/" +
                    tileCoord[1] +
                    "/" +
                    (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
                    ".pbf"
                  ); //pbf矢量切片
                },
              }),
    
              // 对矢量切片数据应用的样式
              style: new Style({
                fill: new Fill({
                  color: "rgba(255,128,0,0.5)",
                }),
                stroke: new Stroke({
                  color: "#40FF00",
                  width: 1,
                }),
              }),
            }),
          ],
        });
      },
      methods: {},
    };
    </script>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/229731dd411d41b08f1e695a5c9efe72.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/52a2cd178b5e4e148f5fb80d3816612b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/5893937d6a4e4689b5a23cfc789e9ba9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/c628d1c40369477792ae18dad2b3dd89.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/89aecadc72fc4bd0ac9d9e3a4e5ea0a0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/53a92e9b4724452e9136ab4cde1339a8.png
[https_blog.csdn.net_qq_40323256_article_details_107817399]: https://blog.csdn.net/qq_40323256/article/details/107817399