Question

如何在Angular 6上将Leaflet.TileLayer.ColorFilter之类的Leaflet插件与ngx-leaflet一起使用？

我认为我的问题在于项目的导入，因为我想使用由ColorFilter插件创建的函数，但是此插件不是{的Type Definition（index.d.ts）的一部分{1}}。我对吗？如果是，我该如何解决？有没有一种方法可以在ColorFilter中提供Type定义以供将来即插即用并帮助像我这样的其他人？你有一些文档吗？

这是我的实际失败：

app.module.ts

我在这里导入ngx-leaflet

ngx-leaflet

.angular-cli.json

由于imports: [ ... LeafletModule.forRoot() ],插件中没有模块，因此我直接导入JS文件

ColorFilter

my.component.ts

"scripts": [
    "../node_modules/leaflet.tilelayer.colorfilter/src/leaflet-tilelayer-colorfilter.min.js"
],

错误

错误TS2339：类型'typeof中不存在属性'colorFilter' tileLayer'。

Answer 1

仅从ngx-leaflet模块中导出指令。因此，您只能将传单附加到模板文件中的DOM中。从上面的代码中，您尝试作为组件进行访问。 https://github.com/Asymmetrik/ngx-leaflet/blob/master/src/leaflet/leaflet.module.ts

根据GitHub文档https://github.com/Asymmetrik/ngx-leaflet

模板：

     function isValidMobileNumber(number) {
    	if (number == null || number.trim().length == 0) {
    		return false;
    	}
    	number = number.replace(new RegExp('[ -]', 'g'), '');
    	var rx = /^[+]\d{7,13}$/;
    	return rx.test(number);
    }
    
    var strs = ['+1-234-242-2434','+1-23-2','+123','+256897845','+1 232321','+29 2343 2432 43','+555 2356897845','+1245 2356878','+918989784578'];
    for (var s of strs) {
    	console.log (s + " --> " + isValidMobileNumber(s));
    }

leafletOptions对象示例：

<div style="height: 300px;"
     leaflet 
     [leafletOptions]="options">
</div>

Answer 2

为了使lealfet.tilelayer.colorfilter插件可以在ngx-leaflet上使用您需要将其直接导入component.ts上，因为某些原因，它不可能通过angular.json-Webpack似乎没有捆绑该文件，允许它修改L名称空间（在我的情况下不起作用），然后应该可以直接在您的组件中调用L.tileLayer.colorFilter，对于我来说，它只能使用(L.tileLayer as any).colorFilter来工作。

import * as L from 'leaflet';

import "node_modules/leaflet.tilelayer.colorfilter/src/leaflet-tilelayer-colorfilter.js"

...

defaultToDarkFilter = [
    'grayscale: 100%',
    'invert: 100%',
];

options = {
    layers: [
        (L.tileLayer as any).colorFilter('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
            maxZoom: 18, 
            attribution: '...' , 
            filter: this.defaultToDarkFilter
        }),
    ],
    zoom: 3,
    center: L.latLng(46.879966, -121.726909)
};

Demo

如何在Angular6上的ngx-leaflet中使用colorFilter

这是我的实际失败：

2 个答案: