Клуб API Карт

Клуб API Карт

Сложное подсвечивание области с Яндекс.Картами

Пост в архиве.

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

1. Веделить на карте районы московской области (ну, это понятно, что можно легко сделать).

2. Разделить каждый район на сектора.

3. Окрашивать сектора в разные цвета, в зависимости от процента (например, 5% - зеленоватый цвет, 85% - почти красный цвет сектора, что-то типа яндекс пробки по загрузке дорок меняет цвет маршрутов, так и здесь, только для целых секторов)

И честно говоря, даже не предствляю с чего начать и вообще возможно ли такое сделать на яндекс картах?

2 комментария
Авторизуйтесь, чтобы оставить комментарий
Марат Дулин
28 января 2016, 06:39
Ваша задача решается примерно так:
 

                function fillZero(str, len) {
                    str = str.toString();
                    var l = str.length;
                    while (l < len) {
                        str = '0' + str;
                        l++;
                    }
                    return str;
                }

                function getColor(percentage) {
                    var r = percentage
                        g = percentage
                        b = 0;

                    return fillZero(r.toString(16), 2)
                        +  fillZero(g.toString(16), 2)
                        +  fillZero(b.toString(16), 2)
                        +  '80'; // альфа-канал
                }

                var polygon1 = new YMaps.Polygon([
                    new YMaps.GeoPoint(37.635, 55.763),
                    new YMaps.GeoPoint(37.63, 55.763),
                    new YMaps.GeoPoint(37.63, 55.758),
                    new YMaps.GeoPoint(37.635, 55.758),
                    new YMaps.GeoPoint(37.635, 55.763)
                ], {style: {
                    polygonStyle: {
                        strokeColor: getColor(0),
                        fill: true,
                        fillColor: getColor(0)
                    }
                }});

                myMap.addOverlay(polygon1);

                var polygon2 = new YMaps.Polygon([
                    new YMaps.GeoPoint(37.64, 55.763),
                    new YMaps.GeoPoint(37.635, 55.763),
                    new YMaps.GeoPoint(37.635, 55.758),
                    new YMaps.GeoPoint(37.64, 55.758),
                    new YMaps.GeoPoint(37.64, 55.763)
                ], {style: {
                    polygonStyle: {
                        strokeColor: getColor(50),
                        fill: true,
                        fillColor: getColor(50)
                    }
                }});

                myMap.addOverlay(polygon2);

                var polygon3 = new YMaps.Polygon([
                    new YMaps.GeoPoint(37.645, 55.763),
                    new YMaps.GeoPoint(37.64, 55.763),
                    new YMaps.GeoPoint(37.64, 55.758),
                    new YMaps.GeoPoint(37.645, 55.758),
                    new YMaps.GeoPoint(37.645, 55.763)
                ], {style: {
                    polygonStyle: {
                        strokeColor: getColor(100),
                        fill: true,
                        fillColor: getColor(100)
                    }
                }});

                myMap.addOverlay(polygon3);

sm-5
28 января 2016, 06:39
Спасибо, большое! Попробую как оно будет)