2017-05-31 6 views
0

Ich bin neu in der Openlayers-Bibliothek und habe eine Frage. Ich rendere viele Funktionen und wenn die Karte herausgezoomt ist, überlagern sich die Features, was ziemlich hässlich aussieht, wie man auf dem ersten Screenshot sehen kann. Ich möchte, dass die ausgezoomte Karte (erster Bildschirm) in allen Zoomstufen wie eine vergrößerte Karte (zweiter Bildschirm) aussieht. Was wäre der gängigste Weg, um es zu implementieren?Anzeige von Funktionen basierend auf der Zoomstufe

enter image description here

enter image description here

+0

Check out 'ol.source.Cluster', die die Menge der Daten begrenzen können, auf denen Sie sehen Deine Karte. Sehen Sie dieses Beispiel https://openlayers.org/en/latest/examples/cluster.html – GoinOff

+0

danke, Mann, das ist, was ich brauchte – Umbrella

+0

Ich benutze es aus dem gleichen Grund..Plus, indem Sie eine Stil-Funktion verwenden, können Sie erkennen Gruppieren Sie Features auf der Karte und färben Sie sie anders oder zeichnen Sie eine andere Form für sie (ich vergrößere meinen Punkt ein wenig, um die Gruppenfunktion anzuzeigen). Mauszeiger kann auch alle Details einer Gruppenfunktion enthalten. Sieht so aus, als ob du einen coolen Tracker für Segelboote erstellst ... – GoinOff

Antwort

0

Hier ist ein Beispiel für eine Art Funktion, die Gruppen-Layer-Funktionen aus einer Cluster Karte erkennt und zeichnen ein Quadrat für einzelnes Objekt und Kreis für Gruppenobjekte:

var styleFunction = function() { 
    return function(feature,resolution) { 
    var style; 
    var radius; 
    var offsetY = -26; 
    var gotGroup = false; 

    var features = feature.get('features'); 

    if (features.length == 1) { //length = 1 - individual object instead of combo object 
     style = new ol.style.Style({ 
     image: new ol.style.RegularShape({ 
     radius: 10, 
     points: 4, 
     angle: Math.PI/4, 
     fill: createFillStyle(feature), 
     stroke: createStrokeStyle(feature,resolution,props) 
     }), 
     text: createTextStyle(feature, resolution, props) 
     }); 
    } else { 
     var rad = 11; 
     if (features.length > 1) { //If group of features increase radius of object 
     rad = 12; 
     gotGroup = true; 
     } 
     style = new ol.style.Style({ 
     image: new ol.style.Circle({ 
     radius: rad, 
     fill: createFillStyle(feature), 
     stroke: createStrokeStyle(feature,resolution,props) 
     }), 
     text: createTextStyle(feature, resolution, props) 
    }); 
    } 
    return [style]; 
}; 
}; 

Hoffe, das hilft bei Ihrem Projekt

+0

Ich bin neu in dieser Karte Zeug, so dass es sehr hilfreich ist, danke! – Umbrella

Verwandte Themen