Особенности загрузки объектов из карты формата KML на карту Яндекса

В API Яндекс.Карт есть средства для загрузки географических данных в формате XML. API поддерживает карты в двух форматах: YMapsML и KML. В документации по технологиям Яндекса есть пример, илюстрирующий работу с этим форматами.

Глядя на этот пример, можно предположить, что с точки зрения API оба формата эквивалентны, и работа с ними ничем не отличается. Тем более Яндекс предоставляет конструктор карт, в котором каждой карте автоматически назначаются ссылки на оба формата. Эти ссылки отличаются только суффиксом. Карта в формате YMapsML оканчивается на символ /, а адрес той же карты в формате KML на конце содержит символы ".kml".

Независимо от формата XML загрузка геообъектов будет выглядеть так:

var map = new ymaps.Map("map", {
    center: [-25.89, 135.32],
    zoom: 4,
    controls: ["zoomControl"]
});

var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/";

ymaps.geoXml.load(url).then(function (res) {
    map.geoObjects.add(res.geoObjects);
});

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

var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/";

ymaps.geoXml.load(url).then(function (res) {
    res.geoObjects.each(function (obj) {
        if (obj.properties.get("name") == "Бассов пролив") {
            obj.options.set("strokeColor", "0066ffff");
        }
    });
    map.geoObjects.add(res.geoObjects);
});

Оказывается, что если мы заменим адрес на формат KML, то данный код работать не будет, потому что коллекция объектов, загруженная из формата KML отличается от той, что получается при загрузке YMapsML. При загрузке KML получается коллекция объектов, состоящая из одного геобъекта, который сам является коллекцией. И вот этот вложенный объект уже содержит геообъекты, нарисованные на карте.

Поэтому для обработки коллекции, загруженной из KML надо написать вот такой код:

var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz.kml";

ymaps.geoXml.load(url).then(function (res) {
    res.geoObjects.each(function (obj) {
        obj.each(function (nested) {
            if (nested.properties.get("name") == "Бассов пролив") {
                nested.options.set("strokeColor", "0066ffff");
            }
        });
    });
    map.geoObjects.add(res.geoObjects);
});

А чтобы наш код не зависел от формата, надо его еще немного усложнить:

var modifyObj = function (obj) {
    if (obj.properties.get("name") == "Бассов пролив") {
        obj.options.set("strokeColor", "0066ffff");
    }
}

ymaps.geoXml.load(url).then(function (res) {
    res.geoObjects.each(function (obj) {
        if ("each" in obj && typeof obj.each == "function") {
            obj.each(function (nested) { modifyObj(nested); });
        } else {
            modifyObj(obj);
        }
    });
    map.geoObjects.add(res.geoObjects);
});

Автор: sergey-b

Источник