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.

My current code:

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:

(See image)

Here is what it should look like:

(See image)

It could be like this, or pictures of anchors.

EDIT: 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,
  }),
});

Am I doing anything wrong?

EDIT 3:

I have figured out how to do this:

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

Duplicate the plane (Alt-D)
Remove the Array and Curve modifiers from the duplicate.
Parent the duplicate plane to the original plane.
1. Select the duplicate plane, then the original plane.
2. Press Ctrl-P.
3. Select Object.
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.

回答1:

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/

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

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.

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/

回答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,
 })
 });

Visit these links to find more about this.

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

来源：https://stackoverflow.com/questions/32105107/images-along-on-a-line

标签

openlayers-3