js代码获取Cesium的czml数据
Demo举例:
北京16个区县,2016年1⽉1⽇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, 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.046 "material":{
"solidColor":
{"color":[
{"interval":"2016-01-01T00:00:00Z/2016-01-01T08:00:00Z","rgba":[255,255,0,255]},
{"interval":"2016-01-01T08:00:00Z/2016-01-01T19:00:00Z","rgba":[255,126,0,255]},
]
}
},
"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⽂件
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="JSON-js-master\json2.js"></script>
<script type="text/javascript" src="beijing11.js"></script
⽤到了读取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 ry.coordinates[0];//[][]
var exist=false;
for(var j=0;j<czmlArr.length;j++)
{
var obj=czmlArr[j];
if(obj.name.indexOf(name)>=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" || String.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是为了缩⼩数据源数据,将坐标截取⼩数点后四位,并隔5个留⼀个坐标的⽅法
//处理坐标
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;
Fixed(4);
Fixed(4);
Fixed(0);
newPts.push(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<czmlArr.length;j++){
var obj=czmlArr[j];
var name=obj.name;
var valueIndex=0;
for(var i=0;i<lines.length;i++){
var cols= lines[i].split(',');
if(name.indexOf(cols[1])>=0){
var cValue=cols[2]*100;
//更改czml数组内容
udedHeight[valueIndex].number=cValue;
if(valueIndex>=23){
break;
}
valueIndex++;
}js arguments
}
}
console.log("csv:"+lines);
},dataType='text');
}
将结果输出到页⾯,然后就可以⼿⼯拷贝出来,存成czml的数据源了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论