沿着一条线的图像

Question

我想知道如何将图像排成一行。例如，我可以包含沿线重复的船符号或字符（例如 |），而不是点划线。

我当前的代码：

line = new ol.geom.LineString([[0, 0], [100, 100]]);
lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: 'black',
    width: 5,
    lineDash: [10, 10]
  }),
});
lineFeature = new ol.Feature({
  geometry: line,
});
lineFeature.setStyle(lineStyle);

。 . .

map = new ol.Map({
  layers: [
    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [
          lineFeature,
        ],
      }),
    })
  ],

。 . .

编辑 2： 这是我的行的样子：

(See image)

它应该是这样的：

(See image)

可以是这样，也可以是主播图片

编辑： 新样式代码（无效）：

lineStyle = new ol.style.Style({
  radius: 10,
  images: './icon.png',
  stroke: new ol.style.Stroke({
    color: 'black',
    width: 5,
    lineDash: lineDash,
  }),
});

我做错了什么吗？

编辑 3：

我已经知道怎么做了：

使用 Blender，添加网格并在顶点所在的线上添加顶点。
将网格转换为曲线(Alt-C)。
添加平面并将图像作为纹理添加到其中。
将平面缩放到相对于直线的适当大小 (S)。
在带有图像的平面上添加一个数组修改器，然后为 Fit Type 选择 Fit Curve。
将 Curve: 设置为您从网格创建的曲线的名称。
设置Relative Offset的第一个框为点之间的space（相对于点的大小）
向平面添加曲线修改器并选择您创建的曲线作为 Object:。

注意：这可能会导致图像变形。如果发生这种情况，请执行以下步骤：

复制平面(Alt-D)
从副本中删除数组和曲线修饰符。
将复制平面作为原始平面的父级。
1. Select复制平面，然后是原始平面。
2. 按Ctrl-P.
3. Select Object.
在原始平面中，转到 Duplication 下的对象按钮（橙色立方体）和 select Faces。

这会将平面的副本放置在每个面的中心。

Answer 1

  lineStyle = new ol.style.Style({
  image: new ol.style.Icon(({
                 opacity: 1,
                 size:20,
                 src: './icon.png'
                 })),
  stroke: new ol.style.Stroke({
  color: 'black',
  width: 5,
  lineDash: lineDash,
 })
 });

访问这些链接以了解更多相关信息。

http://openlayers.org/en/v3.8.1/apidoc/ol.style.Style.html http://openlayers.org/en/v3.6.0/apidoc/ol.style.Icon.html

Answer 2

目前在 OpenLayers 3 中不支持此功能，我也在尝试找到一种可以很好地工作并可以扩展许多功能的机制。 OpenLayers 3 目前唯一可用的方法是使用这种技术，但它会极大地影响性能：http://boundlessgeo.com/2015/04/geometry-based-styling-openlayers-3/

此处提供了一个实例： http://openlayers.org/en/master/examples/line-arrows.html

要获得您想要的样式，您必须计算给定分辨率沿线的点并为这些点分配 ol.style.Icon。

我想可以在 OpenLayers 3 中实现更高级的笔触样式，下页演示了使用 Canvas 渲染笔触的多种技术：http://perfectionkills.com/exploring-canvas-drawing-techniques/

沿着一条线的图像

Images along on a line

openlayers-3

我已经知道怎么做了：