Openlayers ol.interaction. Стиль рисования

Question

У меня есть это jsfiddle , у него есть возможность рисовать многоугольник на карте, которая работает отлично.Я не могу понять, как стилизовать взаимодействие .Draw.

В настоящее время у меня есть пунктирная линия для участков многоугольника, которые пользователи уже нарисовали, и еще одна пунктирная линия, соединяющая первую нарисованную точку споследняя нарисованная точка.

Когда я пишу стили, это, кажется, влияет на обе линии.

Мне нужно иметь пунктирную черную линию, соединяющую точки, которые пользователь уже нарисовал, и никакой линии (полностью прозрачный) для линии, соединяющей последнюю нарисованную точку с первой нарисованной точкой.

Это мой текущий объект стиля:

style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.5)',
      lineDash: [10, 10],
      width: 3
    }),
    image: new ol.style.Circle({
      fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
      stroke: new ol.style.Stroke({
        color: [0, 0, 0, 0.5],
        width: 1
      }),
      radius: 4
    })
  })

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

Кто-нибудь сталкивался с этим и нашел исправление?

Answer 1

Хорошо, я взломал этот, мне пришлось погрузиться в источник библиотеки, чтобы выяснить это, поэтому я опубликую ответ здесь в надежде, что это поможет кому-то еще в будущем, так что вот так:

В исходном коде я мог видеть, что когда вы используете ol.interaction.Draw для рисования многоугольника, используется несколько частей геометрии.Существует базовый Polygon, это бит, который имеет обводку и заливку и показывает соединительную линию (в зависимости от стиля обводки).Существует LineString, который показывает линию для точек, которые нарисовал только пользователь (без заливки и без соединительной линии).И есть точка, к которой прикреплен указатель мыши.Я оставил `console.log () 'в jsfiddle, чтобы показать все это.

Я создал этот рабочий jsfiddle .То, что я сделал, это вместо установки стилей непосредственно внутри ol.interaction.Draw Я использовал styleFunction (см. Код ниже).Я определяю каждую геометрию по типу и устанавливаю для нее определенный стиль.

const styleFunction = feature => {
  var geometry = feature.getGeometry();
  console.log('geometry', geometry.getType());
  if (geometry.getType() === 'LineString') {
    var styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 102, 0, 1)',
          width: 3
        })
      })
    ];
    return styles;
  }
  if (geometry.getType() === 'Polygon') {
    var styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 102, 0, 0)',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 102, 0, 0.3)'
        })
      })
    ];
    return styles;
  }
  return false;
};

Надеюсь, это поможет ?