时间戳

首页 > 解决方案 > 如何在 Angular6 上使用 colorFilter 和 ngx-leaflet

angular - 如何在 Angular6 上使用 colorFilter 和 ngx-leaflet

问题描述

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

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

这是我的实际失败：

app.module.ts

我在这里导入ngx-leaflet

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

.angular-cli.json

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

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

我的.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)
};

错误

错误 TS2339：“typeof tileLayer”类型上不存在属性“colorFilter”。

标签： angulartypescriptngx-leaflet

解决方案

为了使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)
};

演示

推荐阅读