添加样式时，OpenLayers 5 不显示具有特征的矢量图层

Question

我一直在尝试在 OpenLayers 5 中的地图上放置一个简单的标记（建模为 ol.geom.Point）并设置样式。我创建了一个包装此 ol.geom.Point 的功能，然后创建了一个使用它的 VectorSource，然后用该源作为源实例化了一个 VectorLayer，如以下代码所示：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';

let markerFeature = new Feature({
    geometry: new Point([0, 10000000 ]),
});
let markerSource = new VectorSource({
    features: [markerFeature],
});
let markerLayer = new VectorLayer({
    source: markerSource,
});

let markerView = new View({
    center: [0, 0],
    zoom: 2,
});

new Map({
    target: 'map-container',
    layers: [
        new VectorLayer({
            source: new VectorSource({
                format: new GeoJSON(),
                url: './data/countries.json',
            }),
        }),
        markerLayer
    ],
    view: markerView
});

这符合我的预期：在坐标 [0, 0] 上绘制一个点。但是，当我向包含红色笔划的 markerLayer 对象添加一个简单的样式时，OpenLayers 似乎什么也没画：

let markerLayer = new VectorLayer({
    source: markerSource,
    style: new Style({
        stroke: new Stroke({color: 'red'}),
    }),
});

我使用 yarn 来运行这个项目。我没有编译错误。我在浏览器控制台中也没有收到任何错误。同样的问题出现在 Firefox、Chrome 和 Edge.

我想知道以前是否有人运行遇到过与这个看似微不足道的任务类似的问题。有没有人对可能是罪魁祸首有什么建议？

非常感谢！

Answer 1

请使用：

new ol.style.Circle({
   radius: 10,
   stroke: new ol.style.Stroke({
     color: "red",
     width: 2
   }),
   fill: new ol.style.Fill({
     color: "blue"
   })
 })

添加样式时，OpenLayers 5 不显示具有特征的矢量图层

OpenLayers 5 not displaying vector layer with feature when adding style

openlayers

openlayers-5