项目中出现的features数量多了。会显示的有些混乱。在地图中添加聚合效果,来解决这个问题。
最终解决效果
由于图片5M限制,录制太难了,时间达到3s以上就超标了。帧数调低了。
我的最终要求是缩放级别大于7 显示点要素,小于则显示聚合要素,在百度上参考别人的例子,发现没什么人有这个需求,于是就从zoom 下手。来达到切换效果。
mounted() {
const { findLayer, wfsVectorSource } = this;
map.on("moveend", e => {
const zoom = map.getView().getZoom(); //获取当前地图的缩放级别
if (zoom >= 7) {
findLayer('id', 'cluster').setSource(wfsVectorSource);
} else {
const layer = new ol.source.Cluster({distance: 40, source: wfsVectorSource});
findLayer('id', 'cluster').setSource(layer);
}
});
},
methods: {
findLayer(attr, val) {
const layers = map.getLayers().getArray();
return layers.find(i => i.get(attr) === val);
},
},
computed: {
wfsVectorSource() {
return new ol.source.Vector({
format: new ol.format.GeoJSON(),
projection: EPSG4326,
url: extent => window.base_url.wfs_base_source_url,
strategy: ol.loadingstrategy.bbox
});
},
styleFunc() {
return feature => {
var size = feature.get("features") ? feature.get("features").length : Number;
var type = feature.get("使用状态");
var label = feature.get("装备名称");
var font = new ol.style.Text({
font: '12px Calibri,sans-serif',
text: label,
fill: new ol.style.Fill({ color: 'white' }),
offsetY: -15,
stroke: new ol.style.Stroke({ color: 'red', width: 2 }),
});
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 10],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
scale: 1,
src: require('@/assets/img/img/marking.png')
}),
stroke: new ol.style.Stroke({ color: "white", width: 1 }),
// text: feature.get("features") ? new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: "#fff" }) }) : font
// image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: "#3885ff", opacity: 1 }) }),
// stroke: new ol.style.Stroke({ color: "white", width: 1 }),
text: feature.get("features") ? new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: "#fff" }) }) : ''//font
});
};
},
}