如何用js画出带多个箭头的线

0 投票

使用产品:iserver 7c

操作系统:win7 x64
数据类型: oracle 11g
问题详细描述:现在有多个点组成的线,需求是每两个个点之间添加箭头指明方向。请问有没有具体的实现方案?效果图如下:

4月 10, 2019 分类:  289次浏览 | 用户: 叶落无声 (9 分)
重新分类 4月 10, 2019 用户:gesheng

1个回答

0 投票
你好如果你使用的是iclient for openlayer的,可以在线上的每个节点上添加个图标,并且可以调节图标的旋转角度的方式来,给线附上箭头

function addline(){

roadLine = new ol.geom.LineString([

[5305.19551436013, -3376.9669111768926],

[5075.3145648369318, -3378.0037556404409],

[5006.0235999418364, -3358.8890067038628],

[4960.9674060199022, -3349.3316322355736],

[4933.319287022352, -3337.3849141502124]

]);

var vectorSource = new ol.source.Vector({

features: [new ol.Feature(roadLine)]

});

var vectorLayer = new ol.layer.Vector({

source: vectorSource,

style: styleFunction

});

map.addLayer(vectorLayer);

}

var styleFunction = function(feature){

console.log(feature)

var geometry = feature.getGeometry();

var styles = [

new ol.style.Style({ // 线串的样式

stroke: new ol.style.Stroke({

color: '#FC3',

width: 2

})

})

];

// 对线段的每一个子线段都设置箭头样式

geometry.forEachSegment(function(start, end){

var dx = end[0] - start[0];

var dy = end[1] - start[1];

var rotation = Math.atan2(dy, dx);

console.log(rotation)

styles.push(new ol.style.Style({

geometry: new ol.geom.Point(end),

image: new ol.style.Icon({

src: 'icon/ar.png',

anchor: [0.75, 0.5],

rotateWithView: true,

rotation: -rotation

})

}));

});

return styles;

};
4月 10, 2019 用户: 阳俊林 名扬四海 (1,909 分)

这就是效果,你可以参考

您好,我使用的iclient for javaScript 有没有对应的解决方案呢?
...