矢量瓦片：GetTile WMTS ol.format.MVT() with Openalyer v5.3.0 From Geoserver

Question

我在 Geoserver(2.13.0) 上有配置 MSSQL DataStore 的层。我安装了相同版本的矢量切片扩展。 安装后，通过从下拉结果中选择使用 TileLayers pbf 进行预览时显示。

http://localhost:8080/geoserver/gwc/demo/mystate:State?gridSet=EPSG:900913&format=application/x-protobuf;type=mapbox-vector

并且在来自 OpenLayers 客户端的请求中，同样的结果即将到来。

<html>
<head>
    <title>Vector tiles</title>

    <script src="./js/build-ol.js"></script>
    <link rel="stylesheet" href="./css/ol.css">
    <style>
        html,
        body {
            font-family: sans-serif;
            width: 100%;
        }

        .map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>

<body>
    <h3>Mapbox Protobuf - vector tiles</h3>
    <div id="map" class="map"></div>
    <script>


        var gridsetName = 'EPSG:900913';
        var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
        var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
        var style = 'StateStyle';
        var format = 'application/x-protobuf;type=mapbox-vector';
        var infoFormat = 'text/html';
        var layerName = 'myState:State';
        var projection = new ol.proj.Projection({
            code: 'EPSG:900913',
            units: 'm',
            axisOrientation: 'neu'
        });
        var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338];
        params = {
            'REQUEST': 'GetTile',
            'SERVICE': 'WMTS',
            'VERSION': '1.0.0',
            'LAYER': layerName,
            'STYLE': style,
            'TILEMATRIX': gridsetName + ':{z}',
            'TILEMATRIXSET': gridsetName,
            'FORMAT': format,
            'TILECOL': '{x}',
            'TILEROW': '{y}'
        };

        function constructSource() {
            var url = baseUrl + '?'
            for (var param in params) {
                url = url + param + '=' + params[param] + '&';
            }
            url = url.slice(0, -1);

            var source = new ol.source.VectorTile({
                url: url,
                format: new ol.format.MVT({}),
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    tileSize: [256, 256],
                    origin: [-2.003750834E7, 2.003750834E7],
                    resolutions: resolutions,
                    matrixIds: gridNames
                }),
                wrapX: true,              
            });
            return source;
        }

        var layer = new ol.layer.VectorTile({
            source: constructSource()
        });

        var view = new ol.View({
            center: [0, 0],
            zoom: 2,
            projection: projection,
            extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
        });

        var map = new ol.Map({
            layers: [layer],
            target: 'map',
            view: view
        });
        map.getView().fit([-13603589.920418553, 6450443.998733485, -12407892.278044553, 7757990.05940472], map.getSize());

    </script>
</body>

</html>

但在同一个示例中，我想使用 GetTile 为 wmts 应用样式。 我根据文档尝试了以下代码不起作用：

<html>
<head>
  <title>Vector tiles</title>

  <script src="ol.js"></script>
  <link rel="stylesheet" href="ol.css">
  <style>
    html, body {
      font-family: sans-serif;
      width: 100%;
    }
    .map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
  <h3>Mapbox Protobuf - vector tiles</h3>
  <div id="map" class="map"></div>
  <script>

  var style_simple = new ol.style.Style({
    fill: new ol.style.Fill({
      color: '#ADD8E6'
    }),
    stroke: new ol.style.Stroke({
      color: '#880000',
      width: 1
    })
  });

  function simpleStyle(feature) {
    return style_simple;
  }

  var layer = 'myState:State';
  var projection_epsg_no = '900913';
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    layers: [new ol.layer.VectorTile({
      style:simpleStyle,
      source: new ol.source.VectorTile({
        tilePixelRatio: 1, // oversampling when > 1
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
        format: new ol.format.MVT(),
        url: 'http://localhost:8080/geoserver/gwc/service/wtms/1.0.0/' + layer +
            '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
      })
    })]
  });
  </script>
</body>
</html>

您能否建议我如何使用 ol.format.MVT() 从 GeoServer 应用我的自定义样式和 getTile？

Answer 1

我认为您正面临投影问题。 我也遇到过同样的问题。 我通过改变视图解决了它。

你可以试试这个：

    var map = new ol.Map({
       target: 'map',
       view: new ol.View({
       center: ol.proj.fromLonLat([89.5403, 22.8456]), ## change the long/lat values based on your data
       zoom: 2
    }),

矢量瓦片：GetTile WMTS ol.format.MVT() with Openalyer v5.3.0 From Geoserver

问题描述

1 个解决方案

解决方案1
0 2019-11-18 13:15:32

矢量瓦片：GetTile WMTS ol.format.MVT() with Openalyer v5.3.0 From Geoserver

问题描述

1 个解决方案

解决方案1 0 2019-11-18 13:15:32

解决方案1
0 2019-11-18 13:15:32