Как пометить объекты в openlayers без использования оверлеев - PullRequest
Новая
       32

Как пометить объекты в openlayers без использования оверлеев

0 голосов
/ 03 июня 2019

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

Ссылки на ярлыки и наложения:

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

Наложения в открытых слоях

1 Ответ

4 голосов
/ 03 июня 2019

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

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 += '
' + ' ' + local + ' ';
    }
    content.innerHTML = '' + text + '
';overlay.setPosition (координаты);} 
<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>
...