如何在 Angular6 上将 colorFilter 与 ngx-leaflet 一起使用

Question

如何在 Angular 6 上使用像 Leaflet.TileLayer.ColorFilter with ngx-leaflet 这样的 Leaflet 插件？

我认为我的问题出在项目的导入中，因为我想使用由 ColorFilter 插件创建的函数，但此插件不是类型定义的一部分 (index.d.ts) ngx-leaflet 个。我对吗？如果是，我该如何解决？有没有办法在 ColorFilter 中贡献一个类型定义，以便将来即插即用并帮助像我这样的其他人？你有一些文档吗？

这是我真正的失败：

app.module.ts

这里我导入ngx-leaflet

imports: [
    ...
    LeafletModule.forRoot()
],

.angular-cli.json

这里我直接导入 JS 文件，因为我在 ColorFilter 插件中没有模块

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

my.component.ts

import {circle, icon, latLng, marker, polygon, tileLayer} from 'leaflet';

...

ngOnInit() {
    const myFilter = [
      'grayscale:100%',
      'invert:100%',
    ];

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

错误

error TS2339: Property 'colorFilter' does not exist on type 'typeof 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

模板：

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

示例传单选项对象：

options = {
    layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
};

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 上将 colorFilter 与 ngx-leaflet 一起使用

How to use colorFilter with ngx-leaflet on Angular6

angular

typescript

ngx-leaflet

这是我真正的失败：