Más

Folleto Marcador-Cluster JSONP GeoServer

Folleto Marcador-Cluster JSONP GeoServer


Espero poder obtener la misma ayuda desde aquí. Comencé a armar un mapa de folletos, consulte aquí: http://gis.xyz/leaflet2.html Quiero mostrar mis características de postgis point (basadas en el Reino Unido) en este mapa con el método de clúster. Los puntos ya están en el mapa (utilicé geoserver-jsonp), pero no puedo averiguar cómo puedo agregar a la capa a la capa de clúster. También agregué un ejemplo de grupo de marcadores al script, así es como me gustaría ver mi capa. Sería genial si alguien me ayudara a responder esta pregunta.

var owsrootUrl = 'http://217.8.255.188:8080/geoserver/opengeo/ows'; var defaultParameters = {servicio: 'WFS', versión: '2.0', solicitud: 'GetFeature', typeName: 'opengeo: evernote_geom', outputFormat: 'text / javascript', format_options: 'callback: getJson', SrsName: 'EPSG : 4326 '}; var parámetros = L.Util.extend (defaultParameters); var URL = owsrootUrl + L.Util.getParamString (parámetros); var WFSLayer = null; var ajax = $ .ajax ({url: URL, dataType: 'jsonp', jsonpCallback: 'getJson', success: function (response) {WFSLayer = L.geoJson (response, {style: function (feature) {return {stroke : false, fillColor: 'FFFFFF', fillOpacity: 0};}, onEachFeature: function (feature, layer) {popupOptions = {maxWidth: 600}; layer.bindPopup ('

'+ feature.properties.url +'


'+ feature.properties.title, popupOptions); }}). addTo (mapa); }});

Para hacer eso, puede usar elLeaflet.markerclusterplug-in aquí https://github.com/Leaflet/Leaflet.markercluster. Después de agregarlo a su proyecto, debe definir un grupo de clústeres de marcadores:

var marcadores = L.markerClusterGroup ();

Luego, primero debe agregar los marcadores a este grupo de clústeres y luego debe agregar el grupo al mapa:

markers.addLayer (un_grupo_de_marcadores); map.addLayer (marcadores);

En su código, carga los marcadores con Ajax y luego los agrega al mapa, por lo que la forma más directa será esta:

var marcadores = L.markerClusterGroup (); var ajax = $ .ajax ({url: URL, dataType: 'jsonp', jsonpCallback: 'getJson', success: function (response) {WFSLayer = L.geoJson (response, {style: function (feature) {return {stroke : false, fillColor: 'FFFFFF', fillOpacity: 0};}, onEachFeature: function (feature, layer) {popupOptions = {maxWidth: 600}; layer.bindPopup ('

'+ feature.properties.url +'


'+ feature.properties.title, popupOptions); }}). addTo (markers.addTo (mapa)); }});