OpenLayers, как стиль рисованной линии отличается от того, что вы собираетесь рисовать - PullRequest
Новая
       18

OpenLayers, как стиль рисованной линии отличается от того, что вы собираетесь рисовать

1 голос
/ 14 марта 2019

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

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

Чтобы проиллюстрировать, что я пытаюсь сделать, здесь приведен скриншот -

Expected output

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

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

Также я добавил ol.style.RegularShape() для отображения квадрата, но вместо этого отображается круг, не знаю, что я делаю неправильно.

Вот ссылка jsbin на мой код - Проблема со стилем линии взаимодействия

1 Ответ

2 голосов
/ 14 марта 2019

Вам потребуется использовать функцию стиля для стиля рисования и разделить геометрию на две части для стилизации: 

var drawStyle = function(feature) {
    var styles = [];
    if (feature.getGeometry().getType() == 'LineString') {
        var coordinates = feature.getGeometry().getCoordinates();
        styles.push(new ol.style.Style({
            geometry: new ol.geom.LineString(coordinates.slice(-2)),
            stroke: new ol.style.Stroke({
                color: '#0000FF',
                lineDash: [1, 20],
                width: 5,
              lineCap:'square',
              lineJoin:'round',
              lineDashOffset:10
            })
        })); 
        styles.push(new ol.style.Style({
            geometry: new ol.geom.MultiPoint(coordinates),
            image: new ol.style.RegularShape({
              points: 4,
              radius: 6,
              angle: Math.PI / 4,
              fill: new ol.style.Fill({
                color: 'blue'
              }),
              stroke: new ol.style.Stroke({
                color: 'blue'
              }),
            })
        })); 
        if (coordinates.length > 2) {
          styles.push(new ol.style.Style({
            geometry: new ol.geom.LineString(coordinates.slice(0,-1)),
            stroke: new ol.style.Stroke({
                color: '#0000FF',
                width: 2,
              lineCap:'square',
              lineJoin:'round'
            })
          }));
        }
    }
    return styles;
}

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

line.removeLastPoint();

убедитесь, что объявлено var line;, поэтому оно входит в область действия функции нажатия кнопки

...