openlayers 3 : 멀티 라인

Question

에 그리기 화살표는 다중 선 스트링

내 목표에 화살표 아이콘을 그릴 수 있다면 내가 알고 싶습니다 여러 줄의 모든 라인에 화살표로 여러 줄을 보여주는 것입니다.

웹에서 몇 가지 예를 보았지만 항상 한 줄로되어 있습니다.

multiLineString으로 할 수 있는지 알고 계십니까?

Answer 1

예, 가능합니다.

var styleFunction = function(feature) { 
    var geometry = feature.getGeometry(); 

    var styles = [ 
    // linestring 
    new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
     color: '#ffcc33', 
     width: 2 
     }) 
    }) 
    ]; 

var lineStringsArray = geometry.getLineStrings(); 
for(var i=0;i<lineStringsArray.length;i++){ 

    lineStringsArray[i].forEachSegment(function(start, end) { 
    var dx = end[0] - start[0]; 
    var dy = end[1] - start[1]; 
    var rotation = Math.atan2(dy, dx); 
    styles.push(new ol.style.Style({ 
     geometry: new ol.geom.Point(end), 
     image: new ol.style.Icon({ 
     src: 'https://openlayers.org/en/v3.19.1/examples/data/arrow.png', 
     rotateWithView: false, 
     rotation: -rotation 
     }) 
    })); 
    }); 
} 

    return styles; 
}; 

데모 링크에서보세요 https://plnkr.co/edit/UM7bD8Pq55PjWQ6EHmTl?p=preview