如何缩放到 Highmaps 中的特定点
How to zoom to specific point in Highmaps
Highmaps / highcharts 是一个 javascript/jquery 适配器,可在浏览器等中呈现地图。
我有一张地图,其中突出显示了一个国家/地区,但是,(世界)地图的比例如此之大,以至于我想在地图加载到相关国家/地区后放大。
看着 API 我觉得这是可能的。
有一个事件侦听器,这样我就可以在加载时执行自定义函数。如本例所示,加载时添加了一个系列 (Js fiddle)
此外,还有一种方法 mapZoom
允许您使用以下参数指定要缩放到的点:
mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])
但是当我尝试调用此方法 onload(我的代码尝试在下面,JS fiddle here)时,没有任何反应。
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Assign id's
$.each(data, function () {
this.id = this.code;
});
// Initiate the chart
$('#container').highcharts('Map', {
chart: {
events: {
load: function () {
mapZoom(0.5, 100, 100);
}
}
},
title: {
text: 'Zoom on load attempt'
},
legend: {
title: {
text: 'Population density per km²'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world-highres'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
pointFormat: '{point.id} {point.name}',
valueSuffix: '/km²'
}
}]
});
});
});
mapZoom
是属于 chart
对象的方法,因此,为了将其作为事件 (load
) 调用,您必须使用 this
关键字。
您可以像这样编辑您的代码 (JSFiddle):
...
events: {
load: function () {
this.mapZoom(0.5, 100, 100);
}
}
}
...
或者,您可以随时使用 jQuery 引用 (JSFiddle) 调用它:
$('#container').highcharts().mapZoom(0.5, 100, 100);
在地图上缩放到特定国家很容易
series : [{
...
data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
...
}
...然后...
var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well
如果你想缩放多个国家,你可以试试这个
events: {
load: function () {
var mapChart = this;
['DE', 'HU', 'RO'].map(function(code){
return mapChart.get(code);
}).reduce(function(acc, current){
// Set map bounds
acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
return acc;
}).zoomTo();
}}
Highmaps / highcharts 是一个 javascript/jquery 适配器,可在浏览器等中呈现地图。
我有一张地图,其中突出显示了一个国家/地区,但是,(世界)地图的比例如此之大,以至于我想在地图加载到相关国家/地区后放大。
看着 API 我觉得这是可能的。
有一个事件侦听器,这样我就可以在加载时执行自定义函数。如本例所示,加载时添加了一个系列 (Js fiddle)
此外,还有一种方法 mapZoom
允许您使用以下参数指定要缩放到的点:
mapZoom (Number howMuch, [Number centerX], [Number centerY], [Number mouseX], [Number mouseY])
但是当我尝试调用此方法 onload(我的代码尝试在下面,JS fiddle here)时,没有任何反应。
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Assign id's
$.each(data, function () {
this.id = this.code;
});
// Initiate the chart
$('#container').highcharts('Map', {
chart: {
events: {
load: function () {
mapZoom(0.5, 100, 100);
}
}
},
title: {
text: 'Zoom on load attempt'
},
legend: {
title: {
text: 'Population density per km²'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world-highres'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
allowPointSelect: true,
cursor: 'pointer',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
pointFormat: '{point.id} {point.name}',
valueSuffix: '/km²'
}
}]
});
});
});
mapZoom
是属于 chart
对象的方法,因此,为了将其作为事件 (load
) 调用,您必须使用 this
关键字。
您可以像这样编辑您的代码 (JSFiddle):
...
events: {
load: function () {
this.mapZoom(0.5, 100, 100);
}
}
}
...
或者,您可以随时使用 jQuery 引用 (JSFiddle) 调用它:
$('#container').highcharts().mapZoom(0.5, 100, 100);
在地图上缩放到特定国家很容易
series : [{
...
data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
...
}
...然后...
var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well
如果你想缩放多个国家,你可以试试这个
events: {
load: function () {
var mapChart = this;
['DE', 'HU', 'RO'].map(function(code){
return mapChart.get(code);
}).reduce(function(acc, current){
// Set map bounds
acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
return acc;
}).zoomTo();
}}