0

Нужно сделать карту стран мира без лишней детализации - отключить фон карты, подписи населенных пунктов, географические объекты и показать только границы стран нужного цвета.

На карте нужно обрабатывать клики по странам.

2 ответа 2

2

Сделать такую карту можно с помощью модуля Регионы API Яндекс.Карт. Он позволяет добавить на карту полигоны стран или регионов страны и работать с ними как с геообъектами.

Ниже показан пример создания карты мира без подложки, по клику на страну открывается балун с её названием.

ymaps.ready(init);

function init() {

  //Создаем карту
  map = new ymaps.Map('map', {
    center: [50, 30],
    zoom: 2,
    controls: [],
    type: null //отключает стандартную подложку карты
  }, {
    minZoom: 1, //ограничиваем зум карты
    maxZoom: 5,
    restrictMapArea: [
      [85, -169],
      [-70, 190]
    ] //ограничиваем область видимости карты
  });

  //Добавляем белый фон карты
  map.layers.add(new ymaps.Layer('https://sandbox.api.maps.yandex.net/examples/ru/2.1/azimuthal_map/images/tiles_arctic/3/tile-0-0.jpg'));


  //загружаем страны мира (код '001') на русском языке в стандартном качестве
  ymaps.regions.load('001', {
    lang: 'ru',
    quality: 1
  }).then(function(result) {
    var regions = result.geoObjects; // ссылка на коллекцию GeoObjectCollection

    //настраиваем дефолтный внешний вид полигонов
    regions.options.set({
      fillColor: '#8ca9cf99',
      strokeColor: '#FFF',
      pixelRendering: 'static',
      hasHint: false
    });

    //перекрашиваем нужные регионы
    regions.each(function(reg) {
      if (reg.properties.get('name') == "Россия" || reg.properties.get('name') == "Беларусь" || reg.properties.get('name') == "Украина") {
        //Меняем цвет 
        reg.options.set('fillColor', '#89e8e099')
      }
    });

    //обрабатываем клики по странам
    result.geoObjects.events.add('click', function(e) {
      //определяем полигон, в который кликнули, и координаты клика
      var regClicked = e.get('target'),
        coords = e.get('coords');
      //открываем балун с названием страны в точке клика
      regClicked.properties.set('balloonContent', regClicked.properties.get('name'));
      regClicked.balloon.open(coords);
    });
    //добавляем регионы на карту 
    map.geoObjects.add(regions);
  }, function() {
    //фоллбек на случай незагрузки регионов
    alert('No response');
  });


}
html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
<div id="map"></div>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

Пример работы модуля Регионы в песочнице Яндекса.

1

Вот тут есть прекрсное видео для построения таких карт https://www.youtube.com/watch?v=AkyJvFA_2dQ

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.