Question

我有一个组件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的组件中。

有什么想法吗？

Answer 1

我认为您不需要组件，因为您无需处理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>

在Angular的不同组件中访问传单地图

1 个答案: