Geo Map Charts

Apeekflow предлагает инновационный подход к интеграции геокарт Google с усовершенствованным оверлеем eckhart на основе геоданных, обеспечивая динамичное и интерактивное картографическое решение. Эта интеграция особенно эффективна для приложений, требующих визуализации данных на географических картах в режиме реального времени.

Основной особенностью этой интеграции является плавное сочетание «Google Геокарты» с наложением графиков. «Google Геокарты» предоставляет надежный и привычный картографический интерфейс, известный своими подробными и точными географическими данными. Благодаря наложению диаграмм, функция Apeekflow позволяет добавлять насыщенные интерактивные визуализации данных непосредственно на эти карты. Эта возможность наложения касается не только статического представления данных; он поддерживает динамическое обновление данных в режиме реального времени, что делает его идеальным для приложений, которым требуется актуальная информация, например, для мониторинга дорожного движения, обновления погоды или отслеживания перемещений в логистике.

Apeekflow гарантирует, что данные, отображаемые в графиках, не только актуальны, но и могут обновляться в режиме реального времени с помощью потокового запроса. Это важно для сценариев, в которых своевременные данные необходимы для принятия решений. Пользователи могут видеть изменения по мере их появления, что обеспечивает интерактивный и привлекательный интерфейс.

Наложение электронных диаграмм на «Google Геокарты» в Apeekflow также обеспечивает высокую степень настройки и интерактивности. Пользователи могут увеличивать и уменьшать масштаб, просматривать различные регионы и взаимодействовать с точками данных на карте. Эта интерактивность усиливается благодаря всплывающим подсказкам, интерактивным элементам и различным типам диаграмм, таким как тепловые карты, точечные диаграммы или линейные графики, которые имеют географическую привязку и располагаются слоями на карте.

Использование геокарты в Apeekflow

В качестве первого шага разместите новую диаграмму на правой панели компонентов на холсте.

Теперь вы можете выбрать в свойствах компонента тип "Карта".

Вы можете использовать свойства "Масштабирование, долгота и широта", чтобы определить первое впечатление от геокарты при отображении приложения.

Для получения более подробной информации ознакомьтесь с документацией eCharts.https://echarts.apache.org/en/api.html#echartsInstance.setOption

Поскольку eCharts уже интегрирован в Apeekflow, вам нужно только подготовить и настроить параметры-данные в формате JSON. Конфигурация соответствует стандартной нотации eCharts.

В разделе "Данные" у вас, тем не менее, есть возможность задать не только данные диаграммы, но и географическую точку (широта, долгота), в которой должны отображаться данные диаграммы. Каждый объект в массиве данных будет представлять собой один элемент диаграммы на карте.

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

{
  "tooltip": {
    "trigger": "item"
  },
  "animation": true,
  "series": [
    {
      "name": "Population",
      "type": "scatter",
      "coordinateSystem": "gmap",
      "itemStyle": {
        "color": "#00c1de"
      },
      "data": [
        {
          "name": "Azerbaijan",
          "value": [
            47.395,
            40.43,
            8352021
          ]
        },
        {
          "name": "Albania",
          "value": [
            20.068,
            41.143,
            3153731
          ]
        }, <...>
      ],
      "encode": {
        "value": 2,
        "lng": 0,
        "lat": 1
      }
    }
  ]
}

Динамическая привязка данных и функций

Как и в других компонентах Apeekflow, вы можете динамически привязывать данные и функции к карте.

{
  "tooltip": {
    "trigger": "item"
  },
  "animation": true,
  "series": [
    {
      "name": "Company Size",
      "type": "scatter",
      "coordinateSystem": "gmap",
      "itemStyle": {
        "color": "#9d4edd"
      },
      "data": {{mapData.value}},
      "symbolSize" : {{function (val) {return window.mapValueToSize(val[2])}}},
      "encode": {
        "value": 2,
        "lng": 0,
        "lat": 1
      }
    }
  ]
}

В этом случае глобальная функция приложения "mapValueToSize" привязана к настройкам карты, поэтому размер точек точечной диаграммы можно динамически регулировать в зависимости от "значения" отображаемых данных.

Настройка геомаркеров и доступа к JavaScript

В версии 2.1.x появилась возможность размещать геомаркеры на карте с помощью Javascript, обращаясь к объекту maps.

Здесь вы можете увидеть возможность доступа к объекту "gmap" с помощью новой функции компонента eckhart "getMapInstance()". Объект map - это хорошо известный Javascript-объект Google Maps, с которым вы можете выполнять все типичные операции.

const renderMarker = async function () {
  const gmap = await chart1.getMapInstance ();
  var london = {lat: 51.5074, lng: -0.1278};
  var marker = new google.maps.Marker({
      position: london,
      map: gmap,
      title: 'Welcome to London!'
  });
}
renderMarker ();

Ключ API Google Maps

Когда вы публикуете свое приложение, для соответствующего отображения приложения должен быть введен ключ API Google Maps. Воспользуйтесь https://console.cloud.google.com/apis/dashboard, чтобы создать свой API-ключ.

Чтобы отображать только карту и использовать JavaScript API, необходимо активировать "Map Embed API" и "Maps JavaScript API".

Теперь вы можете создать и просмотреть свой ключ API Google Maps. Рекомендуется ограничить трафик доменом или диапазоном IP-адресов.