Как я могу использовать плагин Leaflet, например Leaflet.TileLayer.ColorFilter с ngx-leaflet на Angular 6?

Я думаю, что моя проблема в импорте проекта, потому что я хочу использовать функцию, созданную плагином ColorFilter, но этот плагин не является частью определения типа (index.d.ts) для {{X2} }. Я прав ? Если да, то как я могу это исправить? Есть ли способ добавить определение типа в 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)
};

Ошибка

ошибка TS2339: свойство colorFilter не существует для типа typeof tileLayer.

1
Rignon Noel 14 Окт 2018 в 05:50

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

Демо

0
kboul 21 Фев 2019 в 12:17

Из модуля ngx-leaflet он экспортирует только директивы. Таким образом, вы можете прикрепить листовку только в DOM в файлах шаблонов. Из приведенного выше кода вы пытаетесь получить доступ как компонент. https://github.com/Asymmetrik/ NGX - листовка / блоб / ведущий / SRC / листовка / leaflet.module.ts

Согласно документации GitHub https://github.com/Asymmetrik/ngx-leaflet

Шаблон:

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

Пример объекта leafletOptions:

options = {
    layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
};
0
Suresh Kumar Ariya 14 Окт 2018 в 09:58