js代码获取Cesium的czml数据
时间:2022-12-27 12:30:00
Demo举例:
2016年1月1日,北京16个区县24小时AQI数据的3D动画演变过程,Cesium1.16使用CZML数据显示动画的格式
[ { "id" : "document", "name" : "CZML Polygon - Intervals and Availability", "version" : "1.0" }, {"id":"huairouqu", "name":"怀柔区AQI", "availability":"2016-01-01T00:00:00Z/2016-01-02T00:00:00Z", "polygon":{"positions":{"cartographicDegrees":[116.6988,41.0213,0,116.6976,41.0189,0,116.6955,41.0155,0,116.6934,41.0137,0,116.6905,41.0126,0,116.6908,41.0103,0,116.6914,41.0079,0,116.6879,41.0042,0,116.6862,41.0023,0,116.6847,41.0019,0,116.6837,41.0015,0,116.6831,41.0002,0,116.6833,40.9993,0,116.6829,40.9981,0,116.6828,40.996,0,116.6829,40.995,0,116.6823,40.9945,0 …… 116.6521,41.0569,0,116.6546,41.0558,0,116.6571,41.0527,0,116.657,41.0513,0,116.6601,41.0495,0,116.6626,41.0485,0,116.6643,41.0476,0,116.6657,41.0467,0,116.6695,41.0463,0,116.6713,41.0458,0,116.6733,41.0464,0,116.6762,41.044,0,116.6777,41.0428,0,116.6803,41.0419,0,116.6841,41.0424,0,116.6891,41.0446,0,116.6911,41.0418,0,116.6922,41.0403,0,116.6913,41.0378,0,116.6925,41.0358,0,116.6944,41.0342,0,116.6959,41.0311,0,116.6952,41.0276,0,116.6966,41.0237,0]}, "material":{ "solidColor": {"color":[ {"interval":"2016-01-01T00:00:00Z/2016-01-01T08:00:00Z","rgba":}, {"interval":"2016-01-01T08:00:00Z/2016-01-01T19:00:00Z","rgba":}, ] } }, "perPositionHeight" : false, "extrudedHeight":[{ "interval":"2016-01-01T00:00:00Z/2016-01-01T01:00:00Z","number":6900}, {"interval":"2016-01-01T01:00:00Z/2016-01-01T02:00:00Z","number":7300}, …… ] } }, { "id" : "miyunxian", "name" : "密云县API", "availability":"2016-01-01T16:20:00Z/2016-01-02T00:00:00Z", "polygon" : { "positions" : { "cartographicDegrees" : [116.88697199993148, 40.801070000005474 ,0,116.88699899969563, 40.80083600024426 ……
由于坐标小数点后位数较多,数据文件较大,因此需要处理坐标
需要引入的js文件
用到了读取JSON的类库json2.js
还有jquery
beijing11.js是czml格式数据源模板(北京几个区的手动复制粘贴处理结构累死,考虑用代码实现结构!),放在里面bjCZML变量里,test.json就是用ogr2ogr在线方法ESRI服务中的行政区域图层坐标转换为GeoJSON格式数据源文件。
读取JSON文件:
function doJSON(){ //读czml复制数组内容16份 var czmlArr=bjCZML; var count=bjCZML.length; var dataroot="test.json"; $.getJSON(dataroot, function(data){ var features=data.features; var fcount=features.length; //循环数组,获取各区的名称和坐标 for(var i = 0; i < fcount; i ){ var feature=features[i]; var name=feature.properties.Name_CHN; var pts=feature.geometry.coordinates[0] var exist=false; for(var j=0;j=0) { exist=true; break; } } if(name.indexOf("怀柔")>=0) exist=false; if(!exist){ var item=bjCZML[1]; var item1={}; extend(item1,item); item1.name=name; item1.polygon.positions.cartographicDegrees=doSource1(name,pts); czmlArr.push(item1); //czmlArr[c].name=name; //czmlArr[c].polygon.positions.cartographicDegrees=doSource1(pts); } } var c=czmlArr.length; //alert(c); }); doCSVValue(czmlArr); //输出 var str; str=JSON.stringify(czmlArr); document.write("str:" str); }
//简单数组的复制和修改会影响原值,因此需要硬复制 function getType(o) { var _t; return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase(); } function extend(destination,source) { for(var p in source) { if(getType(source[p])=="array"||getType(source[p])=="object") { destination[p]=getType(source[p])=="array"?[]:{}; arguments.callee(destination[p],source[p]); } else { destination[p]=source[p]; } } }
简单的复制会直接修改数据源的值,因此需要硬复制。
doSource1.为了缩小数据源数据,将坐标截取到小数点的最后四位,并每五个坐标一次
//处理坐标 function doSource1(name,pts){ var newPts=[]; var n=5; if(name.indexOf("怀柔")>=0) { n=1; } if(name.indexOf("朝阳")>=0) { pts=pts[0]; } var c=pts.length/n; var count=Math.floor(c); for(var ii = 0; ii < count; ii ){ var j=ii*n; var x=pts[j][0]; var y=pts[j][1]; var z=0; x=x.toFixed(4); y=y.toFixed(4); z=z.toFixed(0); newPts.psh(Number(x));
newPts.push(Number(y));
newPts.push(Number(z));
}
console.log(name+":"+newPts);
//document.write(": "+newPts+"\t\n");
return newPts;
}
doCSVValue方法是读取csv格式的文件,zoneAvgAQI_GB2312.csv文件里存储了每小时行政区的AQI数值,将其读取,并给czml数组赋值,根据AQI的值进行3D拉伸
/处理数值
function doCSVValue(czmlArr){
//读csv
$.get('zoneAvgAQI_GB2312.csv',function(data){
var dataStr = new String(data);
var lines = dataStr.split('\n');
//循环czml
for(var j=10;j=0){
var cValue=cols[2]*100;
//更改czml数组内容
obj.polygon.extrudedHeight[valueIndex].number=cValue;
if(valueIndex>=23){
break;
}
valueIndex++;
}
}
}
console.log("csv:"+lines);
},dataType='text');
}
将结果输出到页面,然后就可以手工拷贝出来,存成czml的数据源了。