Как пометить функции в openlayers без использования наложений

Я знаю о добавлении оверлеев в openlayers и использовании их в качестве всплывающих подсказок для передачи некоторой информации, но мы должны управлять вещами, чтобы это сделать. Листовка, с другой стороны, предоставила bindLabel() для отображения всплывающих подсказок в окне просмотра карты. Мой вопрос в том, можно ли это сделать в openlayers без оверлеев, потому что по мере роста количества оверлеев карта начинает замедляться при рендеринге. Overlays может отображаться только в одном мире. Что, если мы хотим отобразить его в других мирах карты.

Ссылки на этикетки и накладки:

Ярлыки листовок для функций

Оверлеи в openlayers

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 321
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Включите стиль текста в стиль, чтобы отображать метки на объектах. Вы можете использовать одно наложение, которое следует за указателем в качестве всплывающей подсказки.

var fill = new ol.style.Fill({
  color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
  color: '#3399CC',
  width: 1.25
});
var styles = [
  new ol.style.Style({
    image: new ol.style.Circle({
      fill: fill,
      stroke: stroke,
      radius: 5
    }),
    fill: fill,
    stroke: stroke,
    text: new ol.style.Text({
      font: '18px Calibri,sans-serif',
      textBaseline: 'top',
      offsetY: 6,
      backgroundFill: new ol.style.Fill({
        color: 'rgba(255,204,51,0.5)'
      }),
      backgroundStroke: new ol.style.Stroke({
        width: 1,
        color: 'rgba(0,0,0,0.5)'
      }),
      padding: [0,2,0,2]
    })
  })
];

  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    layers: [new ol.layer.VectorTile({
      source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
      }),
      style: function(feature) {
        var type = feature.get('layer');
        if (type == 'Coastline' || type.indexOf('City') == 0) {
          styles[0].getText().setText(feature.get('_name') || feature.get('_name_global'));
          return styles;
        }
      },
      declutter : true
    })]
  });

var content = document.createElement('div');
content.style.overflow = "auto";
content.style.height = "90px";
var popup = document.createElement('div');
popup.className = "ol-unselectable"
popup.style.zindex = "1";
popup.style.position = "absolute";
popup.style.background = "rgba(224,148,94,1)";
popup.style.font = "18px Calibri,sans-serif";
popup.style.color = "white";
 
popup.appendChild(content);

var overlay = new ol.Overlay({
    element: popup,
   // positioning: 'bottom-center',
    offset: [0, -95],
    autoPan: false
});
map.addOverlay(overlay);

map.once('rendercomplete', function(){
  showInfo(ol.proj.fromLonLat([72.825833, 18.975]));
});

map.on('pointermove', function(event){ showInfo(event.coordinate); });

function showInfo(coordinate) {
    var features = map.getFeaturesAtPixel(map.getPixelFromCoordinate(coordinate), {
        hitTolerance: 2
    });
    if (!features) {
        overlay.setPosition(undefined);
        return;
    }
    var feature = features[0];
    var name = feature.get('_name') || feature.get('_name_global');
    if (!name) {
        overlay.setPosition(undefined);
        return;
    }
    var text = ' ' + name + ' ';
    var local = feature.get('_name_local')
    if (local && local != name) {
      text += '<br>' + '&nbsp;' + local + '&nbsp;';
    }
    content.innerHTML = '<pre>' + text + '</pre>';
    overlay.setPosition(coordinate);
}
<script src = "https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href = "https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel = "stylesheet"/>
<div id = "map" class = "map"></div>

Ваш ответ частично правильный. Что, если я хочу отображать имена во всплывающей подсказке при загрузке карты, не требуя наведения для их отображения.

capnam 03.06.2019 15:02

Есть ли способ добавить цвет фона в ol.style.Text() или любые другие свойства css. На официальном сайте ссылок не нашел.

capnam 03.06.2019 15:03

Параметры backgroundFill, backgroundStroke и padding определяют стиль фона этикетки. Если вы хотите установить наложение при запуске, функции showInfo нужно будет передать координату вместо события.

Mike 03.06.2019 16:24

Другие вопросы по теме