[英]Paying Attention to Overlapping in Text Marking when using openLayers ol.style.Style by javascript?
The vector layer is geojson format by geoserver server. 向量层由geoserver服务器采用geojson格式。 When I use ol.style.Text
to marking the volume_ab
filled, the overlapping occured. 当我使用ol.style.Text
标记volume_ab
填充时,发生了重叠。
textRender_ab = feature.get("volume_ab");
textRender_ba = feature.get("volume_ba");
//定义默认显示样式
var defaultStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#8B8B7A',
width: 5
}),
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'black'
})
})
})
var level = feature.get("them_vc");
// console.log(feature.get("them_vc").length);
// console.log(level);
if (!level && !vcLevels[level]) {
return defaultStyle;
}
for (var key in vcLevels) {
if (level == key) {
style_ab = new ol.style.Style({
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'black'
})
}),
stroke: new ol.style.Stroke({
color: vcLevels[level],
width: vcWideth[level]
}),
text: new ol.style.Text({
font: "12px YaHei",
text: textRender_ab.toString(),
fill: new ol.style.Fill({
color: 'black'
}),
rotation: 0,
scale: 1,
offsetX: 10,
offsetY: 10
})
});
style_ba = new ol.style.Style({
text: new ol.style.Text({
font: "12px YaHei",
text: textRender_ba.toString(),
fill: new ol.style.Fill({
color: 'black'
}),
rotation: 0,
scale: 1,
offsetX: -10,
offsetY: -10
})
});
return [style_ab, style_ba];
You would need to create a cluster layer and use that to build up a single text string separated by a newline (or a space if you prefer) for labels which would otherwise overlap. 您将需要创建一个群集层,并使用它来构建单个文本字符串,该文本字符串用换行符(或空格,如果需要)分隔,以防标签重叠。 Style the resulting text in the cluster layer, and style only the geometry in the main layer. 在簇图层中设置结果文本的样式,并在主图层中仅设置几何的样式。 The code would look something like this: 代码看起来像这样:
var layerStyle = function(feature) {
var defaultStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#8B8B7A',
width: 5
}),
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'black'
})
})
});
var level = feature.get("them_vc");
if (!level || !vcLevels[level]) {
return defaultStyle;
}
for (var key in vcLevels) {
if (level == key) {
var style_ab = new ol.style.Style({
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'black'
})
}),
stroke: new ol.style.Stroke({
color: vcLevels[level],
width: vcWideth[level]
})
});
return [style_ab];
}
}
}
var clusterStyle = function(cluster) {
var text_ab = '';
var text_ba = '';
cluster.get('features').forEach( function(feature) {
var level = feature.get("them_vc");
if (level && vcLevels[level]) {
text_ab += feature.get("volume_ab").toString() + '\n';
text_ba += feature.get("volume_ba").toString() + '\n';
}
});
var style_ab = new ol.style.Style({
text: new ol.style.Text({
font: "12px YaHei",
text: text_ab,
fill: new ol.style.Fill({
color: 'black'
}),
rotation: 0,
scale: 1,
offsetX: 10,
offsetY: 10
})
});
var style_ba = new ol.style.Style({
text: new ol.style.Text({
font: "12px YaHei",
text: text_ba,
fill: new ol.style.Fill({
color: 'black'
}),
rotation: 0,
scale: 1,
offsetX: -10,
offsetY: -10
})
});
return [style_ab, style_ba];
}
var mainLayer = new ol.layer.Vector({
source: layerSource,
style: layerStyle
});
var clusterLayer = new ol.layer.Vector({
source: new ol.source.Cluster({
distance: 10,
source: layerSource,
geometryFunction: function(feature) {
switch (feature.getGeometry().getType()) {
case 'Point':
return feature.getGeometry();
case 'LineString':
return new ol.geom.Point(feature.getGeometry().getCoordinateAt(0.5));
case 'Polygon':
return feature.getGeometry().getInteriorPoint();
default:
}
}
}),
style: clusterStyle
});
添加语句declutter: true
在每个矢量层之后为declutter: true
,它可以完美工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.