首页 / 浏览问题 / 云GIS / 问题详情
如何用js画出带多个箭头的线
9EXP 2019年04月10日

使用产品:iserver 7c

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

1个回答

你好如果你使用的是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;

};
3,352EXP 2019年04月10日

这就是效果,你可以参考

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