Карта AMChart SVG - Масштабируйте, чтобы соответствовать всем странам

Я пытаюсь автоматически увеличить все страны, которые есть на моей карте. Это работает, если я группирую страны с опцией «groupId», но тогда у меня также есть нежелательное групповое наведение. Мне нужно одно наведение/выбор, но я хотел бы увеличить масштаб до стран, которые они соответствуют границам.

Вот пример: http://jsfiddle.net/wiesson/efbnsmpd/

Пример данных карты:

dataProvider: {
    map: "worldHigh",
    areas: [{
        "id": "AT",
        "customData": "Austria",
        "link": "austria",
    }, {
        "id": "HR",
        "customData": "Croatia",
        "link": "croatia",
    }, {
        "id": "FR",
        "customData": "France",
        "link": "france",
    }, {
        "id": "DE",
        "customData": "Germany",
        "link": "germany",
    }, {
        "id": "GR",
        "customData": "Greece",
        "link": "greece",
    }, {
        "id": "IT",
        "customData": "Italy",
        "link": "italy",
    }, {
        "id": "MA",
        "customData": "Malta",
        "link": "malta",
    }, {
        "id": "PT",
        "customData": "Portugal",
        "link": "portugal",
    }, {
        "id": "ES",
        "customData": "Spain",
        "link": "spain",
    }, {
        "id": "CH",
        "customData": "Switzerland",
        "link": "switzerland",
    }, {
        "id": "TR",
        "customData": "Turkey",
        "link": "turkey",
    }, {
        "id": "GB",
        "customData": "United Kingdom",
        "link": "united-kingdom"
    }]
}

Нужно ли мне вычислять широту/долготу (каким-то образом) на основе моих стран, а затем масштабировать? (например, http://docs.amcharts.com/3/javascriptmaps/AmMap#zoomTo(zoomLevel, zoomX, zoomY, мгновенно))


javascript svg amcharts ammap
person wiesson    schedule 15.07.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Наверное, есть лучший способ. Функция zoomToGroup может принимать массив площадных объектов (не идентификаторов, а реальных объектов). ). Таким образом, вы можете сделать это следующим образом:

map.addListener("init", function (event) {
    var zoomToAreasIds = ['AT', 'HR', 'FR', 'DE', 'GR', 'ID', 'MA', 'PT', 'ES', 'CH', 'TR', 'GB'];
    var zoomToAreas = [];
    var area;
    for(var i = 0; i < zoomToAreasIds.length; i++) {
        if (area = map.getObjectById(zoomToAreasIds[i]))
            zoomToAreas.push(area);
    }
    map.zoomToGroup(zoomToAreas);
});

Вот ваша обновленная скрипка:

http://jsfiddle.net/amcharts/efbnsmpd/6/

person martynasma    schedule 16.07.2015
comment
Спасибо! Я не видел последнюю часть описания. - person wiesson; 16.07.2015
comment
@martynasma Не могли бы вы помочь мне воссоздать этот ответ, используя amchart4 - person Vimal; 03.01.2020

arrow_upward
0
arrow_downward

Я сам придумал рабочее решение, как описано здесь: http://jsfiddle.net/f1Ljtawm/embedded/result,js,html,css/

map.addListener('init', function () {
    map.zoomToGroup("zoomed-group");

    function toggleMapObjectAlpha(e) {
        var alpha = e.type == "rollOverMapObject" ? .3 : .8;
        e.event.target.setAttribute("fill-opacity", alpha);
    }

    map.addListener('rollOverMapObject', toggleMapObjectAlpha);
    map.addListener('rollOutMapObject', toggleMapObjectAlpha);
 });
person wiesson    schedule 16.07.2015