Openlayers如何設置繪制的線串的樣式與要繪制的線串的樣式不同

Question

我有一個具有繪圖交互作用的openlayers地圖。 當用戶開始在地圖上繪制線串時，繪制的線串部分應看起來與用戶接下來要繪制的部分不同。

簡而言之，當用戶在地圖上放置一個點時，到該點的線應為塊狀，沒有破折號或任何其他樣式選擇。

為了說明我要在此處執行的操作，請截圖-

我們可以看到用戶將要在直線上添加另一個點，因此直到該點的直線應變為藍色塊。

我維護了要添加到地圖上的點的集合，當用戶選擇刪除最后一個點時，該點將從地圖上刪除，但最后一個線段也應該從地圖上消失。 找不到任何可以實現的目標。

我還添加了ol.style.RegularShape()來顯示正方形，但它顯示的是圓形，而不知道我在做什么錯。

這是我的代碼的jsbin鏈接- 繪制交互線條樣式問題

Answer 1

您需要為繪畫樣式使用樣式功能，並將幾何分為兩部分進行樣式設置：

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; 被聲明，因此它在按鈕單擊功能的范圍內