OpenLayers:如何设置GeoJson属性的样式

时间:2017-03-28 07:34:43

标签: openlayers geojson

您好我需要在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下面显示文本“example text”。怎么做?

1 个答案:

答案 0 :(得分: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