Угловая листовка - GeoJSON скрыт на изменении уровня

Question

У меня есть листовка карта с 2 слоями

Первого слоем

layers: { 
    baselayers: { 
     osm: { 
      name: 'OpenStreetMap', 
      url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
      type: 'xyz', 
      visible : false, 
      layerParams: { 
       showOnSelector: true 
      } 
     }, 
     vplan: { 
      name: 'vplan', 
      type: 'imageOverlay', 
      url: 'img/map.png', 
      visible : false, 
      bounds: [[config.bottomLeftLat, config.bottomLeftLong], [config.topRightLat, config.topRightLong]], 
      layerParams: { 
       showOnSelector: true, 
       noWrap: false, 
       opacity : 0.6 
      } 
     }, 
    } 
} 

Как вы можете видеть экранный OpenStreetMap, а другой на это PNG изображение. Оба слоя доступны в селекторе слой - OK

Каждый второй я сделать запрос Http для извлечения данных GeoJSON.

$scope.geojson = $http.get(...); 

При посадке на странице с картой, то GeoJSON показан на открытом уличном карте - OK

Моя проблема заключается в том, что при переходе к другому слою (PNG изображение) GeoJSON является не более по слою, но позади. После установки непрозрачности 0,6, я вижу, как GeoJson позади.

Как я могу всегда положить geoJson сверху каждого слоя?

Answer 1

Если вы используете Листовку версии 0.7.7 (или ниже), все ваши векторные слои (как правило, из ваших данных GeoJSON, кроме точек) сгруппированы в один контейнер SVG.

Этот контейнер SVG является родственным вашим изображением наложения (PNG-изображение) в Overlay Pane. Всякий раз, когда вы используете элемент управления слоями для отображения вашего наложения изображений, он добавляется в конце этой панели, поэтому появляется выше контейнер SVG, следовательно, прежде всего векторные слои из ваших данных GeoJSON.

Чтобы закрепить его за контейнером SVG, вы можете использовать метод bringToBack().

Чтобы активировать этот метод, когда используется элемент управления Layer, вы можете добавить слушателя на карту "baselayerchange" событие.

Если вы используете Leaflet 1.0, вы можете указать свою собственную панель для вашего наложения изображений (или ваших векторных слоев) и указать порядок их хранения через zIndex.