Angular 6 - добавьте Bing Maps в Leaflet Maps - PullRequest
Новая
       19

Angular 6 - добавьте Bing Maps в Leaflet Maps

0 голосов
/ 05 сентября 2018

Я использую плагин leaflet-bing-layer, чтобы добавить карту на основе Bing с помощью Leaflet.
Так как я использую также OSM, я импортирую leaflet и leaflet-bing-layer. Операторы импорта выглядят следующим образом: 

import * as L from 'leaflet';
import * as B from 'leaflet-bing-layer';

И использование листовки внутри компонента LeafletMapComponent: 

constructor () {
    this.baseMaps = {
      OpenStreetMap: L.tileLayer ("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="https://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
      }),
      BingMap: B.tileLayer.bing(LeafletMapComponent.BING_KEY, {type: 'AerialWithLabels'})
    };
  }

К сожалению, Лин BingMap: B.tileLayer.bing(... получает ошибку: Невозможно прочитать свойство 'bing' из неопределенного

Я не нашел ни одного рабочего примера карт Bing в Angular и Typescript, поэтому я предполагаю, что здесь чего-то не хватает.

Есть мысли о том, что я делаю не так?

1 Ответ

0 голосов
/ 05 сентября 2018

Вы должны импортировать leaflet-bing-layer следующим образом: 

import * as L from 'leaflet';
import 'leaflet-bing-layer';

Затем вы можете добавить свой слой плитки Bing следующим образом. 

L.tileLayer.bing(LeafletMapComponent.BING_KEY).addTo(map);

Это приведет к ошибке типа 

property 'bing' does not exist on type 'tileLayer'

но вы можете преодолеть эту ошибку, определив L как пользовательский тип: 

(L as any).tileLayer.bing(LeafletMapComponent.BING_KEY).addTo(map);

Примечание: Я бы не создавал карту на функции конструктора. Вместо этого я бы выбрал метод ловушки жизненного цикла, чтобы быть уверенным, что карта, которую я создал после просмотра, загружена.

...