Highlight a feature on WMS layer using OL3 + mapserver

Question

In OL2 I think that it was done by using something like this:

the_control = new OpenLayers.Control.GetFeature({
   protocol: OpenLayers.Protocol.WFS.fromWMSLayer(mymap, {
      geometryName: 'geom',
      featureType: 'feature'
   }),
   box: false,
   hover: false
});

which sent XML request to mapserver which returned GML response with the geometry.

What is the alternative in OL3? I just want to 'highlight' the the feature on WMS layer. How to setup the select interaction with the WMS layer OL3, send information to mapserver and highlight the feature according to the response? And how to configure layer in mymap.map file?

I get response from mapserver like this:

<?xml version="1.0" encoding="UTF-8"?>

<msGMLOutput 
     xmlns:gml="http://www.opengis.net/gml"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <tudu_linestring_layer>
    <gml:name>TODO 3 (WMS)</gml:name>
        <tudu_linestring_feature>
            <gml:boundedBy>
                <gml:Box srsName="EPSG:102067">
                    <gml:coordinates>-687941.344000,-1099495.708000 -678154.701000,-1093996.637000</gml:coordinates>
                </gml:Box>
            </gml:boundedBy>
            <fid>8394</fid>
            <color>#00C800</color>
            <layer>0</layer>
            <version>20.3</version>
            <idgr>173314038596</idgr>
            <width>1</width>
            <linetype>solid</linetype>
            <todo>173314</todo>         

        </todo_linestring_feature>
    </todo_linestring_layer>
</msGMLOutput>

The style is set up like this:

new ol.style.Style({
  stroke: new ol.style.Stroke({
     color: '#007FFF',
     width: 5
  })
}),

Answer 1

The easiest way to achieve the same in OpenLayers 3 is to use WMS GetFeatureInfo. Your code could look something like this (assuming mymap is your layer with a WMS source, and map is your ol.Map instance):

var parser = new ol.format.WMSGetFeatureInfo();
var highlightOverlay = new ol.Layer.Vector({
  // style: (customize your highlight style here),
  source: new ol.source.Vector(),
  map: map
});
map.on('singleclick', function(evt) {
  var view = map.getView();
  var url = mymap.getSource().getFeatureInfoUrl(evt.coordinate,
      view.getResolution(), view.getProjection(),
      {'INFO_FORMAT': 'application/vnd.ogc.gml'});
  $.ajax(url).then(function(response) {
    var features = parser.readFeatures(response);
    highlightOverlay.getSource().clear();
    highlightOverlay.getSource().addFeatures(features);
  });
});

In your MapServer mapfile, you will have to set the layer TEMPLATE parameter for the layer to be queryable by GetFeatureInfo requests. You also need to configure some METADATA to include geometries in the response:

LAYER
  TYPE LINE
  ...
  METADATA
    "gml_geometries" "mygeom"
    "gml_mygeom_type" "line"
  END
  ...
END

The above assumes that your layer is a line layer, and that the geometry column in your data is 'mygeom'.