如何以角度方式在页面上创建多个传单地图

Question

我已经创建了下面给出的传单开放街道地图。

.component.ts

 map = L.map('map').setView([12.876, 80.599], 12);  

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

我已将地图放置在 html 页面中，如下所示

.component.html

<div class ="row">
<div class="col-xs-12 col-sm-8 col-lg-7">
    <div id="map"></div>
  </div>
</div>

并提到CSS中的高度为

.component.css

#map{
  height: 650px;
  border: 1px solid gray;
   position: relative;
  border: none;
}

现在我想在页面中创建两个地图，我已经尝试过但无法创建地图，因为我使用了名称地图的id。

那么如何将 id 值（地图）更改为类，而不是我将使用该类在 页

Answer 1

我可能会使用相同的 L.map 实例，并对其进行必要的更改。 另一种方法是创建另一个具有不同 ID 的 DOM 并使用 [hide] 显示第一个或第二个地图。

Answer 2

为了渲染多个地图，您需要确保包含地图的 DIV 具有唯一的 ID。

例如。假设您创建了一个名为 leafmap 的组件。 （ng g c 叶图）

leafmap.component.html 中的 DIV 如下所示：

<div class="map" [attr.id]="mapID"></div>

在你的 leafmap.component.scss 中你会有这样的东西：

.map {
  height: 500px;
}

在你的 leafmap.component.ts 中你会有这样的东西：

import {Component, Input} from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-leafmap',
  templateUrl: './leafmap.component.html',
  styleUrls: ['./leafmap.component.scss']
})
export class LeafmapComponent {
  map: L.Map | undefined;

  //Get the lng/lat values from the component instance
  //<app-leafmap [longitude]="longitude" [latitude]="latitude"></app-leafmap>
  @Input() longitude: number = -98.5795; //I defaulted the map to the center of the US.
  @Input() latitude: number = 39.8282;

  //Initialize the map ID
  mapID: string = 'map'; //I defaulted to 'map' but this will be overwritten in ngOnInit()

  //Initialize the map
  initMap(): void {
    //Create and center the map. Set the zoom level
    this.map = L.map(this.mapID, {
      center: [ this.latitude, this.longitude ],
      zoom: 13
    });

    //Add a marker to the map
    L.marker([this.latitude,this.longitude]).addTo(this.map);

    //Add map tiles
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 8,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);
  }

  constructor() { }

  ngOnInit(){
    //Get a unique mapID for the DIV where the map will be rendered
    this.mapID = this.uidv4();
  }

  //Get a UUID for the mapID
  uidv4(): string {
    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
    );
  }

  //The div needs to exist before the map can be created.
  ngAfterViewInit(): void {
    //Render the map
    this.initMap();
  }
}

在你的父组件中你会有这样的东西：

<app-leafmap [longitude]="data.longitude" [latitude]="data.latitude"></app-leafmap>

现在您有了一个具有唯一 ID 的对象，并且正在为其分配一张地图。您可以迭代元素并动态生成多个映射。