使用map.animatedcluster在开放层中的集群:样式和层集群
使用map.animatedcluster在开放层中的集群:样式和层集群
提问于 2022-03-16 14:14:15
我需要将要在地图上显示的点与Openlayers组合起来。我正在学习http://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html的例子。
我能够更改它，使我的层是一个WFS层。在下面的图片中，我有两个层，但是，它们不是聚在一起，而是分开的。在以红色突出显示的部分中，我们可以看到绿色和橙色的组合非常接近，每个都指一层。如何对地图上显示的所有层进行群集？
几个月前，我已经写了一篇关于这个示例Openlayers: cluster with different layers的文章
另一件事，图层有一个不同的风格。在选择集群时和/或集群中只有一个点时，我希望保持这种风格。有小费吗？
编辑
// Cluster Source
var clusterSource1=new ol.source.Cluster({
distance: 60,
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:MyLAYER1&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.all
})
});
// Animated cluster layer
var clusterLayer1 = new ol.layer.AnimatedCluster({
name: 'Cluster1',
source: clusterSource1,
animationDuration: 700,
style: getStyle
});
var clusterSource2=new ol.source.Cluster({
distance: 60,
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:MyLAYER2&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
strategy: ol.loadingstrategy.all
})
});
var clusterLayer2 = new ol.layer.AnimatedCluster({
name: 'Cluster2',
source: clusterSource2,
animationDuration: 700,
style: getStyle
});
map.addLayer(clusterLayer1);
map.addLayer(clusterLayer2);谢谢
回答 3
Stack Overflow用户
发布于 2022-03-17 09:38:34
这就是我解决这个问题的方法。您将在一个特性集合中拥有来自不同来源的所有功能。每个功能都是被标记的，所以您没有不同的层。您设置了一个属性来区分您的功能。如果您想要删除一个“层”，您只需从源中删除该功能，如果有其他功能，则将其推回。希望这是你想要的。
https://jsfiddle.net/komarara/8jbzL019/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.11.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.11.0/css/ol.css">
</head>
<body>
<Button onClick="handleVisibilityLayer1()">Layer1</Button>
<Button onClick="handleVisibilityLayer2()">Layer2</Button>
<div id="map" class="map"></div>
<script type="text/javascript">
let source;
let featureCollection = [];
document.addEventListener("DOMContentLoaded", function () {
drawMap();
});
function handleVisibilityLayer1(){
for(const feature of featureCollection){
const layerId = feature.get('layer');
if(layerId === 'layer1' && source.hasFeature(feature)){
source.removeFeature(feature);
} else if(layerId === 'layer1' && !source.hasFeature(feature)){
source.addFeature(feature);
}
}
}
function handleVisibilityLayer2(){
for(const feature of featureCollection){
const layerId = feature.get('layer');
if(layerId === 'layer2' && source.hasFeature(feature)){
source.removeFeature(feature);
} else if(layerId === 'layer2' && !source.hasFeature(feature)){
source.addFeature(feature);
}
}
}
function drawMap() {
const feature1 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846162.87]),
layer: 'layer1',
});
const feature2 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846162.87]),
layer: 'layer1',
});
const feature11 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846161.87]),
layer: 'layer2',
});
const feature22 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846161.87]),
layer: 'layer2',
});
featureCollection = [feature1, feature2, feature11, feature22];
source = new ol.source.Vector({
features: featureCollection,
});
const clusterSource = new ol.source.Cluster({
source: source,
});
const styleCache = {};
const clusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
const size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff',
}),
fill: new ol.style.Fill({
color: '#3399CC',
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
},
});
const osmLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: '© OpenStreetMap',
})
});
map = new ol.Map({
target: 'map',
layers: [
osmLayer,
clusterLayer
],
view: new ol.View(),
});
map.getView().fit(source.getExtent());
}
</script>
</body>
</html>Stack Overflow用户
发布于 2022-03-17 16:51:53
我有几个层次，我可以选择一个或多个在地图上显示。在图片中，我两次，每一个都有一个不同的标签。
每个层都有一个对应的源，即WFS。
var layer 1 = new ol.layer.Vector({
source: new ol.source.Vector({
//code })
})当您单击任何点时，它会显示带有特定层信息的弹出。
我想要什么？将此信息分组以避免污染地图。我已经用传单开发了，但我不是Openlayers的。在小册子里我用了L.markerClusterGroup.layerSupport
我按照代码http://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html启动了一个测试。我甚至发布了我的初步测试代码，但是它没有对来自不同层的数据进行分组，也没有在即将到来的更改中给出顺序。
编辑如何从一个源添加特性到另一个源？没有用
// Cluster Source
var clusterSource_=new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector()
});
// Animated cluster layer
var clusterLayer_ = new ol.layer.AnimatedCluster(
{ name: 'Cluster',
source: clusterSource_,
style: getStyle
});
map.addLayer(clusterLayer_);
var teste = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:MYLAYER1&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.all
})
var features = teste.getFeatures();
alert(features.length); //this alerts '0', but there's more than 10 features!!
clusterSource_.getSource().clear();
clusterSource_.getSource().addFeatures(teste.getSource().getFeatures());Stack Overflow用户
发布于 2022-03-20 21:14:07
多层，只有一个群集源/层。我只是把所有的功能都推到一个数组中。然而，这只是一个概念的证明，在一定数量的特性中，您将得到性能问题，因此还有改进的余地。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css">
</head>
<body>
<input type="checkbox" onChange="handleLayerVisibility('layer1', this.checked)">Layer1</input>
<input type="checkbox" onChange="handleLayerVisibility('layer2', this.checked)">Layer2</Checkbox>
<div id="map" class="map"></div>
<script type="text/javascript">
let intermediateClusterSource;
const feature1 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846162.87]),
layer: 'layer2'
});
const feature2 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846162.87]),
layer: 'layer2'
});
const feature3 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846161.87]),
layer: 'layer2'
});
const feature4 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846161.87]),
layer: 'layer2'
});
const featureCollection = [feature1, feature2, feature3, feature4];
document.addEventListener("DOMContentLoaded", function () {
drawMap();
});
function handleLayerVisibility(layerId, checked){
for(const feature of featureCollection){
const id = feature.get('layer');
if(id !== layerId){
continue;
}
if(checked){
intermediateClusterSource.addFeature(feature);
} else {
intermediateClusterSource.removeFeature(feature);
}
}
}
function drawMap() {
const source1 = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection, success, failure) {
var proj = projection.getCode();
var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=application/json&srsname=' + proj;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
source1.removeLoadedExtent(extent);
failure();
}
xhr.onerror = onError;
xhr.onload = function() {
if (xhr.status == 200) {
var features = source1.getFormat().readFeatures(xhr.responseText);
for(const [index, feature] of features.entries()){
const geometry = feature.getGeometry();
if(geometry instanceof ol.geom.SimpleGeometry){
if(index < 100){
const coords = geometry.getCoordinates()[0][0][0];
if(coords && coords.length === 2){
const feat = new ol.Feature({
geometry: new ol.geom.Point(coords),
layer: 'layer1'
});
featureCollection.push(feat);
}
}
}
}
success(features);
} else {
onError();
}
}
xhr.send();
},
});
const layer1 = new ol.layer.Vector({
id: 'layer1',
source: source1,
})
const source2 = new ol.source.Vector({
features: [feature1, feature2, feature3, feature4]
})
const layer2 = new ol.layer.Vector({
id: 'layer2',
source: source2,
visible: false,
})
intermediateClusterSource = new ol.source.Vector();
const clusterSource = new ol.source.Cluster({
source: intermediateClusterSource,
});
const styleCache = {};
const clusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
const size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff',
}),
fill: new ol.style.Fill({
color: '#3399CC',
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
},
});
const osmLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: '© OpenStreetMap',
})
});
map = new ol.Map({
target: 'map',
layers: [
osmLayer,
layer1,
layer2,
clusterLayer
],
view: new ol.View({
projection: 'EPSG:3857',
zoom: 1,
center: [0,0],
}),
});
}
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71498622
复制相关文章
相似问题
腾讯云开发者
