I'm working with OpenLayer 3.1.1, starting from this example: http://openlayers.org/en/v3.1.1/examples/vector-layer.html?q=hover I would like show information on mouse hover and select multiple feature on click. Going to add the second feature to the selection it becomes darker because selected twice (and counted twice keeping track of the features currently selected). Why?
var selectClick = new ol.interaction.Select({ condition: ol.events.condition.click, addCondition: ol.events.condition.shiftKeyOnly , toggleCondition: ol.events.condition.never, removeCondition: ol.events.condition.altKeyOnly, }); select = selectClick; map.addInteraction(select); var highlightStyleCache = {}; var featureOverlay = new ol.FeatureOverlay({ map: map, style: function(feature, resolution) { var text = resolution < 5000 ? feature.get('DIVISION') : ''; if (!highlightStyleCache[text]) { highlightStyleCache[text] = [new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#f00', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.1)' }), text: new ol.style.Text({ font: '12px Calibri,sans-serif', text: text, fill: new ol.style.Fill({ color: '#000' }), stroke: new ol.style.Stroke({ color: '#f00', width: 1 }) }) })]; } return highlightStyleCache[text]; } }); var highlight; var showCheckbox = document.getElementById('infoShow'); var displayFeatureInfo = function(pixel) { var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return feature; });if (showCheckbox.checked) { if (feature !== highlight) { if (highlight) { featureOverlay.removeFeature(highlight); } if (feature) { featureOverlay.addFeature(feature); } highlight = feature; } } };$(map.getViewport()).on('mousemove', function(evt) {var pixel = map.getEventPixel(evt.originalEvent); displayFeatureInfo(pixel);});
أكثر...
var selectClick = new ol.interaction.Select({ condition: ol.events.condition.click, addCondition: ol.events.condition.shiftKeyOnly , toggleCondition: ol.events.condition.never, removeCondition: ol.events.condition.altKeyOnly, }); select = selectClick; map.addInteraction(select); var highlightStyleCache = {}; var featureOverlay = new ol.FeatureOverlay({ map: map, style: function(feature, resolution) { var text = resolution < 5000 ? feature.get('DIVISION') : ''; if (!highlightStyleCache[text]) { highlightStyleCache[text] = [new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#f00', width: 1 }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.1)' }), text: new ol.style.Text({ font: '12px Calibri,sans-serif', text: text, fill: new ol.style.Fill({ color: '#000' }), stroke: new ol.style.Stroke({ color: '#f00', width: 1 }) }) })]; } return highlightStyleCache[text]; } }); var highlight; var showCheckbox = document.getElementById('infoShow'); var displayFeatureInfo = function(pixel) { var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { return feature; });if (showCheckbox.checked) { if (feature !== highlight) { if (highlight) { featureOverlay.removeFeature(highlight); } if (feature) { featureOverlay.addFeature(feature); } highlight = feature; } } };$(map.getViewport()).on('mousemove', function(evt) {var pixel = map.getEventPixel(evt.originalEvent); displayFeatureInfo(pixel);});
أكثر...