/*获取geojson数据*/ function get_geojson(name,h,n){ let x=document.getElementById(n); if(x.className === "la"){ loadgeojson(name,h,n); x.className = "la2"; }else{ x.className = "la"; let len = viewer.dataSources.length; if(len>0){ for(let i=0;i<len;i++){ var dataSource = viewer.dataSources.get(i); if(dataSource._name === n){ viewer.dataSources.remove(dataSource); } } } } } var promise=new Array(9); function loadgeojson(name,h,n){ let xmlhttp,p; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP_geo"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200 ) { p=xmlhttp.response; Cesium.Math.setRandomNumberSeed(0);//设置随机数种子 promise[n] = Cesium.GeoJsonDataSource.load(p); promise[n].then(function (dataSource) { viewer.dataSources.add(dataSource); dataSource.name= n; let entities = dataSource.entities.values; entities.id=n; let colorHash = {}; //可对单个实体进行设置 for (let i = 0; i < entities.length; i++) { let entity = entities[i];//geojson里面必须得有一个name属性,entity.name对应 let name = entity.name;//可以使两个同名要素使用同一种颜色 let color = colorHash[name]; if (!color) { color = Cesium.Color.fromRandom({ alpha : 1.0 }); colorHash[name] = color; } entity.polygon.material = color; entity.polygon.outline = true;// polygon边线显示与否 entity.polygon.height=h;//底面距离地面高度 entity.polygon.extrudedHeight =h+0.2;//顶面距离地面高度 } }); /*viewer.flyTo(promise[n]);*/ } }; xmlhttp.open("GET","./jsp/get_geojson.jsp?floor_name="+name,true); xmlhttp.send(); }
完整代码如上所示。
1创建promise数组,长度为geojson数据的个数;
2loadgeojson(name,h,n)函数异步加载geojson文件(服务器后台从数据库中下载json数据到本地,返回文件地址p),name为geojson数据名称,h为高度,n为id,设为datasource名称;
3getjson(name,h,n)函数,name为geojson数据名称,h为高度,n为datasource名称(参数与loadgeojson相同),datasource的id从1开始记录geojson加载顺序,判断名称是否一致,删除该资源(无序)。
4代码实现了在页面通过button控制geojson的加载和移除,对于已经加载的geojson数据,button.style.backgroundcolor变为红色(.la2样式),当移除该数据时,button回到.la样式。
原文地址:https://www.cnblogs.com/Haiszu/p/12006056.html
时间: 2024-10-09 03:44:12