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

Question

是否可以像下面这样插入半圆形？

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

RegularShape 接近我的意图，但它似乎只适用于 "regular shapes"。

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

使用点而不是多边形并遮盖另一半怎么样？谢谢

Answer 1

就像您发现的 example 一样，您可以创建一个 canvas 并将其用作 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 的回答。

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

How to insert half circle style marker in OpenLayers 3

javascript

openlayers-3

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

How to insert half circle style marker in OpenLayers 3

javascript

openlayers-3

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