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 Curve选择Fit Type。
将Curve:设置为您从网格中创建的曲线的名称。
将相对偏移的第一个框设置为点之间的空格（相对于点的大小）
向平面添加“曲线”修改器，并选择您创建的曲线Object:。

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

复制飞机（ Alt - D ）
从副本中删除阵列和曲线修改器。
将复制平面加载到原始平面。
1. 选择复制平面，然后选择原始平面。
2. 按 Ctrl - P 。
3. 选择Object。
在原始平面中，转到对象按钮（橙色立方体），然后在Faces下选择Duplication。

这会将平面的副本放在每张脸的中心。

Answer 1

目前在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/

Answer 2

  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

图像沿着一条线

我已经想出了如何做到这一点：

2 个答案: