Как сделать тепловую карту кликабельной? - PullRequest
Новая
       7

Как сделать тепловую карту кликабельной?

0 голосов
/ 21 февраля 2019

Я приложил свой код, который я использовал ниже, чтобы попытаться создать интерактивную карту.Фактическая тепловая карта генерируется, но я не могу создать событие щелчка.

Вот мой код: 

const centerLocation = new google.maps.LatLng(
  Number(28.555040),
  Number(77.241920)
);
const mapProp = {
  center: centerLocation,
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  clickableIcons: true
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
const location = new google.maps.LatLng(
  Number(28.555040),
  Number(77.241920)
);

for (let i = 0; i < userData.length; i++) {
  this.marker = new google.maps.Marker({
    position: new google.maps.LatLng(+userData[i][1], +userData[i][2]),
    map: this.map,
    icon: this.userimage,
    title: userData[i][0]
  });
  // tslint:disable-next-line:no-shadowed-variable
  google.maps.event.addListener(this.marker, 'click', (function (marker, i) {
    return function () {
      infowindow.setContent('<a href="#">' + userData[i][0] + '</a>');
      infowindow.open(this.map, this);
    };
  })(this.marker, i));

}
const infowindow = new google.maps.InfoWindow();
for (let i = 0; i < eventData.length; i++) {
  this.marker = new google.maps.Marker({
    position: new google.maps.LatLng(+eventData[i][1], +eventData[i][2]),
    map: this.map,
    icon: this.image,
    title: eventData[i][0]
  });


  // tslint:disable-next-line:no-shadowed-variable
  google.maps.event.addListener(this.marker, 'click', (function (marker, i) {
    return function () {
      infowindow.setContent('<a href="#">' + eventData[i][0] + '</a>');
      infowindow.open(this.map, this);
    };
  })(this.marker, i));
}

// console.warn(location);

this.marker.setPosition(location);
this.heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData,
  dissipating: true,
  radius: 50
});

this.heatmap.setMap(this.map);

// For heatmap color
const gradient = [
  'rgba(0, 255, 255, 0)',
  'rgba(0, 255, 255, 1)',
  'rgba(0, 191, 255, 1)',
  'rgba(0, 127, 255, 1)',
  'rgba(0, 63, 255, 1)',
  'rgba(0, 0, 255, 1)',
  'rgba(0, 0, 223, 1)',
  'rgba(0, 0, 191, 1)',
  'rgba(0, 0, 159, 1)',
  'rgba(0, 0, 127, 1)',
  'rgba(63, 0, 91, 1)',
  'rgba(127, 0, 63, 1)',
  'rgba(191, 0, 31, 1)',
  'rgba(255, 0, 0, 1)'
];
this.heatmap.set('gradient', gradient);
// For heatmap color

this.heatmap.set('opacity', 0.6);

1 Ответ

0 голосов
/ 23 апреля 2019

Если под «кликабельным» вы подразумеваете интерактивный, вы можете посмотреть complexheatmaps , которые предлагают эту конкретную утилиту.Сопроводительная документация может быть найдена здесь .Пример того, какой уровень интерактивности возможен, можно найти на этой странице .

. Для загрузки пакета воспользуйтесь одним из следующих ...

Most Recent (youнеобходимо использовать force = TRUE): 

library(devtools)
install_github("jokergoo/ComplexHeatmap", force = TRUE)
library(ComplexHeatmap)

Стабильный: 

if (!requireNamespace("BiocManager", quietly = TRUE))
    install.packages("BiocManager")
BiocManager::install("ComplexHeatmap", version = "3.8")

В качестве альтернативы, вы можете посмотреть на использование iheatmapr , хотя я очень мало знаю оЭто.Так как он разработан с интерактивностью, он может быть вам полезен.Вот как это было описано в Журнале программного обеспечения с открытым исходным кодом.

В R есть отличные инструменты для создания простых интерактивных тепловых карт (Galili 2016, Cheng и Galili (2016)) или для создания статических сложных тепловых карт(Gu, Eils, and Schlesner 2016).Однако нет инструментов, облегчающих создание сложных интерактивных тепловых карт.Пакет Theiheatmapr заполняет этот пробел, позволяя создавать настраиваемые, интерактивные, сложные тепловые карты с использованием библиотеки графиков (Sievert et al. 2016).Получающиеся интерактивные визуализации могут быть легко включены в воспроизводимые отчеты R Markdown для совместного использования с соавторами

...