一行上的图像 [英] Images along on a line

问题描述

我想知道如何将图像放置在一条线上.例如，我可以用虚线代替虚线或虚线，而不是虚线或虚线.

I am wondering how to place images on a line. For example, instead of a dotted or dashed line, I could include a symbol of a ship or a character (e.g. |) repeated along the line.

我当前的代码:

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,
        ],
      }),
    })
  ],

. . .

这是我的台词样子:

EDIT 2: Here is what my line looks like:

(参见图片)

这是它的外观:

(参见图片)

可能是这样，或者是锚的图片.

It could be like this, or pictures of anchors.

新样式代码(无效):

New style code (not working):

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

我做错什么了吗?

1. 使用Blender，添加网格并在顶点在您的直线上的位置上添加顶点.
2. 将网格转换为曲线( Alt - C ).
3. 添加平面并将图像作为纹理添加到平面.
4. 将平面缩放到相对于直线( S )合适的尺寸.
5. 在具有图像的平面上添加Array修改器，然后为Fit Type选择Fit Curve.
6. 将Curve:设置为从网格创建的曲线的名称.
7. 将相对偏移"的第一个框设置为点之间的间隔(相对于点的大小)
8. 在平面上添加曲线"修改器，然后选择创建为Object:的曲线.

1. Using Blender, add a mesh and add vertices on where the vertices are on your line.
2. Convert the mesh to a curve (Alt-C).
3. Add a plane and add your image to it as a texture.
4. Scale the plane to the appropriate size relative to the line (S).
5. Add an Array modifier to the plane with the image and choose Fit Curve for Fit Type.
6. Set the Curve: to the name of the curve you created from the mesh.
7. Set the Relative Offset’s first box to the space between the dots (relative to the size of the dots)
8. Add a Curve modifier to the plane and choose the curve you created as the Object:.

注意:这可能会导致图像变形.如果发生这种情况，请按照下列步骤操作:

Note: This may result in the images being deformed. If this occurs, follow these steps:

1. 复制平面( Alt - D )
2. 从重复项中删除阵列"和曲线"修改器.
3. 将重复的平面与原始平面配对.

1. Duplicate the plane (Alt-D)
2. Remove the Array and Curve modifiers from the duplicate.
3. Parent the duplicate plane to the original plane.

1. 选择重复的平面，然后选择原始平面.
2. 按 Ctrl - P .
3. 选择Object.

1. Select the duplicate plane, then the original plane.
2. Press Ctrl-P.
3. Select Object.

在原始平面中，转到对象"按钮(橙色立方体)，然后在Duplication下选择Faces.

In the original plane, go to the Object buttons (orange cube) and select Faces under Duplication.

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

This will place a copy of the plane at the center of each face.

推荐答案

OpenLayers 3当前不支持此功能，我还试图找到一种可以很好地工作并且可以扩展许多功能的机制.目前，OpenLayers 3中唯一可以实现此目的的方法就是使用此技术，但这会极大地影响性能:

There is currently no support for this in OpenLayers 3, I am also trying to find a mechanism that would work well and scale with many features. The only thing currently available in OpenLayers 3 to acheive this would be to use this technique, but it would greatly affect performance: http://boundlessgeo.com/2015/04/geometry-based-styling-openlayers-3/

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

A live example is available here: http://openlayers.org/en/master/examples/line-arrows.html

要实现所需的样式，您必须沿线计算给定分辨率的点，然后为这些点分配一个ol.style.Icon.

To acheive the kind of style you want, you would have to compute points along the line for the given resolution and assign a ol.style.Icon for those points.

我想有可能在OpenLayers 3中实现更高级的笔触样式，下一页演示了使用Canvas渲染笔触的多种技术:

I guess it could be possible to implement more advanced stroke styles in OpenLayers 3, the following page demonstrates multiple techniques to render strokes with Canvas: http://perfectionkills.com/exploring-canvas-drawing-techniques/

这篇关于一行上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！