在 Open Layers 3 中向矢量源添加一个圆圈答案

【问题标题】：Adding a circle to a vector source in Open Layers 3在 Open Layers 3 中向矢量源添加一个圆圈
【发布时间】：2015-08-18 09:45:48
【问题描述】：

我的代码是这样的：

var circle = new ol.style.Circle({
                radius: 5,
                fill: null,
                stroke: new ol.style.Stroke({
                    color: 'rgba(255,0,0,0.9)',
                    width: 3
                })
            });
var circleFeature = new ol.Feature(circle);

我试过了

circle.setCoordinates([x,y]);

和

circleFeature.setCoordinates([x,y]);

但每次我得到

对象不支持属性或方法“setCoordinates”。

我想我没有将 setCoordinates 应用于正确的对象。我需要使用 Circl 复制的来自或自己的应用程序的示例代码只是使用 LineString 而不是 Circle，但到目前为止我还没有找到如何将它与 Circle 一起使用。

【问题讨论】：

看起来我遇到的问题之一是我使用的是 ol.style.Circle 而不是 ol.geom.Circle。

标签： javascript coordinates geometry layer openlayers-3

【解决方案1】：

应该是：

var circle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: null,
        stroke: new ol.style.Stroke({
            color: 'rgba(255,0,0,0.9)',
            width: 3
        })
    })
});

var feature = new ol.Feature(
    new ol.geom.Point([0, 0])
);
feature.setStyle(circle);
vectorSource.addFeature(feature);

因此，您将样式应用于该功能，如果您想设置坐标，您可以使用：

feature.getGeometry().setCoordinates(coordinate);

A Fiddle demo.

【讨论】：