将 EasyButton、Geoman 与 ngx-leaflet 集成

Question

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

Answer 1

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

1. 安装geoman

   npm i @geoman-io/leaflet-geoman-free

   。参考 geoman github 页面

2. 在styles.scss中导入geoman css

   @import '../node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';

3. 组件中导入geoman

   import '@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 并按照 文档访问地图参考。

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

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

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 我@geoman-io/leaflet-geoman-free
• 在您的组件中
  • 导入“@geoman-io/leaflet-geoman-free”；
  • 导入'样式加载器！@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';