Javascript 我们可以使用html标签和css来设计openlayers中的功能吗?
我在OpenLayers 5中有一个多边形功能。它有一些随机id,我需要在稍微右对齐的多边形中心显示 我使用了Javascript 我们可以使用html标签和css来设计openlayers中的功能吗?,javascript,openlayers,openlayers-3,openlayers-5,Javascript,Openlayers,Openlayers 3,Openlayers 5,我在OpenLayers 5中有一个多边形功能。它有一些随机id,我需要在稍微右对齐的多边形中心显示 我使用了ol.style.Text()样式在多边形上显示id。我可以使用类的offsetX和offsetY选项来管理对齐,但是如何在html元素中显示文本或模拟文本,因为ol.style.text()只接受文本数据 openlayers中的覆盖肯定会解决这个问题,我可以使用几何体上的getInteriorPoint()获得多边形的中点,但我不想使用覆盖,因为地图上可能有大量多边形,为每个多边形添
ol.style.Text()
样式在多边形上显示id。我可以使用类的offsetX
和offsetY
选项来管理对齐,但是如何在html元素中显示文本或模拟文本,因为ol.style.text()
只接受文本数据
openlayers中的覆盖肯定会解决这个问题,我可以使用几何体上的getInteriorPoint()
获得多边形的中点,但我不想使用覆盖,因为地图上可能有大量多边形,为每个多边形添加覆盖会降低性能和内存利用率
以下是我试图实现的预期输出:
这是我的密码:
还要检查我做了什么来打开和关闭Id,并说明这是否可以改进。ID可以根据缩放级别打开和关闭。您可以在画布元素中绘制背景并以图标样式使用,而不用CSS。并使用样式功能设置多边形内部点的样式,而无需创建更多特征:
var canvas = document.createElement("canvas");
canvas.width = ??;
canvas.height = ??;
var ctx = canvas.getContext("2d");
// draw an arraw and rounded box
.....
.....
var iconUrl = canvas.toDataURL();
var offStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'green',
width: 1.5
})
});
var onStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0)'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1.5
})
});
var styleFunction = function (feature, resolution) {
if (off) { // or use (resolution > ????)
return offStyle;
else {
var styles = [onStyle];
if (feature.getGeometry().getType == 'Polygon') {
styles.push( new ol.style.Style({
geometry: feature.getGeometry().getInteriorPoint(),
image: new ol.style.Icon({
src: iconUrl,
// options to anchor the icon
....
}),
text: new ol.style.Text({
scale: 1,
text: feature.get('.....'),
font: 'normal 10px FontAwesome',
fill: new ol.style.Fill({
color: 'black'
}),
}),
zIndex: 100
}));
}
return styles;
}
}
通过仅为当前视图范围内的要素创建覆盖,并且仅为特定缩放级别创建覆盖,您完全可以使用覆盖。这将使创建的覆盖的数量保持较低,从而保持良好的性能。好的,您是否知道覆盖的任何替代品,如直接使用样式功能。