将EasyButton，Geoman与ngx-leaflet集成 [英] Integrate EasyButton, Geoman with ngx-leaflet

问题描述

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

I am using raw leaflet.js in my Angular Application which depends on some leaflet plugins like EasyButton, Geoman, Distortable Image. ngx-leaflet looks cool and simple. So I've decided to migrate to ngx-leaflet. But I am sure if it is possible to integrate these plugins with the library. If so provide some guidance.

推荐答案

回答我自己的问题.这是我让Geoman使用ngx-leaflet所遵循的步骤.

Answering my own question. Here are the steps I followed to get geoman working with 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';

   将geoman导入组件 import'@ geoman-io/leaflet-geoman-free'; 完成.

   Import geoman in the component import '@geoman-io/leaflet-geoman-free'; Done.

   然后像这样使用它

   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
       });
   

   这篇关于将EasyButton，Geoman与ngx-leaflet集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！