3

Using the modify interaction - the default behaviour is to show existing vertex as point when hover it.

the mouse is hover the left bottom corner

(When the mouse is hovered over the left bottom vertex - the vertex is shown)

Is there an option to always show the existing vertices?

link: https://jsfiddle.net/cc742av3/

      var polygon  = new ol.Feature(
            {
                geometry: new ol.geom.Polygon([
                [[37154.73247527378,6059120.393550643],
                [503114.85690170806,6060343.386003206],
                [525128.7210478389,5637187.99741647],
                [29816.777759896824,5656755.876657475],
                [37154.73247527378,6059120.393550643]]
                ])
            }
        );
       var layer = new ol.layer.Vector({ source: new ol.source.Vector({features: [polygon]})})
var modifyInteraction =  new ol.interaction.Modify(
  { features: new ol.Collection([polygon])
  });

var map = new ol.Map({
        target: 'map',
        interactions:[modifyInteraction],
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          layer
        ],
        view: new ol.View({
          center: [227941.55507507361 , 5912361.299243105],
          zoom: 6
        })
      });
  • 1
    what do you mean by "always"? – Chase Choi Dec 12 '17 at 11:40
  • not when overed – Shlomy Z Dec 13 '17 at 12:42
  • could you share some code or example you referred? – Chase Choi Dec 13 '17 at 13:08
1

Here I updated your fiddle: https://jsfiddle.net/cc742av3/3/

Code is from this example: http://openlayers.org/en/master/examples/polygon-styles.html

The trick is, you define two styles, one of them is a function to retrieve the points from your geometry:

  var styles = [
    /* We are using two different styles for the polygons:
     *  - The first style is for the polygons themselves.
     *  - The second style is to draw the vertices of the polygons.
     *    In a custom `geometry` function the vertices of a polygon are
     *    returned as `MultiPoint` geometry, which will be used to render
     *    the style.
     */
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    }),
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
          color: 'orange'
        })
      }),
      geometry: function(feature) {
        // return the coordinates of the first ring of the polygon
        var coordinates = feature.getGeometry().getCoordinates()[0];
        return new ol.geom.MultiPoint(coordinates);
      }
    })
  ];

Then you apply these styles to your layer:

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({features: [polygon]}),
  style: styles

});
  • Thank you! When i try to use this style for the modify interaction - it did not override the default style - link – Shlomy Z Dec 17 '17 at 9:47
  • Sry for late answer @ShlomyZ. I hope you figured it out in the meantime but in case not: you just need to update the style name on line 66 like this: style:modifyStyles – ylka Jan 8 '18 at 14:58

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.