OpenLayers 5在添加样式时不显示带有特征的矢量图层答案

【问题标题】：OpenLayers 5 not displaying vector layer with feature when adding styleOpenLayers 5在添加样式时不显示带有特征的矢量图层
【发布时间】：2019-04-15 21:51:01
【问题描述】：

我一直在尝试在 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 也会出现同样的问题。

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

提前非常感谢！

【问题讨论】：

标签： openlayers openlayers-5

【解决方案1】：

请使用：

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

【讨论】：

非常感谢！不过，您能否详细说明使用 ol.geom.Circle 类添加圆形作为特征与此之间的区别？
描边样式至少需要两个点（坐标不同）来绘制一个特征。此要求未在点要素处给出。如果默认情况下您没有定义样式，openlayers 会使用与点特征相关的圆形样式。
圆形样式不能单独使用，它是样式的图像部分。