ngx-leaflet Angular 2 +，preferCanvas：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 option仅影响矢量叠加，例如要在Canvas或SVG渲染器上渲染的Polygon，Polyline，Circle。要通过画布渲染标记，可以考虑使用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