Vector tiles: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. After installed, while previewing with TileLayers pbf by selection from drop down result is displaying.

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.

<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. 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()?

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
    }),

Vector tiles:GetTile WMTS ol.format.MVT() with Openalyer v5.3.0 From Geoserver

Question

1 answers

solution1
0 2019-11-18 13:15:32

Vector tiles:GetTile WMTS ol.format.MVT() with Openalyer v5.3.0 From Geoserver

Question

1 answers

solution1 0 2019-11-18 13:15:32

solution1
0 2019-11-18 13:15:32