На главную... Продукты | Технологии | Классификаторы | Проекты | Скачать | Цены| Форум | Статьи | Обучение | Контакты

Создание своего компонента

Поиск  Пользователи  Правила  Войти
Форум » Серверные приложения » GIS WebToolKit
Страницы: 1 2 3 4 5 6 След.
RSS
Создание своего компонента
 
#1
27.05.2024 14:02:53
Как настраивать GIS WEbToolKit и включать/выключать существующие компоненты разобрался.
Теперь стоит задача разработки компонента, который выполняет слебующие действия:
1) мышью выбираем объект на карте, например здание
2) задаем радиус
3) ищем объекты, находящиеся в пределах радиуса и имеющие заданный тип (линейный, площадной) и/или код классификатора и/или заданные семантики
4) формируем список объеьтов
5) подсвечиваем
На компонент хочу подвесть свою собственную иконку, желательно PNG,но не понял где их надо размещать.

Хотелось бы узнать какие методы класов Task и Action надо реализовать и какой функционал в них прописать.
Поскольку это мой перый компонент, то просьба рассказать логику работы. Дальше будет уже проще работать.
 
 
 
#2
28.05.2024 14:32:20
Цитата
Валерий Парусов написал:
Хотелось бы узнать какие методы класов Task и Action надо реализовать и какой функционал в них прописать.Поскольку это мой перый компонент, то просьба рассказать логику работы. Дальше будет уже проще работать.
Добрый день!
Под вашу задачу подходит компонент "Поиск по области" (GwtkSearchArea) - находим все объекты в заданном радиусе, затем фильтруем результат по типу, классификатору, семантикам.
1. При необходимости создать свой компонент, можно продублировать папку уже имеющегося компонента (например GwtkBuilderOfZoneTask), изменить все наименования связанные с компонентом во всех его файлах и зарегистрировать новый компонент - импортировать созданный компонент в gwtkse/src/components/index.ts и добавить его в объект ComponentNames в файле gwtkse/src/components/VueMapWindow.ts.

2. Для взаимодействия с картой и прослушивания событий мыши\клавиатуры из компонента, используется файл *Action.ts в папке actions.

3.Реализацию выбора точки и области для поиска можно подсмотреть у компонента gwtkse\src\components\GwtkSearchArea.

4. Применение фильтров для поиска можно найти в файле gwtkse\src\components\GwtkMapObjectPanelControl\task\GwtkMap­ObjectTask.ts - setState -> SELECT_SEARCH_FILTER, SELECT_SORT_SEMANTIC.

5. Чтобы установить свое изображение, необходимо в папку gwtkse\src\components\VuetifyComponents\src\components\Icon\­icons-source поместить svg изображение, затем в index.ts файле компонента options -> icon указать имя своего изображения.
Это краткий ответ. Полноценная инструкция по созданию компонента в процессе разработки.
Изменено: Елена Кузнецова - 28.05.2024 14:34:44
 
 
 
#3
10.06.2024 08:07:05
Если брать иконки из Material Design Icons, то стиль у них черно-белый, также свои SVG, даже если исходные были цветные, тоже отображаются в этом стиле.
И только одна моя иконка тотбражается в цвете (видимо там жестко все задано).
Вопрос - где меняется стиль отображения иконок в создаваемом приложении?
 
 
 
#4
10.06.2024 11:52:28
Цитата
Валерий Парусов написал:
...
Вопрос - где меняется стиль отображения иконок в создаваемом приложении?
Добрый день!
В параметрах пользовательского интерфейса есть возможность настраивать для иконок только цвет фона (через css-переменные).
Изменить цвет изображения иконки можно с помощью атрибута color компонента gwtk-icon (gwtkse/src/components/System/Vuetify/GwtkIcon/):
Код
<gwtk-icon
    size="19"
    name="mdi-close"
    color="yellow"
/>
 
 
 
#5
10.06.2024 13:02:11
А как при старте приложения выключить режим поиска объектов и отображения их свойств при нажатии мышью на карте?
Нужный режим я потом сам включу в своем компоненте.
Изменено: Валерий Парусов - 10.06.2024 13:03:09
 
 
 
