OpenLayers 3中的自定義矢量形狀標記

Question

我有一張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 +（常數*分辨率）更好的解決方案？ 使用向量與png有任何顯着的性能差異嗎？ 謝謝

編輯：經過與我的幾個同事的咨詢，我基本上試圖有這個http://openlayers.org/en/v3.5.0/examples/regularshape.html但具有自定義形狀。

EDIT2：實際上更像是這樣的http://dev.openlayers.org/examples/graphic-name.html '命名符號“閃電”，“矩形”和“教堂”是用戶定義的。

Answer 1

這就是我完成它的方式，它與原版相似但沒有我必須弄清楚坐標應該是什么，我只提供像素的大小，讓地圖計算其余部分。

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

這給了我一個矩形，這就是我想要的。

Answer 2

我知道這是一個老問題，但回答其他人，因為這是最重要的結果，而我正在研究如何做到這一點。

我的解決方案是使用數據：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>')}`,
    }),
})

注意：您不需要在數據URL中使用base64編碼svg，但是您需要將encodeURIComponent（）用於非webkit瀏覽器。