中心可见HighMaps区

Question

我正在显示美国州和使用完整的美国地图从高地图集合。如果我隐藏或只显示N个状态，是否有一种方法可以调整呈现的地图区域的大小，以缩放或只显示可见区域。

一个例子就是只向东海岸的所有州展示。现在，完整的美国地图“区域”显示，但它是空白的。

可以将可见区域限制在比全地图面积小的范围内吗？例如“中心在可见区域？”

或者是预先设置的显示美国部分的方法，以提供自定义地图数据，该数据只呈现要在地图上显示的美国部分。

示例地图：

​

​

示例JS：

<!--//--><![CDATA[//><!--
jQuery(document).ready(function () {
    var rep_color = 'orange';
    var dem_color = '#244999';
    jQuery.getJSON("http://maps.example/sites/default/files/geojson-maps/current-usa.geojson", function(geojson_result) {
        jQuery(".prez-map.map-1278").slideDown().highcharts('Map', {
        chart : {
            borderWidth : 1,
            borderColor: 'silver',
            borderRadius: 3,
            shadow: true
        },
        credits: {
          enabled: false
        },
        title : {
            text : ""
        },
        subtitle : {
            text : ''
        },

        legend: {
            enabled: false
        },
            series: [{
                // This is the result of the .getJSON call value which passes it's result to the anonymous function. We will load this Nodes file value URL to get this data.
                mapData: geojson_result,
                borderColor: 'white',
                nullColor: 'white',
                allAreas: true,
                dataLabels: {
                    enabled: false,
                    color: '#FFFFFF',
                    format: '{point.code}'
                },
                data: [{"code":"ME","color":"#CC6600"},{"code":"NH","color":"#CC6600"},{"code":"MA","color":"#CC6600"},{"code":"CT","color":"#CC6600"},{"code":"NJ","color":"#CC6600"},{"code":"PA","color":"#CC6600"},{"code":"DE","color":"#CC6600"},{"code":"MD","color":"#CC6600"},{"code":"VA","color":"#CC6600"},{"code":"PA","color":"#CC6600"},{"code":"KY","color":"#CC6600"},{"code":"SC","color":"#CC6600"},{"code":"GA","color":"#CC6600"}],
                // Take a key in data and map it to a key in mapData.
                joinBy: ['postal-code', 'code']
            }]
        });
    });
});
//--><!]]>

Answer 1

下面是一个js小提琴示例：https://jsfiddle.net/geogeorge/0aaca5xx/14/

将以下脚本添加到页面标题中：

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

然后，在地图系列部分中包括下面的代码：

   series: [{
    data: data,
    color:"blue",
    joinBy: ['postal-code', 'code'],
    dataLabels: {
        enabled: true,
        format: '{point.name}'
    }
}, {
        name: 'Separators',
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
        color: 'silver',
        showInLegend: false,
        enableMouseTracking: false
    }]