Листовка сделать PolyLine поверх GeoJson

Question

Листовка сделать PolyLine поверх GeoJson

1

Мне нужно создать пунктирную линию поверх объекта 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/

user3601262 31 май 2017, в 13:51

Источник

Теги:

javascript

leaflet

css

1 ответ

Ещё вопросы

Remington Thurber · Accepted Answer · 2017-05-31T15-55-00.000Z

Порядок, который вы добавляете к карте, имеет значение. Если вы хотите, чтобы линия сверху, просто добавьте ее на карту после слоя geojson.

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

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

Затем вы получите желаемый результат.

Спасибо, ваше предложение о заказе товара помогло мне решить проблему. Тем не менее, я попытался добавить полилинию в конце скрипта перед публикацией вопроса, и она не работала на моем локальном компьютере (теперь я вижу, что она отлично работает на jsfiddle, понятия не имею, в чем разница Я использую тот же браузер). Итак, чтобы убедиться, что полилиния будет добавлена после геойсона, я добавил немного времени ожидания (10 мс) до добавления полилинии, и теперь проблема решена и для моей локальной машины.