Почему не отображается панель инструментов Ngx-leaflet-draw? - PullRequest
Новая
       84

Почему не отображается панель инструментов Ngx-leaflet-draw?

0 голосов
/ 05 августа 2020

Я пытался добавить ngx-leaflet-draw, чтобы позволить клиенту рисовать путь на карте. Я выполнил инструкцию, которую нашел здесь:

[https://github.com/Asymmetrik/ngx-leaflet-draw] [1]

app.module.ts 

                import { LeafletModule } from '@asymmetrik/ngx-leaflet';
                import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw'; 
                @NgModule({
                      imports: [
                           LeafletModule,
                           LeafletDrawModule]

angular. json 

"styles": [
          "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
          "node_modules/angular-calendar/scss/angular-calendar.scss",
          "node_modules/sweetalert2/src/sweetalert2.scss",
          "src/assets/css/demo.css",
          "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css",
          "src/assets/scss/material-dashboard.scss",
          "node_modules/leaflet/dist/leaflet.css",
          "node_modules/leaflet-draw/dist/leaflet.draw.css"
        ]

test.module.ts 

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';    
@NgModule({  declarations: [TestComponent],  imports: [    LeafletModule,    LeafletDrawModule  ]})

test.component. html

   <div leaflet style="height: 400px; margin: 0; padding: 0;"
    leafletDraw
    [leafletOptions]="options"
    [leafletDrawOptions]="drawOptions"
    [leafletDrawLocal]="drawLocal"
    (leafletDrawCreated)="onDrawCreated($event)"
    (leafletDrawStart)="onDrawStart($event)">

    <!-- Add the drawnItems featureGroup to the map -->
    <div [leafletLayer]="drawnItems"></div>

    </div

test.component.ts 

  drawnItems: FeatureGroup = featureGroup();
options = {
    layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Open Street Map' })
    ],
    zoom: 5,
    center: latLng({ lat: 46.879966, lng: -121.726909 })
};

drawOptions = {
    position: 'topright',
    draw: {
        marker: {
            icon: icon({
                iconSize: [ 25, 41 ],
                iconAnchor: [ 13, 41 ],
                iconUrl: '2b3e1faf89f94a4835397e7a43b4f77d.png',
                iconRetinaUrl: '680f69f3c2e6b90c1812a813edf67fd7.png',
                shadowUrl: 'a0c6cc1401c107b501efee6477816891.png'
            })
        }
    },
    edit: {
        featureGroup: this.drawnItems
    }
};

drawLocal: any = {
    draw: {
        toolbar: {
            buttons: {
                polygon: 'Draw an awesome polygon!'
            }
        }
    }
};

public onDrawCreated(e: any) {
    // tslint:disable-next-line:no-console
    console.log('Draw Created Event!');

    const layer = (e as DrawEvents.Created).layer;
    this.drawnItems.addLayer(layer);
}

public onDrawStart(e: any) {
    // tslint:disable-next-line:no-console
    console.log('Draw Started Event!');
}

при загрузке страницы я вижу карту, но панель инструментов рисования не отображается. Что мне не хватает? Я использую angular v9 и ngx-leaftlet v7

1 Ответ

0 голосов
/ 01 сентября 2020

оказалось, что проблема в другой библиотеке ngx. Решено.

...