jvectormap объединить две карты

Я пытаюсь объединить два jvectormaps: italy-regions и italy-provinces, я хотел бы добиться чего-то похожего на пример детализации или даже просто разбить карту на регионы и провинции.
Думаю, я не могу использовать multimap как в демо, потому что italy-provinces карта — это всего лишь один скрипт со всеми провинциями внутри, поэтому основная функция для получения карты каждого региона бесполезна:

mapUrlByCode: function(code, multiMap){
  return '/js/us-counties/jquery-jvectormap-data-'+
         code.toLowerCase()+'-'+
         multiMap.defaultProjection+'-en.js';
}

В этом ручке я воспроизвел что-то похожее на то, чего я пытаюсь достичь.
Очевидно, что это решение очень плохое, потому что я использую две карты, и как только я нажму на случайную область первой карты, вторая карта не будет масштабироваться, поэтому две карты выглядят не синхронизированными. Кто-то знает или может предложить способ добиться того, что мне нужно?


javascript jquery jvectormap
person Nico    schedule 01.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

К счастью, замечательный jVectorMap также поддерживает фокусировку на нескольких регионах, поэтому вам нужно просто создать связь между регионами и провинциями и дважды вызвать эту функцию.

Я немного переработал ваш код, чтобы он был более "явным" в отношении Провинций и Регионов:

HTML:

<div id="map-provinces"></div> 
<div id="map-regions"></div>

CSS:

#map-provinces{
  height:500px;
  width: 500px;
  left:-500px;
  opacity:0.5;
}
#map-regions{
  top: 8px; /* Body margin wasn't set correctly in the CodePen */ 
  position : absolute;
  height:500px;
  width: 500px;
  opacity:0.5;
}

Вот как я это делаю с регионом Сицилия. Вы можете дополнить этот пример полным списком кодов провинций:

var provinces ={"IT-82": ["TP","PA","AG","CL","EN","ME","CT","RG","SR"]};

$('#map-provinces').vectorMap({
   map: 'it_mill'
});
$('#map-regions').vectorMap({
  map: 'it_regions_mill',
  backgroundColor : 'white',
  zoomOnScroll : false,
  zoomMin : 0,
  zoomMax :220,
  regionStyle :{
    initial: {
        fill: 'blue',
        "fill-opacity": 1,
        stroke: 'none',
        "stroke-width": 0,
        "stroke-opacity": 1
    },
    hover: {
      "fill-opacity": 1,
      cursor: 'pointer'
    },
    selected: {
      fill: 'blue',
      "fill-opacity": 1,
    },
    selectedHover: {
      "fill-opacity": 1,
      cursor: 'pointer'
    }
  },
  onRegionClick: function(e,  code,  isSelected,  selectedRegions){
    var codes = [];
    provinces[code].forEach(function(province) {
      codes.push("IT-"+province);
    });
    $('#map-regions').vectorMap('get','mapObject').setFocus({region: code});
    $('#map-provinces').vectorMap('get', 'mapObject').setFocus({regions: codes});
  }
});

Имея это в виду, вы можете легко реализовать пример детализации, представленный на веб-сайте jVectorMap, и правильно выровнять обе карты после масштабирования по клику по региону, как на этом рисунке ниже, где отображаются обе перекрывающиеся карты, как вы это сделали. в вашем CodePen:

Провинции Сицилии

person deblocker    schedule 02.03.2017
comment
вау, спасибо, чувак, это выглядит великолепно, только еще один вопрос, если я уменьшу масштаб первой карты, вторая карта (провинции) не уменьшится. Итак, есть ли способ привязать кнопки масштабирования на обеих картах? - person Nico; 03.03.2017
comment
да, конечно, но это был бы другой вопрос, как синхронизировать viewport двух перекрывающихся карт... Более того, после того, как вы сфокусировали регион, вам нужно было бы поменять карты местами, чтобы провинции были текущей картой переднего плана, а вы можете нажать на нее. Вы согласны? - person deblocker; 03.03.2017
comment
Да, это была бы хорошая функция, я пытаюсь сделать несколько попыток, возможно, я могу опубликовать здесь ссылку на другой вопрос? - person Nico; 03.03.2017
comment
даже если ваш ответ правильный, я нашел лучший способ сделать это, не указывая провинции, а только синхронизируя две карты. - person Nico; 03.03.2017