3

I'm using OpenLayers 5.3 and GeoServer to create a web map. Previously, I was using Leaflet and was able to display my layer as a vector tile. Now, I'm having issues getting the vector tile to display on my base map. I suspect a projection issue, but I don't see where I'm going wrong.

The data is in EPSG:3297. However, using leaflet I didn't need to transform it--is this different for OpenLayers?

My code:

<!DOCTYPE html -->
<html>
<head>
<title>SIG webviewer</title>
<script src="ol.js"></script>
<link rel="stylesheet" href="ol.css">


<style>
/*Set the dimensions of our map */
.map {
height: 100%;
width: 100%;
}
</style>

</head>
<body>
<!--Create our map object -->
<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;
  }

// Set the coordinate system
var projection_epsg_no = '900913';
// Set the variable for storing the workspace:layername
var s_coupureaerien_layer = 'test:elec_appareil_coupure_aerien_hta';
// Creating the full vectorTile url
var s_coupureaerienUrl = '/geoserver/gwc/service/tms/1.0.0/' + s_coupureaerien_layer + '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf';
// Creating the Leaflet vectorGrid object
//var s_coupureaerien_vectorgrid = L.vectorGrid.protobuf(s_coupureaerienUrl, vectorTileOptions);
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-149.3, -17.7]),
    zoom: 7
  }),
  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(),
        //defaultDataProjection: 'EPSG: 900913',
        url: s_coupureaerienUrl,
      }),

    }),
    new ol.layer.Tile({
      source: new ol.source.OSM({
        url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
      })
    })]
});

map.on('click', function(e) {
  console.log(map.getLayers());
})

</script>
</body>
</html>

I have some things commented out that I was testing/considering the culprit of my problems, but no luck.

  • If you got it working in Leaflet, then the easiest way of debugging would be to compare network requests for vector layers tiles in Leaflet and in OpenLayers. – TomazicM Jun 2 at 13:59
0

if you're working with localhost (and listening on port 8080) you should:

s_coupureaerienUrl = 'http://localhost:8080' + s_coupureaerienUrl

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.