Использование takeToFront () для стилизации слоев листовок, которые НЕ находятся в событии слоя с помощью ngx-leaflet

У меня есть мультиполигон, который я хочу отфильтровать, поместить в уникальные слои и установить для него разные стили. Я загружаю geoJson, применяю общие стили и использую onEachFeature для помещения слоев в группы объектов в зависимости от условия. Все еще внутри onEachFeature я применяю стили к каждой группе функций. Это прекрасно работает.

Проблема в том, что штрихи многоугольника перекрываются, что является распространенной проблемой, которая решается в листовке / svg. Я знаю, что нужно использовать bringToFront, чтобы обойти эту проблему, но я не могу заставить его работать в моем угловом приложении ngx-leaflet. Когда я тестирую bringToFront внутри события щелчка, он работает. Но я хочу, чтобы сами стили полигонов (без события) были вынесены на передний план.

Вот пример кода (рисунок из ngx-leaflet-tutorial-ngcli):

States.geojson (в /assets каталоге)

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "adm1_code": "Admin-1 scale rank", "diss_me": 2, "name": "USA-3520", "name_len": 3520 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -111.006268677999884, 31.327184550000098 ], [ -114.822108114999963, 32.500239563000022 ], [ -114.720794720599827, 32.7245646349499 ], [ -114.535858197098094, 32.738236510006914 ], [ -114.460736126870756, 32.854911313806042 ], [ -114.501727338146111, 33.019413268207757 ], [ -114.696746868872879, 33.089359557497573 ], [ -114.7235046809962, 33.32124432236759 ], [ -114.726898235864894, 33.411478697383984 ], [ -114.532611127401594, 33.568558775367194 ], [ -114.515936321603931, 33.963627135284071 ], [ -114.119061321722597, 34.293216978480757 ], [ -114.368963665640649, 34.471537291312927 ], [ -114.616961713112516, 34.879300963268804 ], [ -114.638861126739585, 35.123539243841037 ], [ -114.571942181186671, 35.212552915984247 ], [ -114.741278119289746, 36.013627134784429 ], [ -114.707147260337763, 36.108841977775057 ], [ -114.554779095678725, 36.16052654906099 ], [ -114.123895306323277, 36.045853697290283 ], [ -114.042010541153502, 36.219779478340229 ], [ -114.040203900289725, 37.003129088436651 ], [ -109.046624798995254, 36.999808775254735 ], [ -109.047430462999856, 31.327391256000041 ], [ -111.006268677999884, 31.327184550000098 ] ] ] } },
{ "type": "Feature", "properties": { "adm1_code": "Admin-1 scale rank", "diss_me": 2, "name": "USA-3524", "name_len": 3524 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -108.137503214999924, 31.777544657000064 ], [ -108.215121216999904, 31.777751364000025 ], [ -108.214811157999918, 31.327442932000068 ], [ -109.047430462999856, 31.327391256000041 ], [ -109.046624798995254, 36.999808775254735 ], [ -103.000799603418955, 36.999808775254735 ], [ -103.065594524767505, 32.00168865790522 ], [ -106.66217655600326, 32.000297056863644 ], [ -106.506052409999938, 31.770258281000068 ], [ -108.137503214999924, 31.777544657000064 ] ] ] } },
{ "type": "Feature", "properties": { "adm1_code": "Admin-1 scale rank", "diss_me": 2, "name": "USA-3526", "name_len": 3526 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -111.05023808032314, 41.999833189050435 ], [ -111.049920696982554, 40.999833189250239 ], [ -109.046331829550297, 40.999833189250239 ], [ -109.046624798995254, 36.999808775254735 ], [ -114.040203900289725, 37.003129088436651 ], [ -114.042547649554365, 42.000077329804924 ], [ -111.05023808032314, 41.999833189050435 ] ] ] } },
{ "type": "Feature", "properties": { "adm1_code": "Admin-1 scale rank", "diss_me": 2, "name": "USA-3522", "name_len": 3522 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -109.046331829550297, 40.999833189250239 ], [ -102.051800580432428, 40.99958904939507 ], [ -102.039569135107456, 36.999808775254735 ], [ -109.046624798995254, 36.999808775254735 ], [ -109.046331829550297, 40.999833189250239 ] ] ] } }
]
}

app.component.html

<div class="map"
     leaflet
     [leafletFitBounds]="fitBounds"
     [leafletLayers]="layers">
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  tiles = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  layers: L.Layer[];
  redGroup = L.featureGroup();
  blueGroup = L.featureGroup();
  fitBounds = null;

  constructor(
    private http: HttpClient,
  ) { }

  ngOnInit() {

    this.http.get<any>('assets/states.geojson')
      .subscribe(data => {
        const tmp = L.geoJSON(data, {
          style: () => ({
            weight: 2,
            fillOpacity: 1,
            opacity: 1
          }),
          onEachFeature: this.onEachFeature.bind(this)
        });

        this.fitBounds = L.geoJSON(data).getBounds();
        // this.redGroup.bringToFront();
        this.layers = [ this.tiles, this.redGroup, this.blueGroup ];
        // this.layers = [ this.tiles, this.redGroup.bringToFront(), this.blueGroup ];
        // this.redGroup.bringToFront();
      });
  }

  onEachFeature(feature, layer) {

    if (feature.properties.name_len <= 3522) {
      layer.addTo(this.redGroup);
      // this.redGroup.bringToFront();
    } else {
      layer.addTo(this.blueGroup);
    }

    this.blueGroup.setStyle({fillColor: 'lightblue', color: 'blue'});

    this.redGroup.setStyle({
      fillColor: 'pink', color: 'red'
    });

    this.redGroup.bringToFront();

    layer.on('click', (e) => {
      e.target.setStyle({color: 'yellow'}).bringToFront();
    });
  }
}

Я закомментировал все свои неудачные попытки выдвинуть redGroup на передний план. Как видите, когда вы щелкаете по многоугольнику, желтая обводка сдвигается вперед с помощью bringToFront. Но при первоначальной загрузке я хочу, чтобы красный штрих из redGroup отображался поверх синего штриха из blueGroup. Как я могу это сделать?


javascript angular leaflet ngx-leaflet bringtofront
person Lauren    schedule 15.06.2018    source источник
comment
Работает ли при вызове по истечении таймаута? Интересно, проблема в том, что на самом деле этих функций еще нет на карте, и, следовательно, вызов принестиToFront ничего не делает.   -  person reblace    schedule 15.06.2018
comment
@reblace, это бинго! Прекрасно работает, когда я добавляю setTimeout(() => { this.redGroup.bringToFront(); }, 0); Спасибо!   -  person Lauren    schedule 15.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Согласно руководству @ reblace, мне нужно было вызвать код после тайм-аута в нижней части onEachFeature, например:

setTimeout(() => {
  this.redGroup.bringToFront();
}, 0);
person Lauren    schedule 15.06.2018