ngx-leaflet Angular 2 +， preferCanvas： true don't render canvas

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选项仅影响 vector 覆盖层，例如polygon，polyline，circle，circle，circle by play cons convas或 SVG渲染器。要通过画布渲染标记，可以考虑CircleMarker而不是Marker，例如：

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)
    };
  }
}

demo