如何在ngx-leaflet中使用geoman-io

问题描述

我正在ngx-leaflet应用程序中尝试使用geoman-io插件（https://github.com/geoman-io/leaflet-geoman）。我发现了这篇文章：Integrate EasyButton,Geoman with ngx-leaflet，但是这篇文章中提供的唯一对我有用的解决方案是使用这样的括号符号：

map["pm"]["addControls"]({position: 'topleft'});

我想这不是最好的方法。所以我的问题是如何在ngx-leaflet中正确使用geoman-io？

当我完全尝试这些步骤时，它不起作用，因为在map.pm.addControls({...})时出现错误

类型“地图”上不存在属性“ pm”

步骤：

npm i @geoman-io/leaflet-geoman-free
在组件import '@geoman-io/leaflet-geoman-free';中导入geoman
在“构建”部分的angular.json中，导入风水师样式：

"styles": [
             "src/styles.scss","./node_modules/leaflet/dist/leaflet.css","./node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"
           ],

我的组件：

import { BaseIconoptions,geoJSON,Bounds,CRS,Icon,icon,Iconoptions,imageOverlay,latLng,LatLngBounds,LatLngBoundsExpression,layerGroup,Map,marker,point,polyline,tileLayer } from 'leaflet';

import * as L from 'leaflet';
import 'leaflet-rotatedmarker';
import '@geoman-io/leaflet-geoman-free';

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

...

  onMapReady(map: Map) {
   map.pm.addControls({
    position: 'topleft',drawMarker: false
  });
 }

}

我的package.json文件：

 "dependencies": {
    "@angular/animations": "~10.2.0","@angular/cdk": "^10.2.7","@angular/common": "~10.2.0","@angular/compiler": "~10.2.0","@angular/core": "~10.2.0","@angular/flex-layout": "^10.0.0-beta.32","@angular/forms": "~10.2.0","@angular/material": "^10.2.7","@angular/platform-browser": "~10.2.0","@angular/platform-browser-dynamic": "~10.2.0","@angular/router": "~10.2.0","@asymmetrik/ngx-leaflet": "^8.1.0","@fortawesome/angular-fontawesome": "^0.7.0","@geoman-io/leaflet-geoman-free": "^2.7.0","@types/leaflet": "^1.5.19","@types/leaflet-rotatedmarker": "^0.2.1","leaflet": "^1.7.1","leaflet-rotatedmarker": "^0.2.0","rxjs": "~6.6.0","tslib": "^2.0.0","zone.js": "~0.10.2"
  },"devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0","@angular/cli": "~10.2.0","@angular/compiler-cli": "~10.2.0","@types/node": "^12.11.1","@types/jasmine": "~3.5.0","@types/jasminewd2": "~2.0.3","codelyzer": "^6.0.0","jasmine-core": "~3.6.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~4.0.0","karma-jasmine-html-reporter": "^1.5.0","protractor": "~7.0.0","ts-node": "~8.3.0","tslint": "~6.1.0","typescript": "~4.0.2"
  }

如果我将onMapReady函数更改为onMapReady(map: L.Map)，则会引发相同的错误。感谢您的帮助！

解决方法

对我来说，它适用于任何脏类型：

 onMapReady(map: any)

leaflet leaflet-geoman ngx-leaflet