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

Question

I have layers on Geoserver(2.13.0) that configure with MSSQL DataStore.I install vector tile extension for the same version.我在 Geoserver(2.13.0) 上有配置 MSSQL DataStore 的层。我安装了相同版本的矢量切片扩展。 After installed, while previewing with TileLayers pbf by selection from drop down result is displaying.安装后，通过从下拉结果中选择使用 TileLayers pbf 进行预览时显示。

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

And also while a request from OpenLayers client same result is coming.并且在来自 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>

But in the same example, I want to apply style for the wmts using GetTile.但在同一个示例中，我想使用 GetTile 为 wmts 应用样式。 I tried according to documentation Below is the code not working:我根据文档尝试了以下代码不起作用：

<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>

Could you suggest me how I can apply my custom styles and getTile from GeoServer with ol.format.MVT()?您能否建议我如何使用 ol.format.MVT() 从 GeoServer 应用我的自定义样式和 getTile？

Answer 1

I think you are facing a projection problem.我认为您正面临投影问题。 I also have faced the same problems.我也遇到过同样的问题。 I solved it by changing views.我通过改变视图解决了它。

You can try this:你可以试试这个：

    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