Highmaps heatmap

-1

Как мы можем создать тепловую карту с использованием высоких карт? - Все, что я могу сделать, это просто заговорить их на карте. (http://www.highcharts.com/maps/demo/mappoint-latlon).Highmaps heatmap

мне нужно Heatmap похожее на это (http://www.highcharts.com/maps/demo/color-axis), но данные, предоставленные мне в Шир/формат

, но я не вижу пример, связанный с ним.

Любые идеи? Спасибо

источник

2016-12-15 Raghu

Так что вы хотите Highcharts, чтобы определить, в каком состоянии ваша точка находится в на основе широты/долготы? – Learning2Code

Существует функция chart.fromLatLonToPoint, которая может быть полезной. http://api.highcharts.com/highmaps/Chart.fromLatLonToPoint –

Кажется, что в highcharts ожидается, что данные поступят с кодом состояния. Может ли эта функция помочь определить состояние? – Learning2Code

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

Так, например, вы используете штаты США карты, и у вас есть данные в формате следующим образом:

var realData = [{ 
    lat: 47.44439588071483, 
    lon: -100.71715548110211, 
    value: 117 
}, { 
    lat: 44.70260711020746, 
    lon: -100.27445285060993, 
    value: 350 
}, { 
    lat: 40.31102515359527, 
    lon: -82.72203429498387, 
    value: 840 
}, { 
    lat: 39.89016758310687, 
    lon: -74.53569085311527, 
    value: 14 
}];

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

var dummyData = [{ 
    code: 'NJ', 
    value: 1 
}, { 
    code: 'OH', 
    value: 1 
}, { 
    code: 'ND', 
    value: 1 
}, { 
    code: 'SD', 
    value: 1 
}];

Создать прямоугольник, который будет использоваться для списка пересечений.
```
var rect = this.renderer.rect(0, 0, 1, 1).attr({ 
     stroke: 'black', 
     'stroke-width': 1 
    }).add(); 
```
Петля через настоящие данные. Локальные значения каждой точки должны отображаться на значения x, y в соответствии с масштабами осей, а затем на пиксели.
```
realData.forEach(point => { 
     var pos = this.fromLatLonToPoint({ 
     lat: point.lat, 
     lon: point.lon 
     }); 

     point.x = this.xAxis[0].toPixels(pos.x); 
     point.y = this.yAxis[0].toPixels(pos.y) 
```

Переместите прямоугольник на расчетную позицию и получить список пересечения - мы хотим элемент пути из этого списка.

rect.attr({ 
     x: point.x, 
     y: point.y 
     }); 

     var list = Array.prototype.filter.call(
     this.renderer.box.getIntersectionList(rect.element.getBBox(), null), 
     element => element.tagName === 'path' 
    ); 

     point.path = list.length && list[0]; 
     paths.push(point.path); 
    });

шлейф через фиктивные серии и найти, если путь манекена Пункта будет соответствовать пути из списка пересечений. Если это так, состояние отображается на карте, и вы можете обновить его значение в соответствии с реальным значением данных.
```
var series = this.series[0], 
     data = series.data, 
     dataLen = data.length, 
     i = 0; 

     for (; i < dataLen; i++) { 
     var idx = paths.indexOf(data[i].graphic.element); 
     if (idx > -1) { 
      data[i].update({ 
      value: realData[idx].value 
      }); 
     } 
     } 
```