Bonjour à tous,
Débutant dans le webmapping, j'ai tout de même réussi à afficher une carte contenant un fond OSM et plusieurs couches avec des fichiers KML (le tout basé sur openlayers v3).
Je cherche à afficher des infobulles au survol uniquement sur les points du layer "mes" ou de l'intégralité d'un seul layer (je pourrais alors mettre mes points dans un seul fichier KML).
Le code ci-dessus me donne bien des infobulles au survol, mais sur tous mes layers.
Merci des pistes que vous pourrez me donner
Débutant dans le webmapping, j'ai tout de même réussi à afficher une carte contenant un fond OSM et plusieurs couches avec des fichiers KML (le tout basé sur openlayers v3).
Code:
var dept = new ol.layer.Vector({
source: new ol.source.KML({
extractStyles: true,
extractAttributes: true,
projection: 'EPSG:3857',
url: 'data/kml/dept.kml'
})
});
var ZD = new ol.layer.Vector({
source: new ol.source.KML({
extractStyles: true,
extractAttributes: true,
projection: 'EPSG:3857',
url: 'data/kml/zd.kml'
})
});
var mes = new ol.layer.Vector({
source: new ol.source.KML({
extractStyles: true,
extractAttributes: true,
projection: 'EPSG:3857',
url: 'data/kml/RA201A.kml'
})
});
var fond = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ZoomToExtent({
extent: ol.proj.transformExtent([2.20000, 46.80000,7.07520,44.63740],'EPSG:4326', 'EPSG:3857')
}),
new ol.control.FullScreen({
tipLabel: 'Activer/Quitter le plein écran'
})
]),
layers: [ fond, dept, ZD,mes],
target: 'map',
view: new ol.View({
center: ol.proj.transform([2.20000, 46.80000],'EPSG:4326', 'EPSG:3857'),
zoom: 7
})
})
var info = $('#info');
info.tooltip({
animation: false,
trigger: 'manual'
});
var displayFeatureInfo = function(pixel) {
info.css({
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return feature;
});
if (feature) {
info.tooltip('hide')
.attr('data-original-title', feature.get('description'))
.tooltip('fixTitle')
.tooltip('show');
} else {
info.tooltip('hide');
}
};
$(map.getViewport()).on('mousemove', function(evt) {
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('click', function(evt) {
displayFeatureInfo(evt.pixel);
});Le code ci-dessus me donne bien des infobulles au survol, mais sur tous mes layers.
Merci des pistes que vous pourrez me donner