Highmap Bubble排除不在地图上的点

问题描述 投票:0回答:1

具有包含经纬度信息的全局数据的数据集,并可以显示类型为'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>

highcharts
1个回答
1
投票

您可以设置轴的minmax属性:

xAxis: {
  min: -999,
  max: 9851
},

yAxis: {
  min: -9851,
  max: -927
}

实时演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4876/

API参考:

https://api.highcharts.com/highmaps/xAxis.min

https://api.highcharts.com/highmaps/yAxis.max

© www.soinside.com 2019 - 2024. All rights reserved.