OpenLayers：如何设置 GeoJson 属性的样式答案

【问题标题】：OpenLayers: how to style GeoJson propertiesOpenLayers：如何设置 GeoJson 属性的样式
【发布时间】：2023-03-05 00:59:01
【问题描述】：

您好，我需要在 OpenLayers 地图中 GeoJson 图层的每个点下方显示一些文本。我有一个 GeoJson 源，我可以在地图上的正确坐标处绘制点。我还想在 Point 下方绘制一些文本，这些文本来自一个属性。

我的 GeoJson 是这样的：

{ "type": "FeatureCollection",
"features": [
  { "type": "Feature",
    "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
    "properties": {"name": "example text"}
    },
  {... other features ... }
   ]
 }

而且我需要在 Point 下方显示文本“示例文本”。该怎么做？

【问题讨论】：

标签： openlayers geojson

【解决方案1】：

我已经修改了http://openlayers.org/en/latest/examples/geojson.html?q=GeoJSOn 示例来演示如何执行此操作。我已经修改了GeoJSON 数据以添加一些属性。

由于您希望在特性的属性中声明文本，因此需要根据特性处理样式。

相关代码：

var styleFunction = function(feature) {

        var text = new ol.style.Style({
            text :new ol.style.Text({
                text: feature.getProperties().name,**//this is where the property value used**
                font: '12px Calibri,sans-serif',
                weight:'Bold',
                fill: new ol.style.Fill({ color: '#000' }),
                stroke: new ol.style.Stroke({
                    color: '#D3D3D3', width: 10
                }),
                offsetX: 30,
                offsetY: -25,
                rotation: 0
            })
        });
        return [styles[feature.getGeometry().getType()],text];
      };

创建一个ol.style.Text 对象并将该对象附加到ol.Feature 样式属性（一个用于特征样式，另一个用于标签）

我在 plunker 中创建了一个工作代码。通过这个link。

【讨论】：