具有包含经纬度信息的全局数据的数据集,并可以显示类型为'mapbubble'的地图。
但是,我只想显示一个国家。目前,如果我使用此数据集并显示“加拿大”或“中国”,则该国家的图像会缩小,以便显示来自世界各地的所有点。
是否有办法告诉Highmap不显示不在当前地图范围内的数据?
谢谢!
更新:添加示例代码。请注意,第四个点是北极,而不是中国的一部分,但仍会显示(奇怪的是,最左边是气泡,右边的气泡不是AFAIK)。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js">
</script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js">
</script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js">
</script>
<script src="https://code.highcharts.com/mapdata/countries/cn/cn-all.js">
</script>
<style>
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}</style>
<div id="container"></div>
</head>
<body>
<script>
var H = Highcharts,
map = H.maps['countries/cn/cn-all'],
chart;
var data = [
{
lat:39,
lon:80,
z:500
},
[{
lat:31,
lon:117,
z:500
}],
{
lat:39,
lon:82,
z:600
},
{
lat:0,
lon:0,
z:500
}
];
chart = Highcharts.mapChart('container', {
title: {
text: 'Highmaps lat/lon demo'
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
},
{
name: "test",
type:"mapbubble",
minSize: 20,
maxSize: '30%',
data: data,
color: 'rgba(200,0,0,0.5)'
}]
});
console.log(chart);
</script>
您可以设置轴的min
和max
属性:
xAxis: {
min: -999,
max: 9851
},
yAxis: {
min: -9851,
max: -927
}
实时演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4876/
API参考: