geoserver使用postgis数据进行矢量切片，并用openlayer加载

旧城等待， 2022-09-13 11:26 347阅读 0赞

# 将shp数据导入postgis中 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16][]

#  geoserver导入postgis数据 #

![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][]

#  openlayer加载 #

有个问题，就是实时更新数据库中的数据后，之前已经切片过要素数据不会更新，而缩放另一个视图层级，数据又是更新的

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

<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, 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: {},
        };
      },
      mounted() {
        this.initMap();
        this.clickFeature();
        this.pointerMove();
      },
      methods: {
        initMap() {
          this.map = new Map({
            target: "map",
            view: new View({
              center: [10836963.115396298, 3004762.6299129482],
              zoom: 6,
              projection: "EPSG:3857",
            }),
            layers: [
              new Tile({
                source: new OSM(),
              }),
              new VectorLayerTile({
                source: new VectorSourceTile({
                  url:
                    "http://120.76.197.111:8090/geoserver/gwc/service/tms/1.0.0/" +
                    "cite:sichuan_test_vectortile@EPSG%3A3857@pbf/{z}/{x}/{-y}.pbf",
                  format: new MVT(), //切片格式
                }),
                // 对矢量切片数据应用的样式
                style: new Style({
                  fill: new Fill({
                    color: "rgba(255,128,0,0.5)",
                  }),
                  stroke: new Stroke({
                    color: "#40FF00",
                    width: 1,
                  }),
                }),
              }),
            ],
          });
        },
        clickFeature() {
          this.map.on("click", (e) => {
            let feature = this.map.forEachFeatureAtPixel(e.pixel, (feature) => {
              return feature;
            });
            this.$message.success(feature.get("name"));
          });
        },
        // 设置鼠标划过矢量要素的样式
        pointerMove() {
          this.map.on("pointermove", (e) => {
            const isHover = this.map.hasFeatureAtPixel(e.pixel);
            this.map.getTargetElement().style.cursor = isHover ? "pointer" : "";
          });
        },
      },
    };
    </script>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/7a5a64edf5c7449bb671a33da7814906.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/035fb8626f434ba58f9e2da1ca999015.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/bbc59afbdba14a72b6e3e4faf0c2a3ef.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/ce78430668ca43d885eafdda3bf385a0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/b693c57e97fc49b49ed5378088a3638b.png