在二維開發中,openlayers4 入門開發系列結合 echarts4 實作散點圖,下圖是GIS之家的效果圖,那麼在三維中,則可借助Entity來變相構造下圖的效果。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CNwIzN2YjM0cTL2cjM4UzNyMTMzETMxkTMwITL2YDN2AjNx8CXxETOxAjMvwlN2QjNwYTMvwVY0VmYtk2Lc12bj5ycn9Gbi52YugTMwIzZtl2Lc9CX6MHc0RHaiojIsJye.png)
思路:
構造實體ellipse,造一個用作實心中心區域的表征位置,再造兩個圓,控制他們的半徑動态變化,然後輪回播放,這其中涉及的是
Cesium.CallbackProperty
Cesium.ImageMaterialProperty
具體實作步驟:
1、資料準備
我構造一個北京各區的中心作為測試資料
[
{"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]}
]
2、讀取Json檔案,建議不要用eval或者AJAX
//解析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);
}
}
}
3。周遊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)
}
使用的波紋圓是類似于這種的:
4、構造中心圓實體:
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)
}
});