时间戳

首页 > 解决方案 > Leaflet Draw'无法绑定到'LeafletDrawOptions'

angular - Leaflet Draw'无法绑定到'LeafletDrawOptions'

问题描述

我正在与 Angular 合作，试图让 OpenStreetMaps 使用 @asymmetrik/ngx-leaflet-draw 工作。但是，由于以下错误，我无法使这些选项起作用，并且无法弄清楚。

Error: src/app/app.component.html:7:16 - error NG8002: Can't bind to 'leafletDrawOptions' since it isn't a known property of 'div'.       
    [leafletDrawOptions]="drawOptions"

我的 app.module

..
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';

@NgModule({
  ..
  imports: [
    ..
    LeafletModule,
    LeafletDrawModule
  ],
..
})
export class AppModule { }

和component.ts

import { Component } from '@angular/core';
import { tileLayer, latLng, circle, polygon } from 'leaflet';
import * as L from 'leaflet';
import 'leaflet-draw';

  leafletOptions: any;
  leafletLayers: any;
  mapCenter: any;
  zoomLevel: any;
  layersControl: any;
  drawOptions: any;
  constructor() {
  }

  ngOnInit() {
    this.leafletLayers = [tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      { maxZoom: 7, attribution: '...' })];
    this.mapCenter = latLng(64.805606, 9.910027);
    this.zoomLevel = 5;
    this.layersControl = {
      baseLayers: {
        'Open Street Map': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 25, maxNativeZoom: 19 }),
      }
    };
    this.drawOptions = {
      position: 'topright',
      draw: {
        marker: {
          icon: L.icon({
            iconSize: [25, 41],
            iconAnchor: [13, 41],
            iconUrl: 'assets/marker-icon.png',
            shadowUrl: 'assets/marker-shadow.png'
          })
        },
        polyline: false,
        circle: {
          shapeOptions: {
            color: '#aaaaaa'
          }
        }
      }
    };
  }

似乎与这个问题相似，但从未解决过；https://gis.stackexchange.com/questions/273200/importing-leaflet-draw-ngx-for-angular-4

标签： angularleaflet

解决方案

就我而言，我忘记将指令添加leafletDraw到 div 元素。这是我的 HTML：

<div class="map-container"
     leaflet
     leafletDraw
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)"
     (leafletMapZoomEnd)="onMapZoomEnd($event)"
     [leafletDrawOptions]="drawOptions"
     (leafletDrawCreated)="onDrawCreated($event)">
    <div [leafletLayer]="drawnItems"></div>
</div>

推荐阅读