import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Fill, RegularShape, Stroke, Style} from 'ol/style.js';
import Icon from 'ol/style/Icon.js'
import Vectorlayer from 'ol/layer/Vector.js'
import Feature from 'ol/Feature.js'
import Vector from "ol/source/Vector";
import Cluster from "ol/source/Cluster";
import Circle from "ol/style/Circle";
import Text from "ol/style/Text";
/*离散聚合点1*/
static createLayer(){
webgissource.clusterpointdate = new Vector();
webgissource.clusterSource = new Cluster({
distance:40,
source: webgissource.clusterpointdate
});
var styleCache = {};
webgissource.clusterVectorLayer = new Vectorlayer({
source: webgissource.clusterSource,
zIndex:999,
style: function (feature, resolution) {
//当前聚合标注数据源的要素大小
var size = parseInt(feature.get('features').length);
//定义样式
var style = styleCache[size];
//如果当前样式不存在则创建
// if(0<size && size<=5){
// var src="static/img/ld1.png"
// }else if(5<size && size<=10){
// var src="static/img/ld2.png"
// }else if(10<size && size<=15){
// var src="static/img/ld3.png"
// }else if(15<size && size<=20){
// var src="static/img/ld4.png"
// }else if(20<size ){
// var src="static/img/ld5.png"
// }
if(map.getView().getZoom()==17){
style = [
//初始化样式
new Style({
//点样式
fill: new Fill({
color: 'rgba(0,225,255,0.1)'
}),
stroke: new Stroke({
color: '#00e1ff',
width: 3
}),
image: new Circle({
radius: 6,
fill: new Fill({
color: '#4271ff'
})
}),
// image: new Circle({
// radius: 8,
// fill: new Fill({
// color: 'rgb(0,155,29)'
// })
// })
})
];
styleCache[size] = style;
}else{
//if (!style) {
style = [
//初始化样式
new Style({
//点样式
fill: new Fill({
color: 'rgba(0,225,255,0.1)'
}),
stroke: new Stroke({
color: '#00e1ff',
width: 3
}),
image: new Circle({
radius: size==1?6:14,
fill: new Fill({
color: '#4863ff'
})
}),
//文本样式
text: new Text({
//文本内容
text: size==1?"":size.toString(),
//填充
font: '14px',
fill: new Fill({
color: 'rgb(255,255,255)'
}),
offsetY: 0,
})
})
];
styleCache[size] = style;
//}
}
return style;
}
});
map.addLayer(webgissource.clusterVectorLayer)
}
static clusterVectorLayer(data){
var points=new Point([x,y]);
var iconFeature = new Feature({
geometry:points,
attributions:data
})
webgissource.clusterpointdate.addFeature(iconFeature)
}
openlayers 5.0 离散聚合点
最新推荐文章于 2023-04-09 15:48:58 发布