Hinzufügen von URL-Bildern zu mapbox GL JS Ebenen

Ich habe eine Ebene auf mapbox wie folgt;Hinzufügen von URL-Bildern zu mapbox GL JS Ebenen

map.addLayer({ 
    "id": "places-drink", 
    "type": "symbol", 
    "source": "places", 
    "filter": ["all", ["==","Venues","TRUE"],['==','Type','drink']], 
    "layout": { 
      "icon-image": "bar-15", 
      "icon-allow-overlap": true, 
      "icon-size": 1.3 
    }, 
});

und ich möchte stattdessen die MapBox Symbole zu verwenden, ein lokales Bild verwenden. Wie gehe ich vor?

Quelle

2017-02-19 Robert Honeybul

Einen anderen Ansatz, der in einigen Fällen einfacher sein kann, ist die Verwendung [Marker] (https: //www.mapbox. com/mapbox-gl-js/api/# Marker) anstelle von Icons. Der große Unterschied, den ich glaube, ist, dass es keine Kollisionsvermeidung mit Markern gibt - sie stecken immer nur an der Spitze von allem anderen. –

Die Eigenschaft icon-image von Symbollayern verwendet das Sprite-Blatt des Stils zum Speichern von Symbolen.

Es gibt einige wenige, die Sie ändern können, um das Sprite-Sheet für Ihren Kartenstil mit benutzerdefinierten Bildern zu bearbeiten. Wenn Sie lokale Dateien verwenden möchten, müssen Sie ein Tool wie spritezero verwenden, um ein Sprite-Sheet aus Ihren Bildern zu erstellen und dann die sprite URL Ihres Styles an die Position des von Ihnen erstellten Sprite-Sheet-Verzeichnisses zu setzen.

Sie können Ihre benutzerdefinierten Bilder auch mithilfe von mapbox.com/studio/ Style Editor in einen Stil hochladen. Hier ist eine Anleitung, wie man das tun: https://www.mapbox.com/help/custom-images/

Haftungsausschluss - Ich arbeite bei MapBox

Quelle

2017-02-20 20:51:12 mollymerp

Ok danke, wie stelle ich die Sprite URL meines Styles ein? –

im Moment habe ich die folgenden in meinem Stil.json; "sprite": "markers.json", aber das funktioniert nicht. –

mapbox-gl-js unterstützt keine relativen URLs, daher müssen Sie den vollständigen Dateipfad oder die URL angeben. es sollte auch auf ein Verzeichnis verweisen, das die Sprite-Blätter (reguläre und Retina-Auflösung) und die JSON-Datei enthält – mollymerp

Hinzufügen von URL-Bildern zu mapbox GL JS Ebenen

Antwort

Verwandte Themen