角12 -传单-传单路由加工问题-“进口类型”上不存在属性“路由”

Question

希望你们一切顺利。我试着用传单来加工，但我不知道问题出在哪里。

步骤我已经这么做了:

1. npm安装-节省传单-路由-机器
2. dashboard.component.ts

import {Component, OnInit} from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-routing-machine';
import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
import {Poste} from "@/Model/Poste";
import {PosteService} from "@services/poste.service";
import {HttpErrorResponse} from "@angular/common/http";
import {SharedDataService} from "@services/shared-data.service";
import {ToastrService} from "ngx-toastr";

// default icon (blue)
let iconDefault = L.icon({
  iconUrl: 'assets/marker-icon.png',
  shadowUrl: 'assets/marker-shadow.png',

  iconSize:     [25, 41], // size of the icon
  shadowSize:   [41, 41], // size of the shadow
  iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
  shadowAnchor: [12, 41],  // the same for the shadow
  popupAnchor:  [1, -34] // point from which the popup should open relative to the iconAnchor
});
// red icon
let redIcon = L.icon({
  iconUrl: 'assets/marker-icon-red.png',
  shadowUrl: 'assets/marker-shadow.png',

  iconSize:     [25, 41], // size of the icon
  shadowSize:   [41, 41], // size of the shadow
  iconAnchor:   [12, 41], // point of the icon which will correspond to marker's location
  shadowAnchor: [12, 41],  // the same for the shadow
  popupAnchor:  [1, -34] // point from which the popup should open relative to the iconAnchor
});
// user icon
let userIcon = L.icon({
  iconUrl: 'https://assets.mapquestapi.com/icon/v2/flag-Moi-3B5998-22407F-lg.png',
  popupAnchor:  [1, -34] // point from which the popup should open relative to the iconAnchor
});


@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})

export class DashboardComponent {
  public postes: Poste[];
    public map;
    public posteInfo : Poste;
  public delegations: number[];
  public selectedDeleg: number;
  public markerGroup;
  public rangeValues: number[] = [0,100];



  constructor(private posteService: PosteService,private sharedDataService:SharedDataService,
              private toastr: ToastrService) {
    this.selectedDeleg=0;
  }


  createMap(){
        const Casablanca = {
            lat : 33.5731104,
            lng : -7.5898434
        };

        const ZoomLevel = 12;
        this.map = L.map('map',{
            center: [Casablanca.lat, Casablanca.lng],
            zoom: ZoomLevel
        });

        const mainLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          minZoom: 11,
          maxZoom: 17,
          attribution: '© Carte LYDEC '
        });
        mainLayer.addTo(this.map);
        this.getPostes();
    }

// ERROR 
  L.Routing.control({
    waypoints: [
      L.latLng(57.74, 11.94),
      L.latLng(57.6792, 11.949)
    ]
  }).addTo(this.map);


}

误差

属性‘TS2339’类型导入(C:/User/HP/Desktop/EHTP GI/EHTP 2_GI 2020-2021/Stage ing\u00E9nieur/Stage Lydec TS2339)

Answer 1

将L.Routing部件放置在方法中而不是全局的。

export class DashboardComponent implements AfterViewInit {
  ...

  ngAfterViewInit() {
    this.createMap();

    L.Routing.control({
      waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
      ]
    }).addTo(this.map);
  }
}

基于StackBlitz的样本解决方案

参考文献

如何用传单制作有角度的地图，第1部分:生成地图