0

I have displayed map box vector tiles for EPSG:3857 projection customized by me with 21 zoom levels.below is code using in my application

<!DOCTYPE html -->
<html>
<head>
  <title>Vector tiles</title>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
  <style>
    html, body {
      font-family: sans-serif;
      width: 100%;
    }
    .map {
      height: 800px;
      width: 100%;
    }
  </style>
</head>
<body>
  <h3>vector tiles</h3>
  <div id="map" class="map"></div>
  <script>
 var intialExtent = ol.extent.applyTransform([
     74.087,
    11.594,
      78.589,
     18.477],
     ol.proj.getTransform("EPSG:4326", "EPSG:3857")
     );
  var style_simple = new ol.style.Style({
    fill: new ol.style.Fill({
      color: '#ADD8E6'
    }),
    stroke: new ol.style.Stroke({
      color: '#880000',
      width: 1
    })
  });
var style_highlighted = new ol.style.Style({
   fill: new ol.style.Fill({
     color: 'blue'
   }),
   stroke: new ol.style.Stroke({
     color: '#880000',
     width: 1
   })
 });
   function simpleStyle(feature) {
   if (feature.get("surveynumber") == "STREAM") {
     return style_highlighted;
   }
   return style_simple;
 }

  var layer = 'Cadastral:CADASTRAL_Kodagu';
  var projection_epsg_no = '3857';
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
       center: ol.proj.fromLonLat([77, 14]),
          zoom: 6
    }),
    layers: [
       new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
    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:8087/geoserver/gwc/service/tms/1.0.0/' + layer +
            '@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
      })
    })

    ]
  });
   map.getView().fit(intialExtent, map.getSize());
  </script>
</body>
</html>

`

but tiles displaying like as show in below image enter image description here

Those empty space taking time to generate.I tried to seed the layer but getting error Chunk [format=application/x-protobuf;type=mapbox-vector] is not a valid entry . How to speed up layer to generate vector tiles and what is issue with seeding

  • what is your issue? generating 21 zoom levels will always take some time – Ian Turton May 6 at 15:52
  • Please suggest me which is better.i am new to this – veena hosur May 6 at 15:56
  • use png tiles may be? – Ian Turton May 6 at 15:58
  • Then what is use of mapbox tiles?? – veena hosur May 6 at 16:05
  • I have no idea, what are you doing? – Ian Turton May 6 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.