Question

我正在显示美国各州并使用来自highmaps集合的完整美国地图。如果我隐藏或仅显示N个状态，则有一种方法可以调整渲染的地图区域以缩放或仅显示可见区域。

一个例子是仅显示东海岸的所有州。现在是完整的美国地图＆＃34;区域＆＃34;显示但是它是空白的。

highmaps可以将可见区域限制为小于全地图区域吗？例如＆＃34;居中于可见区域？

或者是显示美国各部分提供自定义地图数据的优先方式，该地图数据仅呈现您要在地图上显示的美国部分。

示例地图：

示例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

这是一个小小的例子：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
    }]

中心可见HighMaps区域

1 个答案: