Open Layer + GeoJson：在多边形中放置标签

Question

我尝试了一段时间以将标签放入“开放层”地图中。

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js">

我设法制作了一个用红色填充的多边形的地图。当您将鼠标悬停在多边形上时；多边形变成绿色。现在，我希望它还将区域名称显示为要显示的文本标签。只需在该多边形的中心即可。

我尝试过的事情：我找到了这个示例（https://openlayers.org/en/latest/examples/vector-labels.html），但对我来说太复杂了。我不明白在此示例中它们在何处使用与多边形相关的名称连接到文件。

而且我认为此解决方案已过时：open layer: display a label from properties in geojson file

下面是hoverStyle，当您将鼠标悬停在其上方时，该区域将变为绿色：

in index.html under <script> 

var hoverStyle = new ol.style.Style({
    fill: new ol.style.Fill({
    color: 'rgba(0, 255, 0, 0.6)' // green
    }),
    stroke: new ol.style.Stroke({
    width: 3,
    color: 'rgba(0, 0, 0, 1)' // black
    }),

//Something with the Labels here? : 

    text: new ol.style.Text({
    text: feature.get('Area_Name'), *//I believe I have to make the connection to the Feature Area_Name here*
    align: 'center',
    weight: 'normal',
    placement: 'line',
    overflow: 'false',
    color: 'rgba(0, 0, 0, 1)' // black
    })

下面是具有功能和几何的json文件的第一行：

in the file: PS2019.json

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::28992" } },
"features": [

{ "type": "Feature", "properties": { "Area_Name": "Amsterdam", /* more attributes of the Polygon and the polygon geometry */ },

我已经不知道了。我希望你们中的一个可以给我朝正确方向迈出的一步。

Answer 1

如果您的悬停样式由所有多边形共享，则需要使用样式功能来设置文本值

在此示例中，您将看到https://openlayers.org/en/latest/examples/vector-layer.html

  style: function(feature) {
    style.getText().setText(feature.get('name'));
    return style;
  }

和

  style: function(feature) {
    highlightStyle.getText().setText(feature.get('name'));
    return highlightStyle;
  }

您将需要

  style: function(feature) {
    hoverStyle.getText().setText(feature.get('Area_Name'));
    return hoverStyle;
  }