Мне нужно создать пунктирную линию поверх объекта geoJson, но этот объект всегда появляется сверху.
Я попытался установить параметры z-index как для css-классов объектов, так и как параметры в js-коде, но это не помогает.
Я также вижу, что линия переместилась на вершину geoJson, когда я вручную перетаскиваю тег линии под тегом стран, но я, конечно же, не хочу делать это в js-коде с jquery (похоже, это очень плохое решение).
Я создаю карту, используя этот код:
// 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);
И некоторые CSS:
.my_polyline {
stroke: red;
fill: none;
stroke-dasharray: 10,10;
stroke-width: 2;
}
Вы также можете увидеть рабочий пример на jsfiddle: https://jsfiddle.net/d7v4bhku/4/
Порядок, который вы добавляете к карте, имеет значение. Если вы хотите, чтобы линия сверху, просто добавьте ее на карту после слоя geojson
.
L.geoJson(geojson, {
clickable: true,
style: myCustomStyle
}).addTo(map);
var firstpolyline = new L.Polyline(pointList, {
smoothFactor: 1,
className: 'my_polyline'
});
firstpolyline.addTo(map);
Затем вы получите желаемый результат.