当前位置:网站首页>openlayers 5.0 离散聚合点
openlayers 5.0 离散聚合点
2022-04-23 19:08:00 【Gis烤羊腿真好吃】
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)
}
版权声明
本文为[Gis烤羊腿真好吃]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_38190600/article/details/102488423
边栏推荐
- 从技术体系到商业洞察,中小研发团队架构实践之收尾篇
- Esp32 (UART 485 communication) - 485 communication of serial port (3)
- ESP32 LVGL8. 1 - input devices (input devices 18)
- MySQL学习第五弹——事务及其操作特性详解
- Partage de la conception de l'alimentation électrique de commutation et illustration des compétences en conception de l'alimentation électrique
- Yyds dry goods inventory stringprep --- Internet string preparation
- ESP32 LVGL8. 1 - roller rolling (roller 24)
- c1000k TCP 连接上限测试
- mysql_linux版本的下载及安装详解
- Raspberry pie 18b20 temperature
猜你喜欢

Raspberry pie 18b20 temperature

Chondroitin sulfate in vitreous

SQL常用的命令

从技术体系到商业洞察,中小研发团队架构实践之收尾篇

网络协议之:sctp流控制传输协议

Résolution: cnpm: impossible de charger le fichier... Cnpm. PS1 parce que l'exécution de scripts est désactivée sur ce système

Practice of Druid SQL and security in meituan review

redis优化系列(三)解决主从配置后的常见问题

为何PostgreSQL即将超越SQL Server?

ESP32 LVGL8. 1 - textarea text area (textarea 26)
随机推荐
ESP32 LVGL8. 1 - calendar (calendar 25)
Chondroitin sulfate in vitreous
Resolution: cnpm: unable to load file \cnpm. PS1, because running scripts is prohibited on this system
Scrollto and scrollby
c1000k TCP 连接上限测试
Nacos作为服务注册中心
Sword finger offer II 116 Number of provinces - spatial complexity O (n), time complexity O (n)
The corresponding permissions required to automatically open the app in the setting interface through accessibility service
Android Development: the client obtains the latest value in the database in real time and displays it on the interface
Tencent cloud GPU best practices - remote development training using jupyter pycharm
Advanced transfer learning
解决:cnpm : 無法加載文件 ...\cnpm.ps1,因為在此系統上禁止運行脚本
SSDB Foundation
Implementation of TCP UDP communication with golang language
c#:泛型反射
为何PostgreSQL即将超越SQL Server?
Use of kotlin collaboration in the project
std::stoi stol stoul stoll stof stod
该买什么设备,Keysight 给你挑好了
Screen right-click menu in souI