#6
10.06.2024 18:26:09
Цитата
Валерий Парусов написал:
А как при старте приложения выключить режим поиска объектов и отображения их свойств при нажатии мышью на карте?
...
Заблокировать выбор объекта можно только активировав блокирующий обработчик.
Например:
1. Создать класс, наследующий Action, и переопределить метод canSelectObject:
Код
export default class ClickBlockingAction extends Action<КЛАСС_ВАШЕЙ_ЗАДАЧИ> {
    canSelectObject(): boolean {
        return false;
    }
}

2. В классе КЛАСС_ВАШЕЙ_ЗАДАЧИ внести правки:
Код
. . .
constructor(mapWindow: MapWindow, id: string) {
        . . .
        this.actionRegistry.push(
            {
                getConstructor() {
                    return ClickBlockingAction;
                },
                id: 'ИДЕНТИФИКАТОР_БЛОКИРУЮЩЕГО_ОБРАБОТЧИКА',
                active: false,
                enabled: true
            }
        );
. . .
}

setup() {
        this.doAction('ИДЕНТИФИКАТОР_БЛОКИРУЮЩЕГО_ОБРАБОТЧИКА');
        super.setup();
. . .
}

quit() {
        this.quitAction('ИДЕНТИФИКАТОР_БЛОКИРУЮЩЕГО_ОБРАБОТЧИКА');
        super.quit();
. . .
} 
. . .

3.  Для того, чтобы выбор объектов блокировался при старте приложения, необходимо добавить запуск Вашей задачи при инициализации (файл index.ts):
Код
. . .
    mapWindow.getTaskManager().registerTask( taskDescription );
    mapWindow.getTaskManager().createTask(taskDescription.id);
}
 
 
 
#7
11.06.2024 05:13:29
Полумера получается. При старте приложения - не реагирует на мышь.
После вызова любого компонента - опять включается реакция.
 
 
 
#8
11.06.2024 05:41:14
Цитата
Виктор Сихневич написал:
В параметрах пользовательского интерфейса есть возможность настраивать для иконок только цвет фона (через css-переменные).
Непонятен принцип отображения SVG в приложении.
Вот иконка в Figma
Вот она в проводнике Астры
А вот как она отображается в панели компонента, задается так:
Код
<gwtk-icon
size="48"
name="green_level"
/>
 
 
 
#9
11.06.2024 11:16:27
Цитата
Валерий Парусов написал:
Непонятен принцип отображения SVG в приложении.
если в SVG-файле цвет задан через атрибут style, то он не переопределяется настройками приложения.
Например, такой цвет заливки сохранится независимо от внешних стилей:
Код
style="fill: #FF4433;"

цвет, который указан напрямую в атрибуте, будет проигнорирован:

Код
fill="#FF4433"
 
 
 
#10
11.06.2024 13:37:00
Содержимое файла:
Код
<sv g width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="2.5" width="43" height="43" rx="2.5" fill="url(#paint0_linear_5_9)" stroke="url(#paint1_linear_5_9)" stroke-width="5"/>
<path d="M12 13H17.5V22H29.5V13H34.5V16H32V37H15V16H12V13Z" fill="white"/>
<path d="M18 14.75C18 14.75 19.2924 14 20.5 14C21.7076 14 22.7937 14.8061 24 14.75C25.0182 14.7026 25.4807 14 26.5 14C27.5193 14 29 14.75 29 14.75" stroke="white" stroke-width="2"/>
<defs>
<linearGradient id="paint0_linear_5_9" x1="48" y1="48" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#00520D"/>
<stop offset="1" stop-color="#00A81B"/>
</linearGradient>
<linearGradient id="paint1_linear_5_9" x1="-3" y1="-3.7998e-07" x2="48" y2="48" gradientUnits="userSpaceOnUse">
<stop stop-color="#00520D"/>
<stop offset="1" stop-color="#00A81B"/>
</linearGradient>
</defs>
</svg>
 
 
 
Страницы: 1 2 3 4 5 6 След.
Читают тему (гостей: 3)



© КБ Панорама, 1991-2025

Регистрируясь или авторизуясь на форуме, Вы соглашаетесь с Политикой конфиденциальности