Открытые слои меняются при наведении стиля - PullRequest
Новая
       11

Открытые слои меняются при наведении стиля

2 голосов
/ 05 июня 2019

Я пытаюсь изменить непрозрачность функции многоугольника при наведении курсора мыши. Я могу включить эту функцию при наведении курсора мыши и изменить стиль, но не могу, например, анимировать процесс изменения прозрачности с 0,3 до 0,8.

Я прочитал документы, но ничего не могу найти ...

Любая подсказка?

1 Ответ

2 голосов
/ 05 июня 2019

Функция не будет автоматически перерисовываться, если единственное изменение - это истекшее время, которое рассчитывает функция стиля, если она вызывается, но при вызове feature.changed () будет запущен другой рендер. 

  var map = new ol.Map({
  target: document.getElementById('map'),
  view: new ol.View({
      center: ol.proj.fromLonLat([0, 50]),
      zoom: 7,
  })
});

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature(
        ol.geom.Polygon.fromExtent([-1, 50, 1, 51]).transform('EPSG:4326', map.getView().getProjection())
      )
    ]
  })
});

var selectedStyle = new ol.style.Style({
 stroke: new ol.style.Stroke({
   width: 2,
   color: 'blue'
 }),
 fill: new ol.style.Fill()
});

var start;

map.addLayer(layer);
var select = new ol.interaction.Select({
  condition: ol.events.condition.pointerMove,
  style: function(feature) {
    var elapsed = new Date().getTime() - start;
    var opacity = Math.min(0.3 + elapsed/10000, 0.8);
    selectedStyle.getFill().setColor('rgba(255,0,0,' + opacity + ')');
    feature.changed();
    return selectedStyle;
  }
});
select.on('select', function(){ start = new Date().getTime(); });
map.addInteraction(select);
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>
...