在二維開發中,openlayers4 入門開發系列結合 echarts4 實現散點圖,下圖是GIS之家的效果圖,那麼在三維中,則可藉助Entity來變相構造下圖的效果。html
構造實體ellipse,造一個用做實心中心區域的表徵位置,再造兩個圓,控制他們的半徑動態變化,而後輪迴播放,這其中涉及的是web
Cesium.ImageMaterialPropertyecharts
我構造一個北京各區的中心做爲測試數據post
[ {"name":"北京A", "value":100,"coordinates":[116.47202, 40.291]}, {"name":"北京B", "value":500,"coordinates":[116.606235, 40.698838]}, {"name":"北京C", "value":30,"coordinates":[115.895015, 40.143259]}, {"name":"北京D", "value":40,"coordinates":[116.259491, 39.593590]}, {"name":"北京E", "value":10,"coordinates":[117.264262, 40.184631]} ]
//解析JSON文件 //_url的路徑例如:"assets/data/configSites.json" function analyseJSON(_url,_callback) { let url=_url; let request = new XMLHttpRequest(); request.open("get",url); request.send(null); request.onload = function () { if (request.status == 200) {/*返回狀態爲200,即爲數據獲取成功*/ var json = JSON.parse(request.responseText); _callback(json); } } }
//構造動的擴散漣漪 實際上就是把圖片圓形按時間改變半徑 addCircleRipple({ json:_JsonData[i], deviationR:50,//差值 差值也大 速度越快 eachInterval:2000,//兩個圈的時間間隔 imageUrl:"assets/home/redCircle2.png", maxR:(_JsonData[i].value)*20 });
/** *兩個圓擴散紋理 * */ function addCircleRipple(data){ var r1=0,r2=0; var r3=0,r4=0; function changeR1() { //這是callback,參數不能內傳 r1=r1+data.deviationR; if(r1>=data.maxR){ r1=0; } return r1; } function changeR2() { r2=r2+data.deviationR; if(r2>=data.maxR){ r2=0; } return r2; } //第一個圓先跑 viewer.entities.add({ description:"LIGHT_POINTS", position:Cesium.Cartesian3.fromDegrees(data.json.coordinates[0],data.json.coordinates[1],0), show:true, ellipse:{ semiMinorAxis :new Cesium.CallbackProperty(changeR1,false), semiMajorAxis :new Cesium.CallbackProperty(changeR2,false), height:10, material:new Cesium.ImageMaterialProperty({ image:data.imageUrl, repeat:Cesium.Cartesian2(1.0, 1.0), //指定圖像在每一個方向上重複的次數,默認爲Cesium.Cartesian2(1.0, 1.0),{Cartesian2}類型 transparent:true,// 默認爲false,當圖像具備透明性時設置爲true(例如,當png具備透明部分時) color:new Cesium.CallbackProperty(function () { var alp=1-r1/data.maxR; return Cesium.Color.WHITE.withAlpha(alp) //entity的顏色透明 並不影響材質,而且 entity也會透明 },false) }) } }); //第二個圓開始跑 setTimeout(function () { function changeR11() { //這是callback,參數不能內傳 r3=r3+data.deviationR; if(r3>=data.maxR){ r3=0; } return r3; } function changeR12() { r4=r4+data.deviationR; if(r4>=data.maxR){ r4=0; } return r4; } viewer.entities.add({ description:"LIGHT_POINTS", position:Cesium.Cartesian3.fromDegrees(data.json.coordinates[0],data.json.coordinates[1],0), show:true, ellipse:{ semiMinorAxis :new Cesium.CallbackProperty(changeR11,false), semiMajorAxis :new Cesium.CallbackProperty(changeR12,false), height:10, material:new Cesium.ImageMaterialProperty({ image:data.imageUrl, repeat:Cesium.Cartesian2(1.0, 1.0), transparent:true, color:new Cesium.CallbackProperty(function () { var alp=1-r1/data.maxR; return Cesium.Color.WHITE.withAlpha(alp) //entity的顏色透明 並不影響材質,而且 entity也會透明 },false) }) } }); },data.eachInterval) }
使用的波紋圓是相似於這種的:測試
viewer.entities.add({ description:"LIGHT_POINTS", position:Cesium.Cartesian3.fromDegrees(data.json.coordinates[0],data.json.coordinates[1],0), show:true, ellipse:{ semiMinorAxis :(_JsonData[i].value)*5, semiMajorAxis :(_JsonData[i].value)*5, height:10, material:new Cesium.Color(1,0,0,1) } });