Set-Stil Zoom Level Openlayers 3

In Openlayers war es möglich, bestimmte Funktionen abhängig von der Zoomstufe ein- oder auszuschalten. Ich habe die gleiche Funktionalität in OpenLayers 3 trotz der Durchsicht der Dokumentation nicht gefunden. Weiß jemand, wie man das macht? Dies ist die Funktion, die ich auf der Karte platziere, und ol.style.Text möchte ich nur anzeigen, wenn der Benutzer auf eine bestimmte Zoomstufe gezoomt ist.Set-Stil Zoom Level Openlayers 3

var geoJsonObj = { 
    'type': 'Feature', 
    'geometry': JSON.parse(response.FieldList[key].Shape) 
} 
var vectorSource = new ol.source.Vector({ 
    features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj) 
}); 
Fields[Field.FieldID] = new ol.layer.Vector({ 
    projection: 'EPSG:4269', 
    source: vectorSource, 
    style: new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: 'yellow', 
     width: 1 
    }), 
    fill: new ol.style.Fill({ 
     color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5') 
    }), 
    text: new ol.style.Text({ 
     textAlign: 'Center', 
     text: response.FieldList[key].Acres, 
     scale: 1 
    }) 
    }) 
});

Quelle

2016-06-14 Funn_Bobby

hat 'minResolution',' maxResolution' auf Vektorebene Initialisierung Ihren Bedürfnissen passen ???? api doc hier -> http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html – pavlos

Nicht wirklich, weil der Stil Teil der Ebene ist, so dass nicht nur der Text ausgeblendet wird, wird die gesamte Ebene ausgeblendet ... –

Dann können Sie die 'ol.style.StyleFunction()' anstelle eines statischen Stils verwenden. Es akzeptiert zwei Parameter "ol.Feature" und "resolution". Wenn Sie also die Auflösung verwenden, geben Sie Ihren statischen Stil mit oder ohne Text zurück. Wenn Sie weitere Hilfe brauchen, werde ich versuchen, eine Geige zu machen. – pavlos

Das Beispiel Vektorebene zeigt die Verwendung eines Style-Funktion für die Auflösung abhängig Styling: http://openlayers.org/en/latest/examples/vector-layer.html

ist hier eine vereinfachte Version:

var layer = new ol.layer.Vector({ 
    source: new ol.source.Vector(), 
    style: function(feature, resolution) { 
    var text = resolution < 5000 ? feature.get('name') : ''; 
    return new ol.style.Style({ 
     text: new ol.style.Text({ 
     text: text, 
     fill: new ol.style.Fill({ 
      color: '#000' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#f00', 
      width: 3 
     }) 
     }) 
    }); 
    } 
});

Die Schicht würde über Render-Funktion name s bei Auflösungen unter 5000 Karteneinheiten pro Pixel.

Das obige Vektorlayer-Beispiel enthält zusätzlichen Code, um Stile nach Möglichkeit wiederzuverwenden. Wenn Sie eine Menge Funktionen haben, können Sie den Garbage Collector überlasten, indem Sie für jeden Renderrahmen neue Style-Instanzen erstellen.

Quelle

2016-06-17 04:51:35

Danke Tim !!! das ist genau das, was ich brauchte !! Kann ich mehrere ähnliche Stile zu einer Ebene hinzufügen? Zum Beispiel möchte ich, dass der "Fill" -Stil konstant ist, aber der "Text" -Stil sich so verhält wie oben. –

@ user3557112 - Die Stilfunktion kann ein einzelnes 'ol.style.Style'-Objekt oder ein Array desselben Objekts zurückgeben. In einem einzelnen Stilobjekt können Sie sowohl einen Text- als auch einen Füllsymbolizer verwenden (fügen Sie einfach eine 'fill'-Eigenschaft zum oben stehenden' ol.style.Style'-Objekt hinzu). Sie müssten nur mehrere Stilobjekte zurückgeben, wenn Sie mehrere Striche, unterschiedliche Rendering-Geometrien, Z-Index-Steuerelemente oder ähnliches möchten. Beginnen Sie damit, indem Sie dem obigen Einzelstyle-Objekt einfach eine Füllung hinzufügen. –

Ja, ich verstehe das und die "Fill" ist nur aktiv, wenn die Auflösung weniger als 5000 ist und ich muss konstant sein. Ich habe versucht, einen zusätzlichen Stil in einem Array [] von Stilen ohne Bedingung hinzuzufügen, aber es hat nicht funktioniert. –

Dies ist, was ich am Ende mit Etiketten zu zeigen, sondern einen konstanten Stil unterhalb halten ...

style: function (feature, resolution) { 
          var text = resolution * 100000 < 10 ? response.FieldList[key].Acres : ''; 

          if (text != "") { 
           styleCache[text] = [new ol.style.Style({ 
            stroke: new ol.style.Stroke({ 
             color: '#319FD3', 
             width: 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: '#fff', 
              width: 3 
             }) 
            }), 
            fill: new ol.style.Fill({ 
             color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5') 
            }) 
           })]; 
          } 
          else if (text == "") { 
           styleCache[text] = [new ol.style.Style({ 
            fill: new ol.style.Fill({ 
             color: rcisWebMapUtilities.convertHex(response.FieldList[key].Shade, '0.5') 
            }) 
           }) 
           ] 
          } return styleCache[text]; 
         }

Quelle

2016-06-20 13:43:29

Antwort

Verwandte Themen