标签: ngx-leaflet

我在angular 5应用程序中使用ngx-leaflet-markercluster。我根据演示更改了代码，但仍然收到以下错误：

无法绑定到“ leafletMarkerCluster”，因为它不是“ div”的已知属性。

有任何想法吗？有人尝试过v1.0.0吗？

我正在使用 ngx-leaflet。默认情况下，地图在左上角显示缩放控件。但是我找不到如何改变它的定位。

这是一个过时的方法：

options = {
  layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 10, attribution: '...' }),
  zoom: 5,
  zoomControl: false,
  center: L.latLng(46.879966, -121.726909)
};

mapReady(map: L.Map) {
  map.addControl(L.control.zoom({ position: 'bottomright' }));
}

。

<div class="leaflet-container grow z-0" leaflet [leafletZoom]="leafletZoom" [leafletCenter]="leafletCenter" (leafletMapReady)="($event)">
    <div [leafletLayer]="tileLayer"></div>
    <div *ngFor="let marker of markerLayers " [leafletLayer]="marker"></div>
  </div>

来源

是否有更新的方法可以使用最新版本的 ngx-leaflet (3.0) 来执行此操作？

这是一个屏幕截图，显示控制对象上没有缩放方法：

有没有其他方法可以在运行时更改 ngx-leaflet 地图坐标？这可以通过谷歌地图实现，我正在尝试对传单做同样的事情。

最初设置后，对 leafletOptions 的更改将被忽略。这是因为这些选项被传递到地图构造函数中，因此无论如何都无法更改它们。因此，在创建地图之前请确保该对象存在。您需要在 ngOnInit 中创建对象或使用 *ngIf 隐藏地图 DOM 元素，直到您可以创建选项对象。

成分：

  private   options = {
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© OpenStreetMap contributors'
        })
      ],
      zoom: 7,
      center: latLng([ 46.879966, -121.726909 ])
    };

html:

<div style="height: 500px;"
    leaflet
     [leafletOptions]="(options)"
     ></div>

我有使用 ngx-leaflet 和路由的 Angular 10 应用程序。我有一个地图组件，它根据用户选择在地图上动态显示自定义标记。我从地图组件视图导航到另一个组件。然后我导航回地图组件。用户可以更改日期，并基于此，旧的标记层将被删除，新的标记层将被加载并显示。一切正常，但我总是收到此错误：

ERROR TypeError: Cannot read property '_leaflet_pos' of undefined
at getPosition (leaflet-src.js:2450)
at NewClass._getMapPanePos (leaflet-src.js:4439)
at NewClass._moved (leaflet-src.js:4443)
at NewClass.getCenter (leaflet-src.js:3798)
at NewClass.setZoom (leaflet-src.js:3181)
at SafeSubscriber._next (map.component.ts:960)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)

只有当我返回到地图组件时，我才能重现此错误。如果我只停留在地图组件上，则不会显示错误。我已经寻找修复方法，但从我发现的情况来看，似乎没有人真正知道为什么会发生这种情况以及如何修复此错误。我在 GitHub 上发现这两个问题在 Vue.js 中处理相同的问题，所以我猜这是传单本身的问题，而不是 ngx-leaflet 的问题。

https://github.com/vue-leaflet/Vue2Leaflet/issues/613

https://github.com/stefanocudini/leaflet-search/issues/129

我试图改变这一点：

  function getPosition(el) {
// this method is only used for elements previously positioned using setPosition,
// so it's safe to cache the position for performance

return …

我在尝试将 onEachFeature Methode 用于 geoJSON 层时遇到问题。我尝试为每个功能分配一个点击侦听器。问题是，当我单击某个功能时，总是会收到该错误：

未捕获的类型错误：无法读取未定义的属性“detectChanges”

我可以想到这是因为在构造函数运行之前分配了层，但是在 ngOnInit 函数中这样做也不起作用。如果有一个很好的方法来做到这一点会很酷:)

  constructor(private changeDetector: ChangeDetectorRef){}

  fitBounds: LatLngBounds;
  geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});

  onEachFeature(feature , layer) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }

  layer: Layer[] = [];
  fitBounds: LatLngBounds;
  
  onEachFeature(feature , layer : geoJSON) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        console.log("tets"+e.target.getBounds().toBBoxString());
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }
  
constructor(private changeDetector: ChangeDetectorRef){}

ngOnInit() {
      let geoLayer = geoJSON(statesData, {onEachFeature …

请注意，我正在为 Angular 使用 @asymmetrik/ngx-leaflet-draw 。我正在配置一个地图，用户可以在其中绘制矩形或多边形。然后我将它们保存到基于 onDrawCreated 事件的 LayerGroup 中，这工作得很好。

我还打算根据 onDrawDeleted 事件删除图层，但由于某种原因，这不起作用。我最终在应用程序中做的是保存数据并将其转换为 GeoJSON。然后将其显示在控制台中以进行故障排除。

组件 HTML：

<button (click)="checked = !checked">Edit Mode</button>
<button (click)="onSave()">Save</button>
<div id="image-map" 
leaflet 
[leafletOptions]="options" 
[leafletLayersControl]="layersControl"
    (leafletMapReady)="onMapReady($event)">
    <div *ngIf="checked" 
    leafletDraw 
    [leafletDrawOptions]="drawOptions" 
    (leafletDrawCreated)="onDrawCreated($event)" 
    (leafletDrawDeleted)="onDrawDeleted($event)">
    </div>
</div>

部分地图和传单绘制组件：

  zones = L.featureGroup();

  onDrawCreated(e: any) {
    this.zones.addLayer(e.layer);
    console.log('Draw Created Event!', e);
    console.log(this.zones.getLayers());
  }

  onDrawDeleted(e: any) {
    this.zones.removeLayer(e);
    console.log('Draw Deleted Event!', e);
    console.log(this.zones.getLayers());
  }

  onSave() {
    const data = this.zones.toGeoJSON();
    console.log(data);
  }

根据文档和其他类似问题，上述代码应该可以工作。但我想我错过了一些简单的事情。

我正在尝试向 Asymmetrik/ngx-leaflet 创建的地图添加图例。该地图是按照https://github.com/Asymmetrik/ngx-leaflet中的教程创建的 。有两个不同的层，每个层应该有不同的图例。该代码是使用 Angular CLI 和 leaflet 编写的。有一个地图组件。map.component.ts文件如下：

import {Component, Input, OnChanges, OnInit} from '@angular/core';
import {circle, geoJSON, GeoJSONOptions, latLng, Layer, LeafletMouseEvent, polygon, tileLayer} from 'leaflet';
import * as L from 'leaflet';
import {SimpleResult} from '../../models/SimpleResult';
import {HttpClient} from '@angular/common/http';
import {IDrilldownResult} from '../../models/DrilldownResult';

@Component({
  selector: 'app-map-chart',
  templateUrl: './map-chart.component.html',
  styleUrls: ['./map-chart.component.css']
})
export class MapChartComponent implements OnInit, OnChanges {

  @Input() private data: IDrilldownResult;
  public options: any;
  public layersControl = {
    baseLayers: { }
  };

  private getColor(value, max, …