Доступ к карте листовки в другом компоненте в Angular - PullRequest
Новая
       6

Доступ к карте листовки в другом компоненте в Angular

0 голосов
/ 03 декабря 2018

У меня есть компонент OpenStreetMapComponent, который просматривает всю мою карту.В том же компоненте у меня также есть несколько кнопок (масштаб, текущее местоположение ...).Наличие всего этого в одном компоненте скоро делает вещи нечитаемыми, поэтому я бы хотел, чтобы кнопки были в другом компоненте.Я не знаю, как получить доступ к карте, если кнопки находятся в другом компоненте, хотя.

Ниже моего компонента OpenStreetMap: 

import { Component, OnInit } from '@angular/core';
declare let L; //this is the leaflet variable!

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

  constructor( ) { }

  ngOnInit() {

    const map = L.map('map', {
      center: [48.208, 16.373],
      zoom: 13,
      zoomControl: false,
    });
// button to center map
    L.easyButton('<span><i class="fa fa-compass fa-2x"></i></span>', function(btn, map) {
      map.setView([48.208, 16.373], 13);
    },
      {
        position: 'topright'
      }).addTo(map);

    // get current location
    L.easyButton('<span class="myLocationIcon"><i class="myLocationIcon fa fa-map-marker fa-2x"></i></i></span>', function(btn, map) {
      map.locate({ setView: true, watch: false, enableHighAccuracy: true }) // set watch "true", to get realtime location, if im not mistaken
        .on('locationfound', function(e) {
          L.marker([e.latitude, e.longitude], { icon: personIcon }).addTo(map);
          L.circle([e.latitude, e.longitude], {
            weight: 1,
            color: 'blue',
            fillColor: '#cacaca',
            fillOpacity: 0.2
          }).addTo(map);
        })
        .on('locationerror', function(e) {
          alert("Cannot access your location!");
        })
    },
      {
        position: 'topright'
}).addTo(map);

эти две кнопки я хотел бы иметь в другом компоненте с именем MapButtonsComponent.

Есть идеи?

1 Ответ

0 голосов
/ 04 декабря 2018

По моему мнению, вам не нужен компонент, так как вы не имеете дело с html и логикой, а с чистыми вызовами экземпляров.Поэтому вы можете создать класс с именем MapButtons и создать два открытых статических метода, передав в качестве аргумента объект экземпляра карты.

map-buttons.ts: 

import 'leaflet';
declare let L;

export class MapButtons {
    public static renderCompass(map: object) {
        // tslint:disable-next-line:no-shadowed-variable
        return L.easyButton('fa fa-compass fa-2x', function(btn, map) {
            map.setView([48.208, 16.373], 13);
        }, { position: 'topright' }).addTo(map);
    }

    public static renderMarker(map: object) {
        // tslint:disable-next-line:no-shadowed-variable
        return L.easyButton('<span class="myLocationIcon"><i class="myLocationIcon fa fa-map-marker fa-2x"></i></i></span>', function(btn, map) {
        // tslint:disable-next-line:max-line-length
        map.locate({ setView: true, watch: false, enableHighAccuracy: true }) // set watch "true", to get realtime location, if im not mistaken
            .on('locationfound', function(e) {
                // L.marker([e.latitude, e.longitude], { icon: personIcon }).addTo(map);
                L.circle([e.latitude, e.longitude], {
                    weight: 1,
                    color: 'blue',
                    fillColor: '#cacaca',
                    fillOpacity: 0.2
                }).addTo(map);
            }).on('locationerror', function(e) {
                alert('Cannot access your location!');
            });
        },
        {
            position: 'topright'
        }).addTo(map);
    }
}

app.component.ts или open-street-map-component.ts: 

import 'leaflet';
import 'leaflet-easybutton';

import { MapButtons } from './map-buttons';

ngOnInit() {
    const map = L.map('map', {
        center: [48.208, 16.373],
        zoom: 13,
        zoomControl: false
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    MapButtons.renderCompass(map);
    MapButtons.renderMarker(map);
}

app.component.html или open-street-map-component.html: 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">

<div id="map"></div>
...