Openlayers 3 一条线上的图像

Openlayers 3 一条线上的图像,openlayers-3,Openlayers 3,我想知道如何在一条线上放置图像。例如,除了虚线或虚线之外,我还可以包括一条船的符号或一个沿着这条线重复的字符(例如,|) 我当前的代码: line=newol.geom.LineString([[0,0],[100100]]); lineStyle=新的ol.style.style({ 笔划:新的ol风格笔划({ 颜色:'黑色', 宽度:5, 划线:[10,10] }), }); lineFeature=新的ol.特征({ 几何:直线, }); lineFeature.setStyle(线型);

我想知道如何在一条线上放置图像。例如,除了虚线或虚线之外,我还可以包括一条船的符号或一个沿着这条线重复的字符(例如,
|

我当前的代码:

line=newol.geom.LineString([[0,0],[100100]]);
lineStyle=新的ol.style.style({
笔划:新的ol风格笔划({
颜色:'黑色',
宽度:5,
划线:[10,10]
}),
});
lineFeature=新的ol.特征({
几何:直线,
});
lineFeature.setStyle(线型);

map=新建ol.map({
图层:[
新ol.layer.Vector({
来源:新ol.source.Vector({
特点:[
线条特征,
],
}),
})
],

编辑2: 以下是我的线路图:

下面是它的外观:

它可能是这样的,或者是锚的图片

编辑: 新样式代码(不工作):

lineStyle=new ol.style.style({
半径:10,
图像:'./icon.png',
笔划:新的ol风格笔划({
颜色:'黑色',
宽度:5,
lineDash:lineDash,
}),
});
我做错什么了吗

编辑3:

我已经想出了如何做到这一点:
  • 使用Blender,添加网格,并在线上顶点所在的位置添加顶点
  • 将网格转换为曲线(Alt-C)
  • 添加平面并将图像作为纹理添加到其中
  • 将平面缩放为相对于线的适当大小
  • 将阵列修改器添加到带有图像的平面,并为
    拟合类型
    选择
    拟合曲线
  • 曲线:
    设置为从网格创建的曲线的名称
  • 将相对偏移的第一个框设置为点之间的间距(相对于点的大小)
  • 将曲线修改器添加到平面,并选择创建为
    对象的曲线:
  • 注意:这可能会导致图像变形。如果发生这种情况,请执行以下步骤:

  • 复制平面(Alt-D)
  • 从副本中删除阵列和曲线修改器
  • 将复制平面设置为原始平面的父平面。
  • 选择复制平面,然后选择原始平面
  • 按Ctrl-P
  • 选择
    对象
  • 在原始平面中,转到对象按钮(橙色立方体)并选择
    复制
    下的

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

  • 请访问这些链接以了解更多信息


    目前OpenLayers 3中不支持此功能,我也在尝试找到一种机制,该机制可以很好地工作并扩展许多功能。OpenLayers 3中目前唯一可以实现此功能的方法是使用此技术,但它会极大地影响性能:

    此处提供了一个实例:

    要获得所需的样式,必须沿给定分辨率的直线计算点,并为这些点指定一个ol.style.Icon


    我想可能会在OpenLayers 3中实现更高级的笔划样式,下面的页面演示了使用画布渲染笔划的多种技术:

    我应该把它放在
    笔划
    样式中还是放在主样式对象中?我很好奇……这是OL3吗?它在OL2中工作。我不确定OL3。让我检查一下。如果我这样做的话t、 我得到一个错误(
    [error]TypeError:undefined不是函数(评估'k.Jc()')Tm(ol.min.js,第301行)c(ol.min.js,第333行)forEach([native code],第0行)Oa(ol.min.js,第23行)ze(ol.min.js,第334行)Sd(ol.min.js,第336行)sl(ol.min.js,第423行)ef(ol.min.js,第121行)(匿名函数)([native code],第0行)
    )谢谢您的帮助!但是,该样式似乎不适用于该行。有关我拥有的和需要的图片,请参见我编辑的问题。画布似乎不支持本机设置,但这里有一个在画布中重复图标的好例子:有关线条字符串上的图标,请参见
      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,
     })
     });