一行上的图像
我想知道如何将图像放置在一条线上.例如,我可以用虚线代替虚线或虚线,而不是虚线或虚线.
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,
}),
});
我做错什么了吗?
- 使用Blender,添加网格并在顶点在您的直线上的位置上添加顶点.
- 将网格转换为曲线( Alt - C ).
- 添加平面并将图像作为纹理添加到平面.
- 将平面缩放到相对于直线( S )合适的尺寸.
- 在具有图像的平面上添加Array修改器,然后为
Fit Type
选择Fit Curve
. - 将
Curve:
设置为从网格创建的曲线的名称. - 将相对偏移"的第一个框设置为点之间的间隔(相对于点的大小)
- 在平面上添加曲线"修改器,然后选择创建为
Object:
的曲线.
- 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
forFit 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:
- 复制平面( Alt - D )
- 从重复项中删除阵列"和曲线"修改器.
- 将重复的平面与原始平面配对.
- Duplicate the plane (Alt-D)
- Remove the Array and Curve modifiers from the duplicate.
- Parent the duplicate plane to the original plane.
- 选择重复的平面,然后选择原始平面.
- 按 Ctrl - P .
- 选择
Object
.
- Select the duplicate plane, then the original plane.
- Press Ctrl-P.
- 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/