如何在 OpenLayers 3 中插入半圆形样式标记

【问题标题】：How to insert half circle style marker in OpenLayers 3如何在 OpenLayers 3 中插入半圆形样式标记
【发布时间】：2016-07-29 16:51:27
【问题描述】：

是否可以插入如下半圆形？

我想将它用作矢量点标记。

RegularShape 接近我的意图，但它似乎只适用于“常规形状”。

我还发现了一个使用Icon 的示例，它看起来非常有用，并且我可以使用多边形实现类似的结果。有没有更聪明的办法？

使用 Point 代替 Polygon 并遮盖另一半怎么样？谢谢。

【问题讨论】：

您是如何使用RegularShape 实现的？
对不起，我的意思是Icon...谢谢你指出我的错误！我也编辑了问题。

标签： javascript openlayers-3

【解决方案1】：

就像在您找到的example 中一样，您可以创建一个画布并将其用作icon 样式的img：

var canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 4;
var radius = canvas.width / 4;
var startingAngle = Math.PI / 2;
var endingAngle = -Math.PI / 2;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle,
    endingAngle, counterclockwise);
context.fillStyle = '#bada55';
context.fill();
style = new ol.style.Style({
  image: new ol.style.Icon({
    img: canvas,
    imgSize: [size, size]
  })
});

我创建了一个JSFiddle，它显示了上面的代码。

圈子创建代码基于How to draw bottom half of a circle in canvas的回答。

【讨论】：

只是一个很棒的演示！