OpenLayers изменяют стиль объекта без перезаписи стиля взаимодействия - PullRequest
Новая
       12

OpenLayers изменяют стиль объекта без перезаписи стиля взаимодействия

0 голосов
/ 02 апреля 2019

Есть ли способ изменить стиль отдельной функции без изменения стиля по умолчанию при взаимодействии выбора?

Вот простой фрагмент кода, показывающий мою проблему, и jsfiddle

Минимальный HTML: 

<input type="button" id="switcher" value="Change style"></input>
<div id="map" class="map"></div>

И простой скрипт: 

let vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false})
});

let map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({wrapX: false})
    }),
    vectorLayer,
  ],
  view: new ol.View({
    center: ol.proj.transform([9, 44.65], 'EPSG:4326', 'EPSG:3857'),
    zoom: 8
  })
});

let source = vectorLayer.getSource();

let draw = new ol.interaction.Draw({
  source: source,
  type: 'Polygon'
});

let selectOnHover = new ol.interaction.Select({
    source: source,
    condition: ol.events.condition.pointerMove
});

map.addInteraction(draw);
map.addInteraction(selectOnHover);

let fill = new ol.style.Fill({
  color: 'rgba(255,0,255,0.4)'
});
let stroke = new ol.style.Stroke({
  color: '#00FF00',
  width: 5
});
let customStyle = new ol.style.Style({
  image: new ol.style.Circle({
    fill: fill,
    stroke: stroke,
    radius: 5
  }),
  fill: fill,
  stroke: stroke
});

document.getElementById('switcher').onclick = function(event) {
  let features = source.getFeatures();
  if(features.length>0)
    features[0].setStyle(customStyle);
}

Как вы можете видеть, протестировав jsfiddle, нажатие на кнопку корректно изменит стиль первого нарисованного объекта, но, похоже, также перезапишет стиль по умолчанию при наведении (здесь просто взаимодействие выбора с условием).

Как сохранить стиль по умолчанию при наведении курсора при изменении стиля объекта?

1 Ответ

0 голосов
/ 02 апреля 2019

Стиль объекта переопределяет все функции стилей (и стили по умолчанию для взаимодействий и т. Д.). Но вы могли бы дать объекту свойство customStyle и использовать его только в функции стиля слоя вместо стиля по умолчанию, в то время как взаимодействия будут продолжать использовать значения по умолчанию для взаимодействий. 

let defaultFill = new ol.style.Fill({
  color: 'rgba(255,255,255,0.4)'
});
var defaultStroke = new ol.style.Stroke({
  color: '#3399CC',
  width: 1.25
});
var defaultStyles = [
  new ol.style.Style({
    image: new ol.style.Circle({
      fill: defaultFill,
      stroke: defaultStroke,
      radius: 5
    }),
    fill: defaultFill,
    stroke: defaultStroke
  })
];

let vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false}),
  style: function(feature) { 
    var customStyle = feature.get('customStyle');
    return customStyle || defaultStyles;
  }
});


...
...

document.getElementById('switcher').onclick = function(event) {
  let features = source.getFeatures();
  if(features.length>0)
    features[0].set('customStyle', customStyle);
}
...