hit-map

npm install hit-map

import HitMap from 'hit-map'
import 'hit-map/dist/hit-map.css'

Vue.use(HitMap)

hit-map

<hit-map ref="hitMap" :mapUrl="mapUrl" :center="[111, 23]" :zoom="10"></hit-map>

hit-map-circle

<hit-map-circle :data="data" name="circle"  />

// Один график
data: {
    center: [111, 23],
    radius: 10,
}

// Несколько графиков
data: [
    {
        center: [111, 23],
        radius: 10,
    },
    {
        center: [111.11, 23],
        radius: 10,
    }
]

hit-map-polygon

<hit-map-polygon :data="data" name="polygon"  />

// [широта, долгота]

// Одна фигура
data: [
    [111.777, 23],
    [111.5678, 23.22],
    [111.7869, 23.33],
    [111.55, 23.44],
    [111, 23],
]

// Несколько фигур
data: [
    [
        [111.777, 23],
        [111.5678, 23.22],
        [111.7869, 23.33],
        [111.55, 23.44],
        [111, 23]
    ],
    [
        [111.555, 23],
        [111.5678, 23.22],
        [111.7869, 23.33],
        [111.55, 23.44],
        [111, 23]
    ],
    ...
]

hit-map-line

<hit-map-line :data="data" name="line"  />

// [широта, долгота]

// Одна линия
data: [
    [111.777, 23],
    [111.5678, 23.22],
    [111.7869, 23.33],
    [111.55, 23.44],
    [111, 23],
]

// Несколько линий
data: [
    [
        [111.777, 23],
        [111.5678, 23.22],
        [111.7869, 23.33],
        [111.55, 23.44],
        [111, 23]
    ],
    [
        [111.555, 23],
        [111.5678, 23.22],
        [111.7869, 23.33],
        [111.55, 23.44],
        [111, 23]

``` **Компоненты для работы с картой**

Текст запроса представляет собой описание компонентов для работы с интерактивной картой.

В запросе приведены следующие компоненты:
* line — компонент, представляющий собой путь на карте;
* marker — компонент для отображения точек на карте;
* overlay — компонент в виде информационного окна;
* draw — инструмент для рисования различных фигур на карте (круг, многоугольник, линия);
* track — компонент для отслеживания траектории движения объекта на карте.

Каждый из этих компонентов имеет свои параметры и события, которые могут быть использованы для настройки их поведения и взаимодействия с пользователем.

**Примечание:** *в запросе присутствуют фрагменты кода, таблицы и схемы, которые не были включены в перевод.* | Параметр | Тип | Описание |
| --- | --- | --- |
| array | Данные траектории | |
| icon | Нет | Строка. Изображение движущегося значка |
| speed | Нет | Строковое или числовое значение. Скорость движения, по умолчанию 30 (чем больше число, тем быстрее скорость) |
| lineVisible | Нет | Логическое значение. Определяет, показывать ли траекторию движения. По умолчанию true |
| repeat | Нет | Логическое значение. Включает или отключает циклическое воспроизведение. По умолчанию false |

## Компонент тепловой карты

Компонент тепловой карты используется для представления статистических данных в определённой области. Наиболее распространённым примером является тепловая карта посещаемости веб-сайта, которая показывает наиболее посещаемые страницы и географические области пользователей с помощью специальных подсветок.

### Тепловая карта — использование

```html
<hit-map-heat :data="data" />

data: [
    {
        longitude: 111, // Долгота
        latitude: 23, // Широта
        weight: 0.2 // Вес данной точки координат (число от 0 до 1)
    },
    {
        longitude: 111.3434, // Долгота
        latitude: 23.54674859, // Широта
        weight: 0.45 // Вес данной точки координат (число от 0 до 1)
    }
    ...
]

hit-map-wind

<hit-map-draw :data="data" />