Центральная видимая область HighMaps

Я показываю штаты США и использую полную карту США из коллекции highmaps. Если я скрываю или показываю только 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']
            }]
        });
    });
});
//--><!]]>

javascript geo highmaps
person tenken    schedule 06.06.2016    source источник
comment
Это то, что можно сделать, но вам нужно поделиться более подробной информацией. Как скрыть эти состояния? Можете ли вы поделиться работающим JSFiddle?   -  person Roco CTZ    schedule 07.06.2016
comment
Извините, сейчас полный код выше. Если состояние не в series.data, оно не отображается, но ясно, что это не то же самое, что удаление данных из данных геофайла карты... потому что вся область состояний по-прежнему учитывается в окончательном выводе на экран. Какие есть методы для этого, потому что я в настоящее время не знаю ни одного...   -  person tenken    schedule 07.06.2016
comment
возможно, вы хотите увидеть мой ответ на этот вопрос: «как увеличить масштаб до определенной точки в highmaps»> stackoverflow.com/questions/28933713/   -  person Roco CTZ    schedule 08.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вот пример скрипта 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
    }]
person Geo George    schedule 19.03.2018