Open Layer + Geo Json: разместить метку в многоугольнике - PullRequest
Новая
       52

Open Layer + Geo Json: разместить метку в многоугольнике

0 голосов
/ 08 марта 2020

Я пытаюсь на некоторое время разместить надписи в моей карте Open Layers. 

<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), но он слишком сложен для меня. Я не понимаю, где в этом примере они устанавливают соединение с файлом с именами, связанными с многоугольником.

И я считаю, что это решение устарело: открытый слой: отображение метки из свойств в geo json 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 */ },

Понятия не имею. Я надеюсь, что один из вас может дать мне шаг в правильном направлении.

1 Ответ

0 голосов
/ 08 марта 2020

Если ваш стиль наведения используется всеми полигонами, вам понадобится функция стиля для установки значения текста

В этом примере 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;
  }
...