Кнопка фильтра листовок в Typescript для угловых - PullRequest
Новая
       27

Кнопка фильтра листовок в Typescript для угловых

1 голос
/ 28 марта 2019

Я пытаюсь использовать плагин Кнопка фильтра тегов на Листовка для фильтрации моего другого маркера, но он не работает с моим приложением из Angular 7, потому что я использую Typescript .

У кого-нибудь есть решение для фильтрации маркеров с несколькими тегами?

1 Ответ

0 голосов
/ 28 марта 2019

Установка листовки, листовки-кнопки, листовки-тега-фильтра-кнопки

Импорт их CSS на angular.json: 

...
"styles": [
        "../node_modules/leaflet/dist/leaflet.css",
        "../node_modules/leaflet-easybutton/src/easy-button.css",
        "../node_modules/leaflet-tag-filter-button/src/leaflet-tag-filter-button.css",
        "styles.css"
      ],
...

в .ts: 

import "leaflet-easybutton";
import "leaflet-tag-filter-button/src/leaflet-tag-filter-button.js";

Создайте переменную markerIcon как L.icon и используйте ее следующим образом: 

 var fastMarker = L.marker([36.8963965256, 30.708771944], {
   icon: markerIcon,
   tags: ["fast"]
 })
 .addTo(map)
 .bindPopup("fast");

Используйте аналогичную технику для остальных маркеров.Наконец, создайте экземпляр вашего tagFilterButton класса: 

(L.control as any)
      .tagFilterButton({
        data: ["fast", "slow", "none"],
        icon: '<img src="assets/filter.png">',
        filterOnEveryClick: true
      })
      .addTo(map);

Demo

...