如何在不使用叠加层的情况下标记 openlayers 中的特征
How to label the features in openlayers without using overlays
我知道在 openlayers 中添加叠加层并将它们用作传递某些信息的工具提示,但我们必须管理这些事情才能完成。
另一方面,Leaflet 提供了 bindLabel()
在地图视口中显示工具提示。
我的问题是它是否可以在没有覆盖的 openlayers 中完成,因为随着覆盖数量的增加,地图的渲染速度开始变慢。 Overlays
只能在一个世界显示。如果我们想在地图的其他世界显示呢
引用标签和叠加层:
在样式中包含文本样式以显示特征标签。您可以使用跟随指针的单个叠加层作为工具提示。
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>' + ' ' + local + ' ';
}
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 中添加叠加层并将它们用作传递某些信息的工具提示,但我们必须管理这些事情才能完成。
另一方面,Leaflet 提供了 bindLabel()
在地图视口中显示工具提示。
我的问题是它是否可以在没有覆盖的 openlayers 中完成,因为随着覆盖数量的增加,地图的渲染速度开始变慢。 Overlays
只能在一个世界显示。如果我们想在地图的其他世界显示呢
引用标签和叠加层:
在样式中包含文本样式以显示特征标签。您可以使用跟随指针的单个叠加层作为工具提示。
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>' + ' ' + local + ' ';
}
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>