时间戳

首页 > 解决方案 > 如何在地图中移动岛屿

highcharts - 如何在地图中移动岛屿

问题描述

我从西班牙得到了一张地图，其中包括加那利岛，但是这些岛屿太远而且地图看起来很小，有什么办法可以将这些岛屿移近西班牙吗？

标签： highchartsgeojson

解决方案

Highcharts提供了如何移动某些国家的演示。您可以使用该类提供的附加功能Point将您的区域移动到位。我们将使用以下（稍作修改）代码：

// Offset an SVG path by x and y
Highcharts.Point.prototype.offsetPath = function (x, y, redraw, animate) {
    var path = this.path || [],
        isX = true,
        i = 0;
    for (; i < path.length; ++i) {
        if (Highcharts.isNumber(path[i])) {
            path[i] += isX ? x : y;
            isX = !isX;
        }
    }
    this.update({
        dataLabels: {
            x: this.series.xAxis.toPixels(x) - this.series.xAxis.toPixels(0),
            y: this.series.yAxis.toPixels(y) - this.series.yAxis.toPixels(0)
        },
        path: path
    }, redraw, animate);
};

移动点。然后，在加载您的西班牙地图后，您可以进行后处理以将这些区域移动到所需位置。我在这里做了一个例子（JSFiddle demo）：

Highcharts.mapChart('container', {
    // ...
}, function(chart) {
    for(let i = 0; i < this.series[0].points.length; i++) {
        if(this.series[0].points[i]['hc-key'] == 'es-me') { // Melilla
            this.series[0].points[i].offsetPath(0, -900, true, false);
        } else if(this.series[0].points[i]['hc-key'] == 'es-gc') { // Las Palmas
            this.series[0].points[i].offsetPath(-1200, 0, true, false);
        } else if(this.series[0].points[i]['hc-key'] == 'es-tf') { // Tenerife
            this.series[0].points[i].offsetPath(-1200, 0, true, false);
        } else if(this.series[0].points[i]['hc-key'] == 'es-pm') { // Baleares
            this.series[0].points[i].offsetPath(-800, 0, true, false);
        }
    }
});

这会使 Melilla、Las Palmas、Tenerife 和 Baleares 靠近示例中提供的 X 和 Y 值（第 1 和第 2 参数），以及重绘（第 3 参数），但不设置动画（第 4 参数）。

西班牙的法线贴图看起来像Highcharts 提供的这个 JSFiddle 演示。

推荐阅读