Leaflet machen PolyLine oben auf geoJson

Question

Ich muss eine gestrichelte Linie über dem GeoJson-Objekt erstellen, aber dieses Objekt immer oben angezeigt.

Ich habe versucht, Z-Index-Parameter sowohl auf die CSS-Klassen von Objekten und als Parameter in der JS-Code, aber es hilft nicht.

Ich sehe auch, dass die Linie an die Spitze von geoJson verschoben, wenn ich manuell das Tag der Leitung unter dem Länder-Tag ziehen, aber ich will es sicherlich nicht im js-Code mit jquery tun (scheint sehr schlecht Entscheidung).

Ich erstelle die Karte mit diesem Code:

// Creating the map 
var map = L.map('map').setView([25, 10], 4); 

// Creating the polyline 
var pointA = new L.LatLng(-20, -20); 
var pointB = new L.LatLng(80, 77.70641); 
var pointList = [pointA, pointB]; 

var firstpolyline = new L.Polyline(pointList, { 
    smoothFactor: 1, 
    className: 'my_polyline' 
}); 
firstpolyline.addTo(map); 


// Creating the geojson object 
var geojson = {"type": "FeatureCollection","features": [{ "type": "Feature", "properties": { "NAME": "Custom country" }, "geometry": { "type": "Polygon", "coordinates": [ [ [-0.18,29.76],[8.79,31.65],[13.54,27.61],[8.53,21.86] ] ] } }]} 

var myCustomStyle = { 
    stroke: false, 
    fill: true, 
    fillColor: 'green', 
    fillOpacity: 1 
} 

L.geoJson(geojson, { 
    clickable: true, 
    style: myCustomStyle 
}).setZIndex(1).addTo(map); 

und einige CSS:

.my_polyline { 
stroke: red; 
    fill: none; 
    stroke-dasharray: 10,10; 
    stroke-width: 2; 
} 

Sie auch Arbeitsbeispiel auf jsfiddle sehen: https://jsfiddle.net/d7v4bhku/4/

Answer 1

Die Reihenfolge Sie hinzufügen Sie sind wichtig für die Karte. Wenn Sie die Linie oben haben möchten, fügen Sie sie einfach der Karte nach der Ebene geojson hinzu.

L.geoJson(geojson, { 
    clickable: true, 
    style: myCustomStyle 
}).addTo(map); 

var firstpolyline = new L.Polyline(pointList, { 
    smoothFactor: 1, 
    className: 'my_polyline' 
}); 
firstpolyline.addTo(map); 

Dann erhalten Sie Ihr gewünschtes Ergebnis.