Попробовал реализовать подсветку, вот что из этого вышло.
Полигон добавляетсяна карту но начинает мерцать(добавляться и удаляться), если указатель находится на нём.
Видимо при создании полигона генерируется mouseleave для слоя. Набросал пример для песочницы. Как с это побороть?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Метка и балун-панель.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src="//api-maps.yandex.ru/2.1.5/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<style type="text/css">
#YMapsID {
width: 350px;
height: 300px;
}
</style>
<script type="text/javascript">
ymaps.ready(function () {
var myMap = new ymaps.Map('YMapsID', {
center: [55.709243, 37.500737],
zoom: 10
}, {
// В нашем примере хотспотные данные есть только для 9 и 10 масштаба.
// Поэтому ограничим диапазон коэффициентов масштабирования карты.
minZoom: 10,
maxZoom: 10,
controls:[]
});
// Добавим на карту элемент управления коэффициентом масштабирования.
myMap.controls.add('zoomControl', { top: 5 });
// Шаблон URL для данных активных областей.
// Источник данных будет запрашивать данные через URL вида:
// '.../hotspot_layer/hotspot_data/9/tile_x=1&y=2', где
// x, y - это номер тайла, для которого запрашиваются данные,
// 9 - значение коэффициента масштабирования карты.
var tileUrlTemplate = 'examples/maps/ru/hotspot_layer/hotspot_data/%z/tile_x=%x&y=%y',
keyTemplate = 'testCallback_tile_%c',
imgUrlTemplate = 'examples/maps/ru/hotspot_layer/images/%z/tile_x=%x&y=%y.png',
objSource = new ymaps.hotspot.ObjectSource(tileUrlTemplate, keyTemplate),
imgLayer = new ymaps.Layer(imgUrlTemplate, {tileTransparent: true}),
hotspotLayer = new ymaps.hotspot.Layer(objSource, {cursor: 'help'});
var myPolygon = new ymaps.Polygon([[[55.74489309135048,37.786381531249965],[55.80294816727334,37.75067596484372],[55.838512328706486,37.64493255664059],[55.823826741009086,37.496617126953105],[55.728622104880756,37.42383270312497],[55.652600730348944,37.550175476562465],[55.65415367105865,37.71085052539061],[55.74489309135048,37.786381531249965]]] , {}, {
interactivityModel: 'default#transparent',
fillColor: '#00FF00',
strokeColor: '#0000FF',
strokeWidth: 5
})
hotspotLayer.events.add('mouseenter', function (e) {
myMap.geoObjects.add(myPolygon);
});
hotspotLayer.events.add('mouseleave', function (e) {
myMap.geoObjects.remove(myPolygon);
});
myMap.layers.add(hotspotLayer);
myMap.layers.add(imgLayer);
});
</script>
</head>
<body>
<div class="hero-unit">
<div class="container">
<div id="YMapsID"></div>
</div>
</div>
</body>
</html>