将 EasyButton、Geoman 与 ngx-leaflet 集成

Question

我在我的 Angular 应用程序中使用原始 leaflet.js，它依赖于一些传单插件，如 EasyButton、Geoman、Distortable Image。 ngx-leaflet 看起来又酷又简单。所以我决定迁移到 ngx-leaflet。但我确定是否可以将这些插件与库集成。如果是，请提供一些指导。

Answer 1

回答我自己的问题。以下是我让 geoman 使用 ngx-leaflet 所遵循的步骤。

安装 geoman npm i @geoman-io/leaflet-geoman-free。参考 geoman github page
在 styles.scss 中导入 geoman css @import '../node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
在组件中导入geomanimport '@geoman-io/leaflet-geoman-free'; 完成。

然后像这样使用它

this.map.pm.addControls({
      position: 'topleft',
      drawCircle: false,
      drawCircleMarker: false,
      drawPolyline: true,
      drawRectangle: false,
      drawPolygon: true,
      editMode: false,
      dragMode: false,
      cutPolygon: false,
      removalMode: false,
      drawMarker: false
    });

Answer 2

我正在尝试这种集成，但找不到 Geoman 的任何类型。

在我的项目中，我使用@asymmetrik/ngx-leaflet并遵循documentation to access the map reference。

我编写了一个组件，在调用 onMapReady 时，map.pm 停止了我的应用程序的构建。

我收到此错误：属性 'pm' 不存在于 'Map' 类型中。

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import '@geoman-io/leaflet-geoman-free';
@Component({
  selector: 'app-main-map',
  templateUrl: './main-map.component.html',
  styleUrls: ['./main-map.component.css']
})
export class MainMapComponent implements OnInit {


    aMarker = L.marker([ -23.95, -46.38 ], {
              icon: L.icon({
                  iconSize: [ 25, 41 ],
                  iconAnchor: [ 13, 41 ],
                  iconUrl: 'assets/marker-icon.png',
                  shadowUrl: 'assets/marker-shadow.png'
              })
          });
    constructor() { }
    
    ngOnInit(): void {
    }
    
    onMapReady(map: L.Map) {
        this.aMarker.addTo(map);
        map.pm.addControls({
          position: 'topleft',
          drawCircle: false,
          drawCircleMarker: false,
          drawPolyline: true,
          drawRectangle: false,
          drawPolygon: true,
          editMode: false,
          dragMode: false,
          cutPolygon: false,
          removalMode: false,
          drawMarker: false
        });
    }

}

我知道这不是最好的，但临时解决方案是使用括号表示法。它适用于我的 Angular 10 项目。

// The same code as above, but with bracket notation.
onMapReady(map: L.Map) {
    this.aMarker.addTo(map);
    
    map["pm"]["addControls"]({
      position: 'topleft',
      drawCircle: true,
      drawCircleMarker: true,
      drawPolyline: true,
      drawRectangle: true,
      drawPolygon: true,
      editMode: true,
      dragMode: true,
      cutPolygon: true,
      removalMode: true,
      drawMarker: true
    });
}

虽然我找不到更好的解决方案或时间来为 Geoman 创建类型，但我是这样使用它的。

希望对大家有用

Answer 3

这在 Angular 8 项目中对我有用：

npm i @geoman-io/leaflet-geoman-free
在你的组件中
- 导入“@geoman-io/leaflet-geoman-free”；
- 导入'style-loader!@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'；

将 EasyButton、Geoman 与 ngx-leaflet 集成

Integrate EasyButton, Geoman with ngx-leaflet

leaflet

ngx-leaflet

leaflet-geoman