4

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

4

3 回答 3

4

回答我自己的问题。以下是我让 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. 在组件import '@geoman-io/leaflet-geoman-free'; Done 中导入 geoman。

然后像这样使用它

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
    });
于 2020-02-18T13:01:11.127 回答
0

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

在我的项目中，我使用 @asymmetrik/ngx-leaflet 并按照文档访问地图参考。

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

我收到此错误：“地图”类型中不存在属性“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 创建类型，但我还是这样使用它。

我希望它对任何人都有用。

于 2020-08-09T02:37:28.453 回答
0

这在 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'；
于 2020-08-17T12:31:52.303 回答