属性 'kmzLayer' 不存在于类型 'typeof import("/home/doug/portal/node_modules/@types/leaflet/index")'

问题描述

我使用的是使用 NPM 安装的 https://github.com/Raruto/leaflet-kmz。问题上线了：

     const kmz = L.kmzLayer().addTo(this.map);

Angular 拒绝编译，只是无法扩展传单库以将 kmzLayer() 方法添加到地图对象。 我不知道如何进行这项工作，因为这个库没有声明打字稿类型。有什么办法可以让我做到这一点吗？

谢谢

import {Component,OnInit,Output,EventEmitter,Input,OnDestroy,AfterViewInit} from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-draw';
import 'leaflet-kmz';
import {MapService,MapLayer} from '../../services/map/map.service';
import {FeatureCollection,GeometryCollection,Feature} from 'geojson';
import { BehaviorSubject } from 'rxjs';

@Component({
    selector: 'ngx-map',templateUrl: './map.component.html',styleUrls: ['./map.component.scss'],})
export class MapComponent implements OnInit,AfterViewInit {

    options = {
        layers: [
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom: 18,attribution: '...'}),],zoom: 5,center: L.latLng({lat: 38.991709,lng: -76.886109}),};

    map: L.Map;
    editableLayers: L.FeatureGroup;
    drawControl: L.Control.Draw;
    @input() editMode: boolean;
    @input() mapId: any = 'mapa';
    layerGroup: L.LayerGroup<any>;
    layersControl:L.Control.LayersObject = {};
    baSEOvelay: L.TileLayer;
    control: L.Control.Layers;
    @input() 
    set mapLayers(layers){
        this.allLayers.next(layers)
    };
    get mapLayers() {
        return this.allLayers.getValue();
    }

@Output() geoJSON: EventEmitter<FeatureCollection | GeometryCollection | Feature> = new EventEmitter();

    constructor(private mapService: MapService) {
    }

    ngAfterViewInit(): void {
        this.initMap();
    }

    resize(e) {
        e.preventDefault();
        this.map.invalidateSize(true)        
    }

    private initOverlay() {
        
    
        this.baSEOvelay = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{
            maxZoom: 17,attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>,' +
                ' <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy;' +
                ' <a href="https://opentopomap.org">OpenTopoMap</a> ' +
                '(<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',opacity: 0.90,}).addTo(this.map);

    }

    private initMap(): void {

        this.map = L.map(this.mapId).setView([-13.8912495,-57.769014],5);

        this.layerGroup = L.layerGroup().addTo(this.map);
        
        this.initOverlay();        
        this.addDrawer();

        this.control = L.control.layers({},{"Terreno":this.baSEOvelay}).addTo(this.map);
        
        if (this.editMode) {
            this.enableEdit();
        }

        this.allLayers.subscribe(l => {      
            this.clearLayerControl();
            this.layerGroup.clearLayers();
            this.addLayers(l);            
        });

        const kmz = L.kmzLayer().addTo(this.map);

        setTimeout(() => {
            this.map.invalidateSize(true)
        },10);        

    }

    private clearLayerControl() {         
        this.map.eachLayer(
            l => this.control.removeLayer(l)
        )
    }
    enableEdit() {
        this.editMode = true;
        this.map.addControl(this.drawControl);
    }

    disableEdit() {
        this.editMode = false;
        this.map.removeControl(this.drawControl);
    }

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）