Клуб API Карт

затемнение области снаружи многоугольника

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

Есть некая выделенная область на карте(многоугольник).

Подскажите  чем и как можно  затемнить всю область снаружи этого многоугольника, а область внутри него оставить прозрачной.

15 комментариев

 

Если это прямоугольник, можно сделать это четырьмя темными прямоугольниками по его бокам. 

(так сделано у меня, при выделении части карты для копирования: http://map/ck.ua )

 

Если сложный многоугольник....мне приходит на ум только такая идея:

http://andboson.net/jim/images/mapp.jpg

т.е. обвести его по контуру другим многоугольником, с шириной границы выходящей за пределы экрана.

 

Но, очевидно, есть варианты получше.

 

спасибо за ответ, про увеличение границ и их затемнение не думала. идея хороша, вот только сама область внутри многоугольника тоже затемнится значительно а она должна оставаться прозрачной. Еще варианты есть?

Так нужно создавать такой, чтоб область осталась прозрачной.
т.е. расстояние от линии требуемого многоугольника до центра линии обводки внешнего многоугольника должно быть равно толщине линии обводки/2

Огромное спасибо, именно это я и искала))

Мне кажется более подходящим именно вариант, когда вы рисуете многоугольник с дыркой внутри. Сейчас это даже упростили. Внешнюю границу берите по углам карты.

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

В общем случае помогут полигоны с дырками.

Эффект на картинке можно достичь нарисовав квадратный полигон с вырезом по середине.

Тени по сторонам, в целях производительности, лучше создать из 4х других полигонов

документация

http://api.yandex.ru/maps/jsapi/doc/ref/reference/polygonoptions.xml#interiors

пример такого полигона

http://ymapsapi.ya.ru/replies.xml?item_no=123

Во-первых, если рисуем с нуля многоугольник и потом автоматичеки
добавляем точки по краям карты надо знать с какой точки начать,

Отбросить, ссылку на многоугольники с внутренними дырками, то добавить нужно пять точек (4 угла + точка поверх точки начала), а за начало брать bounds_max_Y то всё бцдет работать.

А по событиям зума и сдвига, перемещать.

Можно еще поиграться с css карты и многоугольника.

 

Тени по сторонам, в целях производительности, лучше создать из 4х других полигонов

В смысле сдалать 4 уголка?

не могли бы вы привести пример кода использования многоугольника с внутренними дырками?

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

проблема как раз в том что я возможно просто неправильно передаю данные в
это поле, или не в том виде сами данные. вот как это сейчас у меня:

добавила в конец такой кусок кода:

var cArr = [[37.563096,55.786319], [37.763596,55.74451], [37.604294,55.680936]];
var vArr = [];
for(var key in cArr)
{
    var item = cArr[key];
    var point = new YMaps.GeoPoint(item[0], item[1]);
    var vert = new YMaps.CoordVertex(point);
    vArr.push(vert);
}
var path = new YMaps.CoordPath(vArr);
polygon.setOptions({interiors: path });
map.addOverlay(polygon);

ошибок фаербаг не выдает, типы приведены правильно вроде, но все равно не отображает область внутри..

Всем спасибо, вопрос закрыт. Оказалось, что надо было просто добавить квадратные скобочки чтоб было так:

    polygon.setOptions({interiors:[path]});

Отлично!

Добавьте, пожалуйста, теги в стартовое сообщение, чтоб можно было легче найти этот пост.