Question

我在使用Highmaps显示热图数据和地图上的点时遇到问题。这是一个例子：

这是美国钻取地图（http://www.highcharts.com/maps/demo/map-drilldown）的开箱即用示例，但我对其进行了修改，以便在深入伊利诺伊州时我试图添加单个点（在一系列内）到地图。

以下是我用来执行此操作的代码段：

chart.addSeries({
  id: 'points',
  type: 'mappoint',
  name: 'Store Data',
  color: Highcharts.getOptions().colors[8],
  data: [{
    name: 'Point 1',
    lat: 40.0633,
    lon: -88.2498
  }]
});

结果（如果您打开浏览器控制台）是一个错误说明：

Highcharts错误＃22：www.highcharts.com/errors/22

我尝试过转换坐标系，而不是绘制X＆amp; Y：

var pos = chart.fromLatLonToPoint({
   lat: json[i].latitude,
   lon: json[i].longitude
});

但是这不起作用，因为它无法转换点，为X返回0，为Y返回null。我也尝试更改地图类型，但这也不起作用。

我可以创建一个没有向下钻取的点的地图，但我似乎无法获得具有相同效果和点的钻取效果（颜色）的热图层。我没有看到他们身边任何地方列出关于点和向下钻取/着色段的限制。

以前有人能够让这个工作吗？我是否一直在考虑这些地图图层，这是不可行的？

Answer 1

要使用纬度和经度，您需要包含Proj4js。此外，您需要在坐标系之间进行手动转换，或者使用Highmaps map collection中的地图。例如：

<script src="http://.../proj4.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

在您的情况下，下钻示例将Highchart.maps包裹在Highcharts.geojson中以包含额外属性（drilldown和value），如下所示：

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);

$.each(data, function (i) {
    this.drilldown = this.properties['hc-key'];
    this.value = i; // Non-random bogus data
});

$('#container').highcharts('Map', {
    // ...
    series : [{
        data : data,
        name: 'USA'
    }]
});

这似乎导致Highmaps无法将地图识别为集合中的地图，因此您不允许使用此方法使用纬度和经度。

相反，您可以照原样使用Highcharts.maps，同时使用mapData和data joinBy同时附加额外数据，同时保持纬度/经度功能，像这样：

var myData = [{
    "hc-key": "us-ma",
    "value": 1
}];

$('#container').highcharts('Map', {
    // ...
    series : [{
        data : myData,
        mapData : Highcharts.maps['countries/us/us-all'],
        joinBy: 'hc-key',
        name: 'USA'
    }]
});

不幸的是，在两个级别（顶部和向下钻取）和你的附加点系列中使用这种技术我遇到了各种各样的问题。奇怪地在data和mapData中包含相同的信息似乎可以避免它们，所以我最终采用了这种方法：

var mapData = Highcharts.maps['countries/us/us-all'],
    myData = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);

$.each(myData, function (i) {
    this['hc-key'] = this.properties['hc-key'];
    this.drilldown = this.properties['hc-key'];
    this.value = i;
});

$('#container').highcharts('Map', {
    // ...
    series : [{
        data : myData,
        mapData : mapData,
        joinBy: 'hc-key',
        name: 'USA'
    }]
});

有关下钻，纬度/经度支持和点数系列的详细信息，请参阅this updated JSFiddle。

我还会包含this JSFiddle，它使用更标准的data方法（而不是克隆mapData），但是我遇到了各种各样的问题不太确定他们为什么会这样。

在Highmaps中显示点和向下钻取数据

1 个答案: