居中可见的 HighMaps 区域答案

【问题标题】：Center visible HighMaps area居中可见的 HighMaps 区域
【发布时间】：2016-10-06 16:17:12
【问题描述】：

我正在显示美国各州并使用 highmaps 集合中的完整美国地图。如果我隐藏或仅显示 N 个状态，是否可以调整渲染地图区域的大小以缩放或仅显示可见区域。

例如，仅显示东海岸的所有州。现在显示了完整的美国地图“区域”，但它是空白的。

highmaps 能否将可见区域限制为小于 full-map-area？比如“以可见区域为中心？

或者是显示美国部分地区的首选方式，以提供自定义地图数据，仅呈现您希望在地图上显示的美国部分地区。

示例地图：

示例 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']
            }]
        });
    });
});
//--><!]]>

【问题讨论】：

这是可以做到的，但需要分享更多细节。你如何“隐藏”这些状态？你能分享一个有效的 JSFiddle 吗？
对不起，上面是完整的代码。如果状态不在series.data 中，则不会“显示”，但显然这与从地图地理文件数据中删除数据不同......因为在屏幕的最终输出中仍会考虑所有状态区域.有什么技术可以做到这一点，因为我目前不知道有任何...
也许你想从这个问题中看到我的答案：stackoverflow.com/questions/28933713/…

标签： javascript geo highmaps

【解决方案1】：

这是一个 js fiddle 示例：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
    }]

【讨论】：