Openlayers 3線條字符串的繪製起點（CSP）

我有一個線條字符串的geojson，如下所示。Openlayers 3線條字符串的繪製起點（CSP）

{ 
    "type" : "LineString", 
    "coordinates" : [[123.5555, 26.33869, 0], [123.5555, 33.5555, 0], [123.5555, 40.763938, 0], [126.460214, 40.378269, 0]] 
}

我需要在行字符串的開頭畫一個三角形來表示方向和起點。考慮到頭兩組座標，三角形的尖端應該指向線串正在進行的方向。

就如何實現這一目標的任何建議。我應該通過計算角點來繪製三角形嗎？如果是，我應該使用一個旋轉的圖像，如果是的話，我該如何計算旋轉度？

來源

2016-08-23 BiJ

您可以使用樣式函數爲代表幾何圖形的矢量圖層實現該功能。

所以你的風格函數應該是這樣的（樣本函數您的線路上的每一個部分增加了一個箭頭）：

var styleFunction = function(feature) { 
var styles = [ 
    // linestring 
    new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: '#ffcc33', 
     width: 2 
     }), 
     fill: new ol.style.Fill({ 
     color: 'rgba(255,0,0,0.5)' 
     }) 
    }) 
    ]; 
    var geometry = feature.getGeometry(); 
    geometry.forEachSegment(function(start, end) { 
    var dx = end[0] - start[0]; 
    var dy = end[1] - start[1]; 
    var rotation = Math.atan2(dy, dx); 
    // arrows 
    styles.push(new ol.style.Style({ 
     geometry: new ol.geom.Point(start), 
     image: new ol.style.Icon({ 
     src: 'http://openlayers.org/en/v3.14.2/examples/data/arrow.png', 
     anchor: [0.75, 0.5], 
     rotateWithView: false, 
     rotation: -rotation 
     }) 
    })); 
    }); 

    return styles; 
};

然後ASIGN此功能的矢量圖層的樣式參數

檢查這個

這裏多了一個fiddle添加箭頭只在您的線路的第一段

來源

2016-08-23 08:49:16 pavlos

Openlayers 3線條字符串的繪製起點（CSP）

回答

相關問題