zeigen Markierungen hinter Polygone

Question

I Kreis erstellt haben (Typ Polygon, mit berechneten Koordinaten von this formula - immer noch nicht sicher, ob dies am besten Art und Weise Kreis zu machen ist ...)

und einige Marker, was Städte. Ich bevorzuge Marker, weil sie HTML-Elemente sind und ich sie stylen kann.

Kreis dient als Radius für die Auswahl von Städten.

Meine Frage ist, wie kann ich diese Marker hinter Kreis positionieren? Kreis ist ein Teil von Canvas, und Marker sind getrennte Divs, also wird es keinen Z-Index helfen.

Oder sollte ich diese Markierungen irgendwie als Punkte in der Leinwand erstellen?

Suche genau nach this behaviour, nur in mapboxgl. Hier

Answer 1

ein Beispiel: https://jsfiddle.net/kmandov/vzc0o86g/

Sie turf-circle verwenden können, um einen Kreis mit einem bestimmten Radius und Einheiten zu erstellen. Rasen-Kreis erzeugt ein geojson Objekt, das zu einer eigenen Ebene hinzugefügt werden kann.

var center = { 
    "type": "Feature", 
    "properties": { 
    "marker-color": "#0f0" 
    }, 
    "geometry": { 
    "type": "Point", 
    "coordinates": [-77.1117, 38.8739] 
    } 
}; 

var lasso = turf.circle(center, 5, 20, 'kilometers'); 

Dann fügen Sie es zu einer eigenen Ebene hinzu. Ich habe es lasso genannt:

map.addSource('lasso', { 
    'type': 'geojson', 
    'data': lasso 
    }); 

    map.addLayer({ 
    'id': 'lasso', 
    'type': 'fill', 
    'source': 'lasso', 
    'paint': { 
     'fill-color': '#f1f075', 
     'fill-opacity': 0.8 
    } 
    }); 

Dann fügen Sie die Schicht, die die Stationen enthält, die durch die Schicht oben (example) angeben. Dadurch wird sichergestellt, dass die lasso layer über dem ist stations layer:

map.addLayer({ 
    'id': 'stations', 
    'type': 'circle', 
    'source': 'stations', 
    'paint': { 
     'circle-color': '#feb24c', 
     'circle-opacity': 1, 
     'circle-radius': 5 
    } 
    }, 'lasso'); // lasso is the layer above