如何将 geoman-io 与 ngx-leaflet 一起使用

Question

我正在尝试使用 geoman-io 插件（https://github.com/geoman-io/leaflet-geoman) in ngx-leaflet application. I've found this post: ，但此 post 中提供的唯一对我有用的解决方案是使用括号表示法，例如：

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

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

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

Property 'pm' does not exist on type 'Map'

步骤：

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

"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) ，它会抛出相同的错误。感谢您的帮助！

Answer 1

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

 onMapReady(map: any)

如何将 geoman-io 与 ngx-leaflet 一起使用

How to use geoman-io with ngx-leaflet

leaflet

ngx-leaflet

leaflet-geoman