javascript - 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

您可以将自定义符号绘制到 Canvas 上，并将其用作图标图像。 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],
  })
});