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）

回答

相关问题