Question

我知道要在openlayers中添加叠加，并将其用作传递一些信息的工具提示，但是我们必须进行管理以完成信息。另一方面，Leaflet提供了bindLabel()来在地图的视口中显示工具提示。我的问题是，它可以在没有覆盖层的openlayers中完成，因为随着覆盖层数量的增加，地图的渲染速度开始变慢。 Overlays只能在一个世界中显示。如果我们想在地图的其他世界中显示该怎么办？

参考标签和叠加层：

Leaflet labels for features

Overlays in openlayers

Answer 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 = '&nbsp;' + name + '&nbsp;';
    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>

如何在不使用叠加层的情况下在openlayers中标记功能

1 个答案: