2

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

http://jsfiddle.net/3se9q3uq/

这是美国向下钻取地图 ( 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 和 Y：

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

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

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

有没有人能够让这个工作？我是不是在考虑这些地图图层，而这是不可行的？

4

1 回答 1

8

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

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

在您的情况下，向下钻取示例包含额外的属性（Highchart.maps和），如下所示：Highcharts.geojsondrilldownvalue

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和datawithjoinBy以这种方式附加额外数据，同时保持纬度/经度功能，如下所示：

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'
    }]
});

请参阅此更新的 JSFiddle，了解它当前的外观，包括向下钻取、纬度/经度支持和点系列。

我还将包括这个 JSFiddle，它使用更标准的data方法（而不是克隆mapData），但有各种各样的问题，我不太确定它们为什么会发生。

于 2015-03-15T11:39:56.387 回答