1

I am trying to highlight features when mouse interaction is triggered over a VectorTile layer.

I have followed some examples but there is no one that makes what I would like to do. The most likely is this VectorTile properties example but it only shows how to get properties. At this point, I tried different things.

First, I have seen the OL3 hover vector layer example and I tried to apply to a VectorLayer without any success.

Then, I tried to get the geometry of the feature adding it to an empty VectorLayer which every time will contain only those features under mouse position. Then I could apply a custom style to highlight these features. I added the following function:

    ...

    map.on('pointermove', function(e) {

      for (var i = 0; i < highlightedFeatures.length; i++) {
        highlightedFeatures[i].setStyle(null);
      }

      highlightedFeatures = [];

      map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
          if (feature.setStyle) {

            // Here I change the syle for those features that belongs 
            // to other type of layers (no VectorTiles)

            feature.setStyle(selectStyle);
            highlightedFeatures.push(feature);

          } else {
            console.log(feature.getProperties());
            console.log(feature.getType());
            // I get the polygons but they are very strange!
            console.log(feature.getGeometry());
          }
      });
    });   

    ...

I realised about console.log(feature.getGeometry()); method is showing an object that seems having a strange coordinates arrays:

    hk {
    a : Array[4]
        0 : 16741 
        1 : 28882 
        2 : 28553 
        3 : 4217
        length : 4
        __proto__ :  Array[0]
    b : Array[64]
        0 : 20751  
        1 : 28942  
        2 : 22853 
        3 : 30064 
        4 : 20135 
        ... // a lot of "coordinates"
        length : 64
        __proto__ : Array[0]
    c : Array[1]
        closure_uid_123785828 : 23488
    f : Object
        codi : "CF7692N9826901" 
        f_id : 5849
        layer : "coverage" 
        __proto__ : Object
    g : "Polygon" 
        __proto__ : Object
    }

Does anyone know why the coordinates are wrong? If I add the feature I get an error. Maybe someone knows how to get Geometries of VectorTile layers in a different way.

I am using OL3 v3.17.1 and I am using srs 3857.

I guess is not important but the highlighting style referenced variables before are:

    var highlightedFeatures = [],
    selectStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#0d47a1',
            width: 12
        }),
        image: new ol.style.Circle({
            radius: 5.5,
            stroke: new ol.style.Stroke({
                color: '#0d47a1',
                width: 12
            })
        })
    });
  • You'll find it much easier to intepret the structure of OpenLayers objects if you use the debug version of the library (ol-debug.js). That said, the coordinates are determined by the 'layout' parameter to the ol.geom.Polygon constructor, in this case 'XY'. This means that the array items are alternately the X and Y coordinates. See the API docs for ol.geom.Polygon. Can you post the error you're getting when you add the feature to your highlight layer? – Brian Schantz Aug 6 '16 at 6:48
1

There is an important property that you missed!

According to the documentation, you can set feature class to ol.Feature

new ol.source.VectorTile({
    format: new ol.format.MVT({
        featureClass: ol.Feature
    })
});

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.