Switch lang: Русский \ English

WebGUI Map компонент


Компоненты

Старинца в разработке

тут будет список компонентов. TODO список не полный

map

Карта и объекты на ней.

Возможности :

  • гибкое задание url для тайлов
  • управление позицией карты и zoom
  • обратная связь по позиции и масштабу
  • получение Bounds зоны просмотра в карте , обратная связь
  • встроенный поиск объектов на карте по названию и автоматическое позиционирование на объект
  • слои с данными для показа на карте
  • внутри тэга компонента могут содержаться элемнты для отображения на карте, это могут быть :
    • маркеры с указанием стилей
    • geoJSON объекты DEPRECATED
  • задание объектов через DOM с мгновенной реакцией на свойства
  • задание объктов через JS с изменением свойств через управляемый таймаут
  • настраиваемый интервал обновления свойств (минимум тормозов на большом числе двигающихся объектов)
  • кластеризация объектов на карте, с сохранением центров кластеров,
  • ленивое оторбажение кластеров и объектов - показываются только объекты в видимой зоне
  • четыре типа кластеризации объектов
    • классический "k-means"
    • иерархический rbush
    • наш k-means our, быстрый, экономный...
    • без кластеризации - показывать все объекты none
  • управляемое число кластеров
  • управляемый размер узла rtree индекса для поиска объектов и иерархической кластеризации
  • управляемая анимация zoom , pan , fade
  • обратная связь по при клике на объекте
  • управляемый внешний вид объектов (иконка маркера, стиль, цвет итд)
  • очень простое использование компонента

подключение

require([   
                        "static/vendor/agui/comp/comp_map_apjq",
                    ],
                    function( ){
                    ...
                    }

использование map

            <div    ap-map="" style="height:400px"
                    position-in=""
                    search=""
                    bound-change-event="mapboundchanged"
                    feature-click-event="my-f-click-event"

                    clusterType="our"
                    k-means-max-iters="4"
                    clusteredItemsInMap="20"

                    jsmarkerpath="markers"
            >
                <div>просто какой-то div</div>

                <div ap-mapfeature="" type="Marker"     id="point_1" coordinates="[0.5, 102.0]" properties='{"prop0": "value0"}'></div> 
                <div ap-mapfeature="" type="Polyline" id="line_1"  coordinates="[ [ 56,42], [ 57,40], [58,38], [58.5,41] ]" properties='{}' color="green" nocluster="true"></div>

            </div>
<script>
   markers={};
<script>

свойства и настройки

  • вход tiles-url="http://tile.openstreetmap.org/{z}/{x}/{y}.png" тайлы для карты,
  • вход (если указан с самого начала) position-in ="[57.87981645527841, 39.41894531250001, 7]" json начальной позиции карты (lat,lng, zoom) + zoom.
  • выход position-out ="[57.87981645527841, 39.41894531250001, 7]" json начальной позиции карты (lat,lng, zoom) + zoom
  • выход bounds = "[SWln, SWlt, NEng, NElt]" район выбранный конкретно сейчас. выход.
  • вход bound-change-event="mapboundchanged" событие, которое генерировать при смене "квадрата" обзора
  • выход geocount="3" число geoJSON объектов, отображаемых сейчас на карте (или число кластеров), выход
  • вход, строка search = "Moscow" - строка поиска для позиционирования карты, вход. после поиска очищается
  • выход search-result0="{много данных}" первый результат поиска места в JSON формате, на который уехала карта , (Nominatim), выход

если на объекта щёлкнули (click), то следующие аттрибуты обновляются :

  • выход last-clicked-feature="{JSON of feature}" весь feature объект в виде json вместе со свойствами, пример : "{"type":"Feature","geometry":{"type":"Point","coordinates":[102,0.5]},"properties":"{\"prop0\": \"value0\"}"}"
  • выход last-clicked-coord="" lat, lng координаты объекта, который кликнули, точка тычка. например last-clicked-coord="{"lat":0.5,"lng":102}"
  • выход last-clicked-containerPoint="" x,y тычкав контейнере. например last-clicked-containerpoint="{"x":346,"y":326}"
  • вход, сигнал : затем делается trigger события, заданного в аттрибуте "feature-click-event" , если оно задано. в него передается информация (feature) .

Внутри тэга компонента могут содержаться элементы для отображения на карте, это могут быть :

  • маркеры с указанием стилей
  • geoJSON объекты

Задание объектов на карте

  • в глобальных JS структурах (Обновление координат объектов заданных через jsmarkerpath происходит через одинаковый интервал (не мгновенно и не индивидуально)) - рекомендуется для большого числа объектов (больше 10_000 шт)
  • во вложенных тегах компонента (обновление данных при слежении за объектом выполняется мгновенно) - рекмендуется для объектов которыми надо оперативно управлять.

И те и другие имеют схожие поля и свойства.

  • вход, только при инициализации jsmarkerpath="window.markers" брать отсюда маркры в виде
{
    <id> :  {   
            coordinates:[lat,lon], 
            type:'Marker' , 
            isinmove:false|true ,... 
            icon : 'url' , 
    }, 
    ...
}

Идентификаторы нельзя начинать с подчёркивания _

Словарь объектов будет сверяться кажую секунду, или интервал заданный через аттрибут jsinterval.

Свойство объекта isinmove не обязательное поле, если оно не задано в значении true - слежка за координатами вестись не будет. Считывается только при первой вставке итема в словарь. Слежение за координатами ведется при истинном поле.

Свойство объектаicon="<url.jpg>" задаёт ему иконку если это маркер (type="Marker") или Point

  • вход, только раз при инициализации компонента jsinterval="1000" - период обновления информации о объектах и их координатах заданных через jsmarkerpath в миллисекундах. по умолчанию 1000 (1 сек). Менять его потом нельзя.

  • вход, читается только при инициализации компонента карты clusteredItemsInMap="3000" объекты могут кластеризоваться, и выводиться кластеры объектов числом не более чем это число, если оно задано. 1000 по умолчанию.

  • вход. читается при инициализации clusterType="k-means" || rbush || our || none вид кластеризации данных при показе.

    • по умолчанию "k-means", число кластеров задаётся через параметр "clusteredItemsInMap".
    • rbush это иерархическая кластеризация по уровням rtree дерева, название в честь реализации rtree, который мне понравился
    • our - наша реализация k-means, она продолжить кластеризацию но уже с измененным набором данных так, чтобы кластера не смещались существенно. TODO доработка
  • вход, читается только при инициализации k-means-max-iters="2" максимальное число итераций для k-means кластеризации. по умолчанию 2.

  • вход clusterObjectsInBound="30" размер узла rtree индекса, по умолчанию 10. столько объектов входит в один уровень дерева индекса.

Оба эти параметра позволяют регилировать вид вывода с иерархической кластеризацией.

  • вход, читается только при инициализации карты zoomAnimation="true" по умолчанию false. Включение анимации при zoom карты, для экономии производительности , по умоланию выключено.

  • вход, читается только при инициализации карты fadeAnimation="true" по же самое про анимацию пропадания тайлов карты, по умолчанию false,

Comments

Comments powered by Disqus
Skip to main content