Javascript OpenLayers 3中的自定义矢量形状标记

我有一张OpenLayers 3地图，上面显示了各种数据。其中之一是展示附近雷达探测到的船只。目前，我将船显示为一个简单的矢量圆。我想把它显示为一个像船一样的向量

据我所知，我的最佳选择是使用*.png图标，并执行以下操作：

style: new ol.style.Icon({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    opacity: 1,
    scale: 1,
    src: '/Content/images/boat.png',
    rotation: 0
  }))
});

这是可行的，但我希望有一个在放大/缩小时不缩放的向量。我目前针对某些不同数据的解决方案是显示一个矩形，但缩放时它会缩放：

var style = (function () {
  function (feature, resolution) {
  // font size
  if (resolution > 0.4) var fontSize = '12px';
  else var fontSize = '14px';

  var temperature = feature.get('temperature') || '-';
  temperature = temperature.replace(/,/g, '.');

  return [new ol.style.Style({
    fill: fill,
    stroke: stroke,
    text: new ol.style.Text({
      font: 'bold ' + fontSize + ' helvetica,sans-serif',
      text: Math.round(temperature * 100) / 100 + '°C',
      fill: new ol.style.Fill({ color: '#000' })
    }),
    geometry: function (feature) {
      var startingCoordinates = feature.getGeometry().getCoordinates();
      var coordinates = [[
          [startingCoordinates[0] + 0, startingCoordinates[1] + 0],
          [startingCoordinates[0] + 33, startingCoordinates[1] + 0],
          [startingCoordinates[0] + 33, startingCoordinates[1] + (-11.35)],
          [startingCoordinates[0] + 0, startingCoordinates[1] + (-11.35)],
          [startingCoordinates[0] + 0, startingCoordinates[1] + 0]
      ]];

      return new ol.geom.Polygon(coordinates);
      }
    })]
  }
})()

有没有比使用startingCoordinates+（常量*分辨率）更好的解决方案？使用vector和png是否有显著的性能差异？谢谢

编辑：在咨询了我的几个同事之后，我基本上是在尝试使用自定义形状

---

EDIT2:实际上更像这样“命名符号“闪电”、“矩形”和“教堂”是用户定义的。”

这是我的工作方式，与原始的类似，但我不必计算坐标应该是什么，我只需提供它的像素大小，然后让地图计算其余的

geometry: function (feature) {
    var startingCoordinates =feature.getGeometry().getCoordinates();
    var pixel = map.getPixelFromCoordinate(startingCoordinates);
    var p1,p2,p3,p4,polyCoords=[],sizex=90, sizey=30;
    p1 = pixel;
    p2 = [pixel[0]+sizex,p1[1]];
    p3 = [pixel[0]+sizex,pixel[1]+sizey];
    p4 = [pixel[0],pixel[1]+sizey];
    var p = [p1,p2,p3,p4,p1];
    for (var c = 0; c < 5;c++){
        polyCoords.push(map.getCoordinateFromPixel(p[c]));
    }

    return new ol.geom.Polygon([polyCoords]);
} 

几何体：功能（特征）{ var startingCoordinates=feature.getGeometry（）.getCoordinates（）； var pixel=map.getPixelFromCoordinate（起始坐标）； 变量p1，p2，p3，p4，polyCoords=[]，sizex=90，sizey=30； p1=像素； p2=[像素[0]+sizex，p1[1]]； p3=[像素[0]+sizex，像素[1]+sizey]； p4=[像素[0]，像素[1]+sizey]； var p=[p1，p2，p3，p4，p1]； 对于（var c=0；c<5；c++）{ polyCoords.push（map.getCoordinateCompix（p[c]）； } 返回新的几何多边形（[polyCoords]）； }

---

这给了我一个长方形，这就是我想要的。

我知道这是一个老问题，但回答了其他人，因为这是我在研究如何做时的最高结果

我的解决方案是将data:image/svg+xml与svg一起使用，以提供一个可以通过编程生成的图标

new ol.style.Style({
    image: new ol.style.Icon({
        // svg of an equilateral triangle 25px wide at the base
        src: `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="21.65" width="25" id="canvas"><polygon points="0,0 25,0 12.5,21.65" style="fill:rgba(0,0,0,1);"></polygon></svg>')}`,
    }),
})

新ol.style.style({
图片：新ol.style.Icon({
//底部25px宽的等边三角形的svg
src:`data:image/svg+xml，${encodeURIComponent（''）}`，
}),
})

---

注意：在数据url中对svg进行编码，但对于非webkit浏览器，确实需要对其进行编码。

使用图标有什么问题？图标的大小以像素为单位指定。放大或缩小时，该大小不变。所以我不明白你为什么说“这是可行的，但我希望有一个向量在我放大/缩小时不会缩放”。好吧，使用图标是一个可能的解决方案，但是我必须为不同类型的对象制作很多图标，并为它们的状态制作不同的颜色。通过编程生成的矢量图标，我可以根据它们是否处于危险中或是否可能对其他人造成危险来改变它们的颜色。另外，我真的很想了解更多关于ol3的信息，我相信有一种更简单的方法可以做到这一点。@erilem补充了一个（可能）更好的解释，如果你感兴趣的话。关于性能：根据我的经验，光栅图标和矢量标记之间的差异在渲染数千个标记时变得非常明显。当然，这可能因客户机而异。关于您关于使用不可伸缩svg的问题，我通过为每个标记生成一个.svg文件解决了这个问题。它可以通过一个脚本来完成，但是所有的标记都必须存储在某个地方，所以这只是问题的部分解决方案。