листовка редактировать полигон после создания - PullRequest
Новая
       27

листовка редактировать полигон после создания

0 голосов
/ 20 февраля 2020

Я пытаюсь построить проект, используя Angular и angularfire. Мой проект о рисовании полигонов с использованием листовки, а затем о перемещении координат полигона в базу данных. Я успешно передал координаты в базу данных и затем сохранил их на карте, но я хочу иметь возможность редактировать полигон после сохранения из базы данных с помощью события щелчка.

Полный код: 

export class WeatherNowComponent {

  map: Map;
  mark: Marker

  itemsRef: AngularFireList<any>;
  items: Observable<any[]>;
protected points: { lat: number, lng: number }[] = [];

  constructor(private db: AngularFireDatabase) {}

  async ngOnInit() {
    this.leafletMap()

  //  Store coords from database draw polygon then display on map 

    this.items.subscribe((a:any)=>{
      a.forEach(singlemarker => {

       this.points.push(singlemarker.values.coords)
       let p= new Polygon( [this.points], {color: 'red'}).addTo(this.map);
     });

     })


  }

  leafletMap() {
    let cloud = tileLayer(`http://maps.openweathermap.org/maps/2.0/weather/CL/{z}/{x}/{y}?
  &appid=`, {
      attribution: '2019 © منظومة ارصاد العراق',
      minZoom: 5,
      maxZoom: 9,
      opacity: 0.8
    })

//  Add layer draw  & Option to map 

    var editableLayers = new L.FeatureGroup();
    this.map.addLayer(editableLayers);

    var options = {
      position: 'topright',
      draw: {
        polyline: {
          shapeOptions: {
            color: '#f357a1',
            weight: 10
          },
          circle: false,
          circlemarker: false,
          marker: false,
          polyline: false,
          rectangle: false
        },
      edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: true
      },

    };


    var drawControl = new L.Control.Draw(options);
    this.map.addControl(drawControl);

   // Draw EVENT then push to firebase 

    this.map.on(Draw.Event.CREATED, (a => {
      var type = a.type,
        layer = a.layer;


         this.a =layer.getLatLngs()

      editableLayers.addLayer(layer);

    }))


  }

   //Push to Fire base after finish drawing 

  async addIdea() {

    this.itemsRef.push({coords:this.a});

  }

}

Любая идея, как я могу включить редактирование или удаление полигона после сохранения из базы данных через событие щелчка?

...