Openlayers 3 在openlayers3中不使用任何图像绘制箭头

如何在Openlayers 3地图中的矢量层上绘制箭头？

---

我尝试使用canvaselement创建箭头，但不知道如何在ol3地图上绘制箭头。

不需要canvas元素。可以从中获取箭头示例，并添加2个自定义LineString元素，而不是图标。在示例中，您已经有了以弧度为单位的旋转角度和应该添加代码的事件

希望下面的代码片段能起到作用：

var source=new ol.source.Vector（）；
var styleFunction=函数（特性）{
var geometry=feature.getGeometry（）；
变量样式=[
//线绳
新ol风格({
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
})
})
];
几何体。前段（函数（开始、结束）{
var dx=结束[0]-开始[0]；
var dy=结束[1]-开始[1]；
变量旋转=数学atan2（dy，dx）；
var lineStr1=新的ol.geom.LineString（[end，[end[0]-200000，end[1]+200000]]）；
lineStr1.旋转（旋转，结束）；
var lineStr2=新的ol.geom.LineString（[end，[end[0]-200000，end[1]-200000]]）；
lineStr2.旋转（旋转，结束）；
var stroke=新的ol.style.stroke({
颜色：“绿色”，
宽度：1
});
styles.push（新ol.style.style({
几何图形：lineStr1，
笔划：笔划
}));
styles.push（新ol.style.style({
几何图形：lineStr2，
笔划：笔划
}));
});
返回样式；
};
var map=新ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
新ol.layer.Vector({
资料来源：资料来源，
style:styleFunction
})
],
目标：“地图”，
视图：新ol.view({
中间：[0,0]，
缩放：3
})
});
map.addInteraction（新ol.interaction.Draw({
资料来源：资料来源，
类型：（'LineString'）
}));
这是对的另一种定制。
它使用图像而不是图像。箭头将保持其大小与当前地图缩放无关


var source=new ol.source.Vector（）；
var styleFunction=函数（特性）{
var geometry=feature.getGeometry（）；
变量样式=[
//线绳
新ol风格({
笔划：新的ol风格笔划({
颜色：“#000”，
宽度：2
})
})
];
几何体。前段（函数（开始、结束）{
var dx=结束[0]-开始[0]；
var dy=结束[1]-开始[1]；
变量旋转=数学atan2（dy，dx）；
styles.push（新ol.style.style({
几何：新的ol.几何点（端点），
图片：新ol.style.RegularShape({
fill:new ol.style.fill（{color:'#000'}），
要点:3,，
半径：8，
旋转：-旋转，
角度：Math.PI/2//旋转90°
})
}));
});
返回样式；
};
var map=新ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
}),
新ol.layer.Vector({
资料来源：资料来源，
style:styleFunction
})
],
目标：“地图”，
视图：新ol.view({
中间：[0,0]，
缩放：3
})
});
map.addInteraction（新ol.interaction.Draw({
资料来源：资料来源，
类型：（'LineString'）
}));

您看到了吗？但是，您应该提供更多的上下文。从你的问题中不清楚你是否想用箭头来设置点或线的样式。我已经看到了这个链接。它使用了“”。但我不想使用任何图像（例如这里的png）。我想用箭头来设计线条的样式。使用canvas元素是一种可能的解决方案吗？但是如何使用ol.interaction.draw在openlayers 3中绘制画布元素呢？您不必将
arrow.png
配置为
ol.style.Icon的
src
，还可以将
canvas
元素配置为
img
。有点像。非常感谢伊卡洛斯！！！这对我有帮助。使用这个解决方案，我试图使双线箭头，我几乎实现了它，只剩下双线部分的角度。如果你做不到，我会再抓住你