CODEWITHSUNDEEP
openlayers-3
Wenhua Hu
Wenhua Hu

Reputation: 259

Highlight the lineString or point in Openlayers3

In my mapping application, I can hightlight the polygon, when mouseover it or select it, but the point and lineString cannot be highlighted, thought I add the style in script.

I found some working examples with ol.featureOverlay online, but now in new openlayers3, ol.featureOverlay is removed from library, do some specialists know how to solve it?

Upvotes: 2

Views: 1917

Answers (1)

Jonatas Walker
Jonatas Walker

Reputation: 14150

Tell your interaction to read the styles from a function of yours:

var hoverInteraction = new ol.interaction.Select({
  condition: ol.events.condition.pointerMove,
  style: geometryStyle
});

And your function will be like above:

function geometryStyle(feature){
  var
    style = [],
    geometry_type = feature.getGeometry().getType(),
    white = [255, 255, 255, 1],
    blue = [0, 153, 255, 1],
    width = 6
  ;

  style['LineString'] = [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: white, width: width + 2
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: blue, width: width
      })
    })
  ],
  style['Polygon'] = [
    new ol.style.Style({
      fill: new ol.style.Fill({ color: [255, 255, 255, 0.5] })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: white, width: 3.5
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: blue, width: 2.5
      })
    })
  ],
  style['Point'] = [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: width * 2,
        fill: new ol.style.Fill({color: blue}),
        stroke: new ol.style.Stroke({
          color: white, width: width / 2
        })
      })
    })
  ];

  return style[geometry_type];
}

http://jsfiddle.net/jonataswalker/prx41egk/

Upvotes: 1

Related Questions