[Gfoss] R: Openlayers 4: Popup sulle feature
umbertofilippo
umbertofilippo a tiscali.it
Lun 4 Giu 2018 20:18:29 CEST
cosi' funziona.
suppongo che il problema fosse: 1) non gestisci mai ol.Overlay (non lo
chiami, vedi esempio ufficiale ol); 2) non gestisci la chiusura (ci sono
sia il css che l'html ma manca la parte js)
fammi sapere se hai problemi, ciao!
/**
* Elements that make up the popup.
*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var maxExtent = [14.068, 40.911, 14.2339, 41.0039];
var boundary = ol.proj.transformExtent(maxExtent, 'EPSG:4326',
'EPSG:3857');
var center = ol.proj.transform([14.15, 40.95], 'EPSG:4326',
'EPSG:3857');
/**
* Create an overlay to anchor the popup to the map.
*/
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
var edificato = new ol.layer.Vector({
title: 'Edificato',
source: new ol.source.Vector({
url:
'https://cors-anywhere.herokuapp.com/http://massimilianomoraca.it/download/test/edificato.geojson',
format: new ol.format.GeoJSON(),
}),
zIndex: 1
});
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel,
function(feature) {
return feature;
});
var info = document.getElementById('popup-content');
if (feature) {
info.innerHTML =
'<div>' + '<table>' + '<thead><td scope="row"
align="center" colspan="2">Informazioni</td></thead>' + '<tbody>' +
'<tr><th scope="row" align="left" colspan="1">Destinazione d\'uso:
</th><td colspan="1" align="right">' + feature.get('dest_uso') +
'</td></tr>' + '<tr><th scope="row" align="left" colspan="1">Altezza
stimata: </th><td colspan="1" align="right">' + feature.get('altezza') +
' m</td></tr>' + '<tr><th scope="row" align="left" colspan="1">Volume
stimato: </th><td colspan="1" align="right">' + feature.get('volume') +
' m<sup>3</sup></td></tr>' + '</tbody>' + '</table>' + '</div>';
} else {
info.innerHTML = 'Clicca su un poligono per leggere le
statistiche';
}
};
/**
* Create the map.
*/
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url:
'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
crossOrigin: 'anonymous'
})
}),
edificato
],
overlays: [overlay],
target: 'map',
view: new ol.View({
extent: boundary,
center: center,
zoom: 2,
maxZoom: 20,
minZoom: 14,
})
});
/**
* Add a click handler to the map to render the popup.
*/
map.on('singleclick', function(evt) {
var coordinate = evt.coordinate;
displayFeatureInfo(evt.pixel);
overlay.setPosition(coordinate);
});
On 04/06/2018 13:18, Massimiliano Moraca wrote:
> Ciao ok, grazie :)
>
> Il lun 4 giu 2018, 12:37 <umbertofilippo a tiscali.it
> <mailto:umbertofilippo a tiscali.it>> ha scritto:
>
> no, scusa, non c’entra, ci riguardo e se capisco meglio ti dico 😊
>
> -----Messaggio originale-----
> Da: Gfoss <gfoss-bounces a lists.gfoss.it
> <mailto:gfoss-bounces a lists.gfoss.it>> Per conto di
> umbertofilippo a tiscali.it <mailto:umbertofilippo a tiscali.it>
> Inviato: lunedì 4 giugno 2018 12:31
> A: 'Massimiliano Moraca' <massimilianomoraca a gmail.com
> <mailto:massimilianomoraca a gmail.com>>
> Cc: 'GFOSS.it' <gfoss a lists.gfoss.it <mailto:gfoss a lists.gfoss.it>>
> Oggetto: [Gfoss] R: Openlayers 4: Popup sulle feature
>
> Suppongo sia legato a un problema di coorindate.
>
> probabilmente devi trasformare le coordinate di pixel nel sistema
> giusto.
>
> solo un suggerimento, dato che non riesco a darti supporto più
> specifico.
>
> Starei attento all’ultima parte dell’esempio linkato, dove si fa
> una trasformazione:
>
> /**
>
> * Add a click handler to the map to render the popup.
>
> */
>
> map.on('singleclick', function(evt) {
>
> var coordinate = evt.coordinate;
>
> var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
>
> coordinate, 'EPSG:3857', 'EPSG:4326'));
>
> content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
>
> '</code>';
>
> overlay.setPosition(coordinate);
>
> });
>
> Da: Massimiliano Moraca <massimilianomoraca a gmail.com
> <mailto:massimilianomoraca a gmail.com>>
>
> Inviato: domenica 3 giugno 2018 13:04
>
> A: Tiscali <umbertofilippo a tiscali.it
> <mailto:umbertofilippo a tiscali.it>>
>
> Cc: GFOSS.it <gfoss a lists.gfoss.it <mailto:gfoss a lists.gfoss.it>>
>
> Oggetto: Re: [Gfoss] Openlayers 4: Popup sulle feature
>
> Proprio questo esempio ho usato, come puoi vedere anche dal codice
> allegato. Ma il popup non va dove deve ed anche per questo ho
> allegato il codice così magari se c'è un errore me lo fate notare...
>
> 2018-06-03 12:09 GMT+02:00 Tiscali <umbertofilippo a tiscali.it
> <mailto:umbertofilippo a tiscali.it
> <mailto:umbertofilippo a tiscali.it%20%3cmailto:umbertofilippo a tiscali.it>>
> >:
>
> http://openlayers.org/en/latest/examples/popup.html
>
> _______________________________________________
>
> Gfoss a lists.gfoss.it <mailto:Gfoss a lists.gfoss.it>
>
> http://lists.gfoss.it/cgi-bin/mailman/listinfo/gfoss
>
> Questa e' una lista di discussione pubblica aperta a tutti.
>
> I messaggi di questa lista non hanno relazione diretta con le
> posizioni dell'Associazione GFOSS.it.
>
> 796 iscritti al 28/12/2017
>
Maggiori informazioni sulla lista
Gfoss