Я пробовал исправления, упомянутые в первом ответе на этот пост https://salesforce.stackexchange.com/ questions/254214/loading-the-leaflet-map-in-lightning-web-component, но я все равно получаю пустой div.

Вот мой код:

HTML
<template>
  <div class="map-root" lwc:dom="manual"></div>
</template>

CSS
.map-root {
    height: 180px;
}

JAVASCRIPT
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet'

export default class MduPenetration extends LightningElement {
  connectedCallback() {
    Promise.all([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ]).then(() => {
      const el = this.template.querySelector('.map-root');
      const mymap = L.map(el).setView([51.505, -0.09], 13);
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.ey********************************************}', {
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.ey********************************************'
      }).addTo(mymap);
    });
  }

И, наконец, вот как я загружаю библиотеку листовок в Static Resources: введите здесь описание изображения

Пожалуйста, порекомендуйте!

0
sumchans 1 Апр 2020 в 02:29
Какая-либо ошибка в консоли?
 – 
User6670
1 Апр 2020 в 15:58
Нет ошибок. Div карты просто пустой.
 – 
sumchans
1 Апр 2020 в 16:38
Я не думаю, что мы можем получить доступ к элементам в connectCallback, вы должны использовать renderedCallback
 – 
User6670
1 Апр 2020 в 17:04
@ User6670, не могли бы вы добавить мне пример кода? Спасибо
 – 
sumchans
1 Апр 2020 в 18:07

2 ответа

Лучший ответ

Любой, кто застрял, это то, как я заставил это работать. Это с комбинацией листовки и Mapbox.

  connectedCallback() {
    Promise.all([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ]).then(() => {
      const el = this.template.querySelector(".map-root");
      let mymap = L.map(el).setView([54.139503, -96.653471], 4);
      L.tileLayer('https://api.mapbox.com/styles/v1/yourMapBoxId/ck8koy1zw0mq51is3br0pshpr/tiles/256/{z}/{x}/{y}@2x?access_token=pk.ey******************************', {
        tileSize: 512,
        zoomOffset: -1,
        attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>',
      }).addTo(mymap);
    });
  }
0
sumchans 4 Апр 2020 в 01:34

Я не думаю, что вы можете получить доступ к дочерним элементам в теле компонента в подключенном обратном вызове, вместо этого попробуйте отрендеренный обратный вызов, как это

renderedCallback() {
    Promise.all([
      loadStyle(this, leaflet + '/leaflet.css'),
      loadScript(this, leaflet + '/leaflet.js')
    ]).then(() => {
      const el = this.template.querySelector('.map-root');
      const mymap = L.map(el).setView([51.505, -0.09], 13);
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={pk.ey********************************************}', {
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.ey********************************************'
      }).addTo(mymap);
    });
  }
1
User6670 1 Апр 2020 в 18:12
Вау, спасибо @User6670. Попробую это сегодня и дам вам знать.
 – 
sumchans
1 Апр 2020 в 18:14
Проблема была не с подключенным обратным вызовом, а с авторизацией мапбокса.
 – 
sumchans
2 Апр 2020 в 18:32
Мне удалось загрузить другую карту внутри подключенного обратного вызова.
 – 
sumchans
2 Апр 2020 в 18:32