0

我正在尝试在 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”

脚步：

  1. npm i @geoman-io/leaflet-geoman-free
  2. 在组件中导入 geomanimport '@geoman-io/leaflet-geoman-free';
  3. 在“build”部分的 angular.json 中导入 geoman 样式：
"styles": [
             "src/styles.scss",
             "./node_modules/leaflet/dist/leaflet.css",
             "./node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"
           ],
  1. 我的组件：
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)，它会引发相同的错误。感谢帮助！

4

1 回答 1

1

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

 onMapReady(map: any)
于 2020-11-16T07:37:26.640 回答