Leaflet.draw в узле с проблемами конфигурации LW C - PullRequest
Новая
       26

Leaflet.draw в узле с проблемами конфигурации LW C

0 голосов
/ 23 февраля 2020

Я пытался добавить Leaflet Draw в мой SFDX Project с ограниченным успехом. Я посмотрел другие посты, касающиеся этого, а также их документацию, чтобы попытаться воспроизвести ее, чтобы все заработало, но я не смог. Все это очень ново для меня, так что это борьба, но я делаю то, что могу.

В настоящее время я пытаюсь включить панель инструментов «Рисование» в листовке, чтобы пользователи могли рисовать фигуры для определения областей. Для этого я пытаюсь настроить файл HTML и мою карту. js файл.

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" el="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
    </head>
    <template>
        <lightning-card title="Geospatial Map">
            <div class="map-root" lwc:dom="manual"></div>

        </lightning-card>
    </template>
</html>

Ошибка : Я пробовал несколько перестановок тегов и с точки зрения местоположения и вложения, но постоянно получаю сообщение об ошибке, например LWC1051: Forbidden tag found in template: '<link>' tag is not allowed.

или в текущей настройке

LWC1075: Multiple roots found LWC1079: Expected root tag to be template, found link

Нужно ли форматировать это по-другому / переводить куда-нибудь еще?

Карта. js: 

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import leaflet from '@salesforce/resourceUrl/leaflet';
var leafletDraw = require('leaflet-draw');
/* L is the Leaflet object constructed by the leaflet.js script */
/*global L*/

export default class Map extends LightningElement {

    map; // L.map, a leaflet map. constructed in initializeleaflet

    /**
     * When the Map LWC is ready, start downloading Leaflet.
     * 
     * When this is complete, call initializeleaflet()
     */


    connectedCallback() {
        Promise.all([
            loadScript(this, leaflet + '/leaflet.js'),
            loadStyle(this, leaflet + '/leaflet.css')
        ]).then(() => {
            this.initializeLeaflet();
            this.setupBaseTiles();
            this.dispatchEvent(new CustomEvent('ready', { detail: this.map }));
        });
    }


    /**
     * Constructs the Leaflet map on the page and initializes this.map
     */
    initializeLeaflet() {
        const mapRoot = this.template.querySelector('.map-root');
        this.map = L.map(mapRoot, {drawControl: true});
        this.map.fitWorld();
        L.control.scale().addTo(this.map);
        this.map.setMinZoom(2);
        this.map.setMaxZoom(17);
        this.addDrawTools();
    }

    addDrawTools() {
        const drawnItems = new L.FeatureGroup();
        this.map.addLayer(drawnItems);

        const drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems
            }
        });
        L.control.drawControl(drawControl).addTo(this.map);

        const toolbar = L.Toolbar();
        const modifiedDraw = L.drawLocal.extend({
            draw: {
                toolbar: {
                    buttons: {
                        polygon: 'Draw a polygon!'
                    }
                }
            }
        });
        this.map.addLayer(modifiedDraw);
        toolbar.addToolbar(this.map);
    }

    /**
     * Setup the base OpenStreetMap tile layer
     */
    setupBaseTiles() {
        const mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

        L.tileLayer(
            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: '&copy; ' + mapLink + ' Contributors',

            })
            .addTo(this.map);
    }
}

Ошибка: Когда я внедряю это в Salesforce, я получаю сообщение о том, что L.Draw.Control is not a constructor, что, как я полагаю, связано с неправильной настройкой.

В документах говорится, что нужно использовать npm install leaflet-draw, а затем поставить var leafletDraw = require('leaflet-draw'); в верхней части файла. Может ли кто-нибудь дать представление о том, как мне использовать leafletDraw в сочетании с другими фрагментами кода leafletDraw, которые у меня уже есть в файле, которые взяты из документации по установке?

Заранее спасибо за любую помощь !!

...