【GIS小案例】点聚合效果的实现
2024-04-17 08:09:35
1，效果图
2，实现代码
<script>var viewer = new Cesium.Viewer('cesiumContainer');viewer.scene.open("http://www.supermapol.com/realspace/services/3D-SampleCodeForFan20200420/rest/realspace");var points = getPoints();var pointEntities = [];for (var i = 0; i < points.length; i++){var lng = points[i][0];var lat = points[i][1];var entity = new Cesium.Entity({id: "marker" + i,position : Cesium.Cartesian3.fromDegrees(lng, lat),billboard :{image : 'image/location4.png',width: 32, // 宽高必须设置，否则首次无法聚合height: 38,heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM}})pointEntities.push(entity);}var dataSourceMap= new Map();var dataSource = new Cesium.CustomDataSource("cluster");viewer.dataSources.add(dataSource);for(var i = 0;i < pointEntities.length;i++ ) {dataSource.entities.add(pointEntities[i])}var pixelRange = 25;var minimumClusterSize = 5;var enabled = true;dataSource.clustering.enabled = enabled;dataSource.clustering.pixelRange = pixelRange;dataSource.clustering.minimumClusterSize = minimumClusterSize;var removeListener;var singleDigitPins = new Array(5);for (var i = 0; i < singleDigitPins.length; ++i) {singleDigitPins[i] = "image/cluster/" + (i + 5) + ".png";}customStyle();dataSourceMap.set(name,dataSource);function customStyle() {if (Cesium.defined(removeListener)) {removeListener();removeListener = undefined;} else {removeListener = dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {cluster.label.show = false;cluster.billboard.show = true;cluster.billboard.id = cluster.label.id;cluster.billboard.verticalOrigin =Cesium.VerticalOrigin.BOTTOM;var numArr = [1000, 940, 880, 820, 760, 700, 640, 580, 520,460, 400, 340, 280, 220, 160, 100, 90, 80, 70, 60, 50,40, 30, 20, 10, 5];for (var i = 0; i < numArr.length ; i++){var num = clusteredEntities.length;if (num >= 5 && num < 10){cluster.billboard.image =singleDigitPins[num - 5];break;}if (num >= numArr[i]){cluster.billboard.image = "image/cluster/" + numArr[i] + ".png";break;}}});}}function getPoints() {var points = [[116.400772400405,40.022863398376],[116.399490142569,40.022585773106],[116.399620317977,40.0242508926839],[116.40160598615,40.0221184739456],[116.399907509393,40.0219958104597],[116.400724697204,40.0239687520269],[116.402165778436,40.0253141887999],[116.400885324119,40.0256431969207],[116.40040751963,40.024956450967],[116.398288033439,40.0261770145041],[116.401376908282,40.0274393415336],[116.402243992462,40.0268989686679],[116.400432185104,40.0264341279424],[116.399332130386,40.0257719737298],[116.397341529053,40.0275015031923],[116.398428394004,40.0283268624636],[116.399612884373,40.027652650256],[116.399064651967,40.027268840315],[116.401560698066,40.028633488199],[116.402949453308,40.0279106439949],[116.401807486021,40.0283178356553],[116.400933060315,40.0279428547428],[116.397381743356,40.0289992287644],[116.396607998652,40.0298527589984],[116.396719495561,40.0306834959179],[116.398029369642,40.0299774554462],[116.39936630852,40.0298563251415],[116.399294031691,40.0292378621712],[116.400873768989,40.0295918140456],[116.39981920707,40.0303314960028],[116.402814076127,40.029749289733],[116.394258253907,40.0230302761666],[116.391073635903,40.0225486188029],[116.391179201673,40.0244142778637],[116.393544693982,40.0265042454842],[116.395170106576,40.0239855148762],[116.393876466029,40.0220057980925],[116.392504527582,40.0220710047706],[116.395830156983,40.0249933295208],[116.395064763015,40.0247506994991],[116.393977830848,40.0236921051002],[116.393983884851,40.0256515657056],[116.394336400267,40.0261706284784],[116.391301366176,40.0266509706958],[116.389666174611,40.0269686700454],[116.390026019912,40.0281294932117],[116.392051439111,40.0280744989287],[116.392429032563,40.0290398070639],[116.388052335933,40.0224716694574],[116.390839738908,40.0219934805278],[116.387933542126,40.0233971231645],[116.387418949502,40.0237065971108],[116.382224680514,40.0237985476077],[116.383705622861,40.0235085890954],[116.377950616072,40.0262813424447],[116.37849454974,40.0269094058983],[116.379464882233,40.0272460354942],[116.380118387606,40.027265474524],[116.38197034742,40.0271433887363],[116.379830969729,40.0251500479976],[116.379152532247,40.0238772807283],[116.377278233709,40.0232191985939],[116.375880690661,40.0224346283642],[116.374270452962,40.0234412586258],[116.375018462676,40.0235078737064],[116.374327976116,40.0229896440529],[116.378588579644,40.0277409354621],[116.379789068168,40.0283339611977],[116.378779159713,40.0285185026227],[116.377545037047,40.0286718065628],[116.377879994235,40.0279434143749],[116.377229903405,40.027238827383],[116.376257239493,40.0275438528444],[116.376233495781,40.0280740039641],[116.375076497783,40.0283357548031],[116.373706218705,40.0281424725942],[116.373332205888,40.0276266658644],[116.37254456176,40.0272404415654],[116.37298742225,40.0283979604654],[116.372230739691,40.0266045210516],[116.370506040214,40.0245409403481],[116.369846039519,40.0248213938519],[116.372406295854,40.0229434469846],[116.370378920407,40.0222893597982],[116.371326446303,40.0233920902496],[116.373859523182,40.0219393521651],[116.37552717555,40.0218843871685],[116.379450314825,40.0236209214398],[116.387133099974,40.0179493269059],[116.385390535823,40.0168406820463],[116.382912695439,40.0170402078613],[116.378345069201,40.0176793850226],[116.394413073296,40.0198357429504],[116.393361473076,40.0200154538807],[116.392132352826,40.0200526635846],[116.395185699596,40.0161837261362],[116.395089251504,40.0139210973406],[116.394668300461,40.0128540756885],[116.392399065437,40.0138979327171],[116.395074412521,40.0167102653286],[116.396812822862,40.0198136984554],[116.395286205083,40.0197011736659],[116.395245485926,40.0190748756006],[116.392684226866,40.0161672748928],[116.391569643307,40.0154881132644],[116.38552524657,40.0160440777048],[116.379331691787,40.0143299849411],[116.376412019935,40.0153556735508],[116.380682756497,40.0181849162989],[116.3822991315,40.0173763880172],[116.397402646461,40.0103988865935],[116.398142079584,40.0098943398078],[116.398977745937,40.0136432522308],[116.399298652816,40.0194735952786],[116.401333248972,40.0193669867064],[116.401240647304,40.0151977785183]];return points;}</script>【GIS小案例】点聚合效果的实现相关推荐
- JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...
- 【GIS小案例】台风烟花的轨迹动图
效果如图所示: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- 【GIS小案例】CesiumHeatmap热力图
1,CesiumHeatmap: GitHub - danwild/CesiumHeatmap: A library to add heatmaps (using heatmap.js) to the ...
- vue3 组件拖拽小案例
vue3 实现组件拖拽小案例 一.实现效果 将不同组件拖拽至展示区展示 拖拽前 拖拽后,取消后还原(没有动态演示真抱歉) 二.实现过程 页面基本样式 <template><div c ...
- click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
- 小案例：实现http://www.alloyteam.com/page/0/移动端效果，博客文章列表和文章详情页面
一:案例要求和数据: (1)移动端适配 (2)列表跳详情 (3)回到顶部 (4)上下页 (5)时间格式 (6)解决接口跨域请求访问问题 (7)路由跳转无bug 接口路径均以 http://118.19 ...
- JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
- 001 小案例： 类似“轮播图”转动效果
小案例 动画效果@keyframs flex布局:display:flex <!DOCTYPE html> <html> <head><meta charse ...
- 小兔鲜注册页面验证、阶段案例（登录、首页页面）（重点）、小兔鲜放大镜效果——DOM
目录 1. 小兔鲜注册页面验证 2. 阶段案例(登录.首页页面)(重点) 3. 小兔鲜放大镜效果 1. 小兔鲜注册页面验证 验证码模块有个小问题: 连续点击获取验证码会导致触发多次计时器,会导致计时出 ...
最新文章
- JavaMail学习笔记（一）、理解邮件传输协议（SMTP、POP3、IMAP、MIME）
- research development course at ifm
- layui radio 根据获取的到值选中
- win10共享打印错误0x0000006_Win7打印机无法共享提示错误代码0x000006d9的解决方法...
- Data truncation: Data too long for column 'XXXXX' at row 1
- openstack vm实例pxe无法启动
- 《Java完全参考手册》总结（1）
- 结构力学计算软件_辽宁网格修复软件价格如何
- OpenGL--纹理贴图基础
- homebre mysql 启动_Mysql闪退问题图文解决办法
- mysql统计字数_mysql – 使用SQL来确定文本字段的字数统计
- android 方向传感器,10.11 传感器专题(2)——方向传感器
- 刷脸支付会以迅雷不及掩耳之势布局未来
- 快递空运材积大于重量的教训
- 弦振动 matlab,特殊弦振动问题的MATLAB仿真.doc
- 【渝粤教育】广东开放大学 计算机导论 形成性考核 (51)
- 如何调出计算机软件数据,如何在计算机上打开dat文件（快速生成DAT格式的数据）...
- WEB安全学习第六天：加密编码算法
- 服务器托管一年的价格是多少
- tomcat5.5、tomcat6.0连接池配置