的OpenLayers 3 - 創建類似的OpenLayers自定義符號2 - > OpenLayers.Renderer.symbol.anySymbol

Question

在Openlayers v2我可以添加喜歡的符號：

OpenLayers.Renderer.symbol.pointToIcon = [100, 70, 20, 50, 42, 70, 20, 90]; 

如何我的OpenLayers 3做呢？

在openlayers 3我可以使用此功能：

var starSymbol = new ol.style.RegularShape({ 
    points: 4, 
    opacity: .5, 
    radius: 10, 
    radius2: 10 * .5, 
    angle: 130, 
    fill: new ol.style.Fill({ 
     color: "blue" 
    }), 
    stroke: new ol.style.Stroke({ 
     color: "red", 
     width: 1 
    }) 
}); 

我可以做其他的數字，但我不能做如下圖所示。因爲圖標的顏色是固定的

new ol.style.Style({ 
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ 
     anchor: [0.5, 46], 
     anchorXUnits: 'fraction', 
     anchorYUnits: 'pixels', 
     opacity: 0.75, 
     src: 'data/icon.png' 
    })) 
}) 

，我不能用我需要的顏色：

另外，我不使用「圖標」等。

我真的很感激，如果你幫我。

Answer 1

您可以將自定義符號繪製到畫布上，並將其用作圖標圖像。 OpenLayers爲此提供了一個非常好的API。你可能想看看這個例子：http://openlayers.org/en/v3.12.1/examples/earthquake-custom-symbol.html。

針對您的特殊符號，代碼看起來是這樣的：

var canvas = document.createElement('canvas'); 
var render = ol.render.toContext(canvas.getContext('2d'), 
    {size: [50, 45]}); 
render.setFillStrokeStyle(
    new ol.style.Fill({ color: 'red' }), 
    new ol.style.Stroke({ color: 'black' })); 
render.drawPolygonGeometry(new ol.geom.Polygon(
    [[[50, 35], [10, 25], [21,35], [10, 45], [50, 35]]])); 
var style = new ol.style.Style({ 
    image: new ol.style.Icon({ 
    img: canvas, 
    imgSize: [canvas.width, canvas.height], 
    }) 
});