OpenLayers 3：在鼠标点击时更改矢量图块样式

Question

我试图找到如何在鼠标点击时改变vectortiles图层的样式。我知道我需要层的每个部分的ID，但我无法达到它。我从地质服务器（道路，建筑物......）加载了5层，我需要使用id来改变每个道路的确切路径。

这是我的代码：

  var projection_epsg_no = '900913';
  var layer = ['final:popisky', 'final:budovy', 'final:cestyNOVE', 'final:okres', 'final:voda', 'final:zeleznice'];
  var olLayer = [new ol.layer.VectorTile({
            style: simpleStyle,
            source: new ol.source.VectorTile({
                tilePixelRatio: 1, // oversampling when > 1                     labels
                tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
                format: new ol.format.MVT(),
                url: '/geoserver/gwc/service/tms/1.0.0/' + layer[0] + '@EPSG%3A'+ projection_epsg_no +'@pbf/{z}/{x}/{-y}.pbf'
            })
        }),  
          new ol.layer.VectorTile({
            style: simpleStyle,
            source: new ol.source.VectorTile({
                tilePixelRatio: 1, // oversampling when > 1                     buildings
                tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
                format: new ol.format.MVT(),
                url: '/geoserver/gwc/service/tms/1.0.0/' + layer[1] + '@EPSG%3A'+ projection_epsg_no +'@pbf/{z}/{x}/{-y}.pbf'
            })
        }),
          new ol.layer.VectorTile({
            style: simpleStyle,
            source: new ol.source.VectorTile({
                tilePixelRatio: 1, // oversampling when > 1                     roads
                tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
                format: new ol.format.MVT({
                    featureCLass: ol.feature
                }),
                url: '/geoserver/gwc/service/tms/1.0.0/' + layer[2] + '@EPSG%3A'+ projection_epsg_no +'@pbf/{z}/{x}/{-y}.pbf'
            })
        }),
          new ol.layer.VectorTile({
            style: simpleStyle,
            source: new ol.source.VectorTile({
                tilePixelRatio: 1, // oversampling when > 1                     boundary
                tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
                format: new ol.format.MVT(),
                url: '/geoserver/gwc/service/tms/1.0.0/' + layer[3] + '@EPSG%3A'+ projection_epsg_no +'@pbf/{z}/{x}/{-y}.pbf'
            })
        }),
          new ol.layer.VectorTile({
            style: simpleStyle,
            source: new ol.source.VectorTile({
                tilePixelRatio: 1, // oversampling when > 1                     water
                tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
                format: new ol.format.MVT(),
                url: '/geoserver/gwc/service/tms/1.0.0/' + layer[4] + '@EPSG%3A'+ projection_epsg_no +'@pbf/{z}/{x}/{-y}.pbf'
            })
        }),
          new ol.layer.VectorTile({
            style: simpleStyle,
            source: new ol.source.VectorTile({
                tilePixelRatio: 1, // oversampling when > 1                     railways
                tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
                format: new ol.format.MVT(),
                url: '/geoserver/gwc/service/tms/1.0.0/' + layer[5] + '@EPSG%3A'+ projection_epsg_no +'@pbf/{z}/{x}/{-y}.pbf'
            })
        })]
  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
}) ;

var map = new ol.Map({
target: 'map',
render: 'canvas',
loadTilesWhileInteracting: true,
view: new ol.View({
  center: [1953570, 6182062],    /*2117073, 6215008*/
  zoom: 10.2
}),
layers: [raster, olLayer[0], olLayer[1], olLayer[2], olLayer[3], olLayer[4], olLayer[5]],
controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
        collapsible: false
    })
}).extend([mousePositionControl, scaleLineControl])
});


  zoomslider = new ol.control.ZoomSlider();
  map.addControl(zoomslider);

var displayFeatureInfo = function(pixel) {

var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
});

var info = document.getElementById('info');
var typ = document.getElementById('typ');
    if (feature) {
        info.innerHTML = feature.get('fclass') || feature.get('NAZOKRES') || feature.get('type');
        typ.innerHTML = feature.get('type');
    } else {
        info.innerHTML = ' ';
        typ.innerHTML = ' ';
    }
};

    map.on("pointermove", function(e) {
        if (e.dragging) {
            return;
        }
        var pixel = e.map.getEventPixel(e.originalEvent);
            displayFeatureInfo(pixel);
        var hit = e.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
            return true;
        });
        e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

map.on('click', function (e) {
  var pixel = map.getEventPixel(e.originalEvent);
  selectedId = map.forEachFeatureAtPixel(e.pixel, function(olLayer) {
    return olLayer[2].getId('osm_id');
  });
  map.forEachFeatureAtPixel(pixel, function (feature) {
    olLayer[2].setStyle(new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(255,0,0,0.5)',
            width: 3
        })
    })
    );
});
});

如果有人知道该怎么做请帮助我。我花了很多时间找到问题，但没有成功。 谢谢，乔。