ngx-leaflet Angular 2+, предпочитать Canvas: true не отображать холст

Question

Мне нужно отрисовать много меток на карте, поэтому я пытаюсь использовать холст для оптимизации своего приложения.Но в DOM я снова вижу img.Если я правильно понимаю, структура должна быть такой же, но с холстом внутри визуализации div.Я использую:

"leaflet": "^1.4.0"
"@asymmetrik/ngx-leaflet": "^5.0.1"
"@types/leaflet": "^1.4.0"
Angular 7

Мой HTML:

<div leaflet class="leaflet-map" #divMap
 [leafletOptions]="options"
 [leafletLayersControl]="layersControl"
 (keydown.control)="keyDownHandler($event, divMap)"
 (keyup.control)="keyUpHandler($event, divMap)"
 (leafletMouseDown)="onMouseDown($event)"
 (leafletMouseUp)="onMouseUp($event)"
 (leafletClick)="onMapClick($event)"
 (leafletMapReady)="onMapReady($event)"
 (leafletMapZoom)="onMapZoom($event)">
</div>

Мой компонент:

export class MapComponent implements OnInit, OnDestroy {
  map: L.Map;
  options: MapOptions;
  layersControl: any;
  markers: MapMarker[] = [];
  polygon: Polygon = null;
  userWatch: any;
  firstPoint: any;

  markerOptions = {
    icon: icon({
      iconSize: [25, 41],
      iconAnchor: [13, 41],
      iconUrl: 'assets/marker-icon.png',
      shadowUrl: 'assets/marker-shadow.png'
    })
  };

  constructor(private geocodeService: GeocodeService) {
  }

  ngOnInit() {
    this.options = {
      preferCanvas: true,
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: ''
        }),
      ],
      zoom: 15,
      center: latLng(53.9266754, 27.6940687)
    };
  }
}

Answer 1

Параметр Map.preferCanvas влияет только на векторные оверлеи, такие как Polygon, Polyline, Circle, которые будут отображаться на Canvas или SVG визуализатора.Для рендеринга маркеров через холст вместо Marker можно рассмотреть CircleMarker, например:

app.component.html

<div leaflet class="leaflet-map" #divMap
 [leafletOptions]="options"
 [leafletLayersControl]="layersControl"
 [leafletLayers]="layers">
</div> 

app.componennt.ts

export class AppComponent implements OnInit {
  options: MapOptions;
  layers = [
    circleMarker([ 53.9266754, 27.6940687 ])
];

  constructor() {
  }

  ngOnInit() {
    this.options = {
      preferCanvas: true,
      layers: [
        tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 2,
          attribution: ''
        }),
      ],
      zoom: 15,
      center: latLng(53.9266754, 27.6940687)
    };
  }
}

Демо