501 lines
22 KiB
JavaScript
501 lines
22 KiB
JavaScript
/*
|
||
* @Descripttion:
|
||
* @version: 1.0
|
||
* @Author: zhangti
|
||
* @Date: 2019-10-23 16:20:07
|
||
* @LastEditors: sueRimn
|
||
* @LastEditTime: 2019-11-22 17:38:53
|
||
*/
|
||
/**
|
||
* 雷达效果封装
|
||
*/
|
||
import Entitys from './entitys.js';
|
||
import mouseManager from './mouseManager.js';
|
||
import Handler from './handler.js';
|
||
export default class Radar{
|
||
constructor(opt){
|
||
this.CMD = {
|
||
SCAN1 : 1,
|
||
SCAN2 : 2,
|
||
RADAR1 : 3,
|
||
RADAR2 : 4
|
||
}
|
||
//实体
|
||
this.radarObj = [];
|
||
//初始化
|
||
this.init(opt);
|
||
}
|
||
init(opt){
|
||
if(opt == null){
|
||
return false;
|
||
}
|
||
var t = this;
|
||
for(var key in opt){
|
||
t[key] = opt[key];
|
||
}
|
||
/**
|
||
* 鼠标事件
|
||
*/
|
||
this.handler = new Handler(this.viewer);
|
||
/**
|
||
* 转换
|
||
*/
|
||
this.mouseManager = new mouseManager(this.viewer);
|
||
/**
|
||
* 实体
|
||
*/
|
||
this.entitys = new Entitys(this.viewer);
|
||
//雷达
|
||
this.radar = null;
|
||
//提示框
|
||
this._resultTip = this.viewer.entities.add({
|
||
label : {
|
||
fillColor:Cesium.Color.YELLOW,
|
||
showBackground : true,
|
||
font : '14px monospace',
|
||
horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
|
||
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
|
||
pixelOffset : new Cesium.Cartesian2(0, -10)
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 构建
|
||
*/
|
||
build(cmd){
|
||
switch(cmd){
|
||
case this.CMD.SCAN1 : this.createScan1();break;
|
||
case this.CMD.SCAN2 : this.createScan2();break;
|
||
case this.CMD.RADAR1 : this.createRadar1();break;
|
||
case this.CMD.RADAR2 : this.createRadar2();break;
|
||
}
|
||
}
|
||
/**
|
||
* 提示框
|
||
* @param {*} label
|
||
* @param {*} bShow
|
||
* @param {*} position
|
||
* @param {*} message
|
||
* @param {*} effectOptions
|
||
*/
|
||
showTip(label,bShow,position,message,effectOptions){
|
||
label.show = bShow;
|
||
if(bShow){
|
||
if(position)
|
||
label.position = position;
|
||
if(message)
|
||
label.label.text =message;
|
||
if(effectOptions){
|
||
for(let key in effectOptions){
|
||
if(label.key){
|
||
label.key=effectOptions[key];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* 删除
|
||
*/
|
||
remove(){
|
||
if(this.radarObj.length == 0 ){
|
||
return false;
|
||
}
|
||
for(let i in this.radarObj){
|
||
this.viewer.scene.postProcessStages.remove(this.radarObj[i]);
|
||
this.entitys.remove(this.radarObj[i]);
|
||
}
|
||
this.entitys.remove(this._resultTip);
|
||
}
|
||
/**
|
||
* 圆形扫描
|
||
*/
|
||
createScan1(){
|
||
let _self = this;
|
||
//点击
|
||
_self.handler.Action(function(movement){
|
||
let cartesian = _self.mouseManager.pickEllipsoid(movement); //提取lat lon画雷达
|
||
if(!cartesian)return false;
|
||
_self.radarObj.push(_self.addRadarScan(_self.viewer,{lon:cartesian.x,lat:cartesian.y,scanColor:Cesium.Color.RED,r:1500,interval:4000}));
|
||
|
||
},_self.handler.LEFT_CLICK);
|
||
//移动
|
||
_self.handler.Action(function(movement){
|
||
let position = _self.mouseManager.screenToWorld(movement.endPosition);
|
||
if (_self.radarObj != null) {
|
||
if (_self.radarObj.length == 0) {
|
||
_self.showTip(_self._resultTip,true,position,"点击添加第一个扫描物");
|
||
} else {
|
||
if (_self.radarObj.length === 1) {
|
||
_self.showTip(_self._resultTip,true,position, "点击添加第二个扫描物");
|
||
} else {
|
||
_self.showTip(_self._resultTip,true,position, "右键结束编辑");
|
||
}
|
||
}
|
||
}
|
||
},_self.handler.MOUSE_MOVE);
|
||
//右键
|
||
_self.handler.Action(function(movement){
|
||
_self.handler.destroy();
|
||
_self._resultTip.label.show = false;
|
||
},_self.handler.RIGHT_CLICK);
|
||
}
|
||
/**
|
||
* 扩散扫描
|
||
*/
|
||
createScan2(){
|
||
this.addCircleScan(this.viewer,this.data);
|
||
}
|
||
/**
|
||
* 雷达实体
|
||
*/
|
||
createRadar1(){
|
||
let _self = this;
|
||
//点击
|
||
_self.handler.Action(function(movement){
|
||
let cartesian = _self.mouseManager.pickEllipsoid(movement); //提取lat lon画雷达
|
||
if(!cartesian)return false;
|
||
let l ,r,lat = cartesian.y,lon = cartesian.x, height = cartesian.z;
|
||
//radarscan
|
||
r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90),Cesium.Math.toRadians(0),Cesium.Math.toRadians(0));
|
||
l = Cesium.Cartesian3.fromDegrees(lon, lat, height);
|
||
_self.radarObj.push(_self.entitys.add(_self.entitys.getCustomRadar(l,r)));
|
||
},_self.handler.LEFT_CLICK);
|
||
//移动
|
||
_self.handler.Action(function(movement){
|
||
let position = _self.mouseManager.screenToWorld(movement.endPosition);
|
||
if (_self.radarObj != null) {
|
||
if (_self.radarObj.length == 0) {
|
||
_self.showTip(_self._resultTip,true,position,"点击添加第一个点雷达");
|
||
} else {
|
||
if (_self.radarObj.length === 1) {
|
||
_self.showTip(_self._resultTip,true,position, "点击添加第二个雷达");
|
||
} else {
|
||
_self.showTip(_self._resultTip,true,position, "右键结束编辑");
|
||
}
|
||
}
|
||
}
|
||
},_self.handler.MOUSE_MOVE);
|
||
//右键
|
||
_self.handler.Action(function(movement){
|
||
_self.handler.destroy();
|
||
_self._resultTip.label.show = false;
|
||
},_self.handler.RIGHT_CLICK);
|
||
}
|
||
/**
|
||
* 地面雷达
|
||
*/
|
||
createRadar2(){
|
||
this.dmRadar = new dmRadar({viewer:this.viewer});
|
||
}
|
||
/**
|
||
* 扩散性雷达
|
||
* @param {*} viewer
|
||
* @param {*} data
|
||
*/
|
||
addCircleScan(){
|
||
//viewer.scene.globe.depthTestAgainstTerrain = true; //防止移动、放大缩小会视觉偏移depthTestAgainstTerrain // 设置该属性为true之后，标绘将位于地形的顶部；如果设为false（默认值），那么标绘将位于平面上。缺陷：开启该属性有可能在切换图层时会引发标绘消失的bug。
|
||
var CartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(data.lon), Cesium.Math.toRadians(data.lat), 0); //中心位子
|
||
return this.AddCircleScanPostStage(viewer, CartographicCenter,data.r,data.scanColor,data.interval);
|
||
}
|
||
AddCircleScanPostStage(){
|
||
var ScanSegmentShader =
|
||
"uniform sampler2D colorTexture;\n" +
|
||
"uniform sampler2D depthTexture;\n" +
|
||
"varying vec2 v_textureCoordinates;\n" +
|
||
"uniform vec4 u_scanCenterEC;\n" +
|
||
"uniform vec3 u_scanPlaneNormalEC;\n" +
|
||
"uniform float u_radius;\n" +
|
||
"uniform vec4 u_scanColor;\n" +
|
||
"vec4 toEye(in vec2 uv, in float depth)\n" +
|
||
" {\n" +
|
||
" vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +
|
||
" vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +
|
||
" posInCamera =posInCamera / posInCamera.w;\n" +
|
||
" return posInCamera;\n" +
|
||
" }\n" +
|
||
"vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
|
||
"{\n" +
|
||
"vec3 v01 = point -planeOrigin;\n" +
|
||
"float d = dot(planeNormal, v01) ;\n" +
|
||
"return (point - planeNormal * d);\n" +
|
||
"}\n" +
|
||
"float getDepth(in vec4 depth)\n" +
|
||
"{\n" +
|
||
"float z_window = czm_unpackDepth(depth);\n" +
|
||
"z_window = czm_reverseLogDepth(z_window);\n" +
|
||
"float n_range = czm_depthRange.near;\n" +
|
||
"float f_range = czm_depthRange.far;\n" +
|
||
"return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
|
||
"}\n" +
|
||
"void main()\n" +
|
||
"{\n" +
|
||
"gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +
|
||
"float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +
|
||
"vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +
|
||
"vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
|
||
"float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
|
||
"if(dis < u_radius)\n" +
|
||
"{\n" +
|
||
"float f = 1.0 -abs(u_radius - dis) / u_radius;\n" +
|
||
"f = pow(f, 4.0);\n" +
|
||
"gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n" +
|
||
"}\n" +
|
||
"}\n";
|
||
|
||
var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
|
||
var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
|
||
var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
|
||
var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);
|
||
var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
|
||
var _time = (new Date()).getTime();
|
||
var _scratchCartesian4Center = new Cesium.Cartesian4();
|
||
var _scratchCartesian4Center1 = new Cesium.Cartesian4();
|
||
var _scratchCartesian3Normal = new Cesium.Cartesian3();
|
||
var ScanPostStage = new Cesium.PostProcessStage({
|
||
fragmentShader: ScanSegmentShader,
|
||
uniforms: {
|
||
u_scanCenterEC: function () {
|
||
return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
||
},
|
||
u_scanPlaneNormalEC: function () {
|
||
var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
||
var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
|
||
_scratchCartesian3Normal.x = temp1.x - temp.x;
|
||
_scratchCartesian3Normal.y = temp1.y - temp.y;
|
||
_scratchCartesian3Normal.z = temp1.z - temp.z;
|
||
Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
|
||
return _scratchCartesian3Normal;
|
||
|
||
},
|
||
u_radius: function () {
|
||
return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;
|
||
},
|
||
u_scanColor: scanColor
|
||
}
|
||
});
|
||
viewer.scene.postProcessStages.add(ScanPostStage);
|
||
return (ScanPostStage);
|
||
}
|
||
/**
|
||
* 扫描型雷达
|
||
* @param {*} viewer
|
||
* @param {*} data
|
||
*/
|
||
addRadarScan(viewer,data){
|
||
//viewer.scene.globe.depthTestAgainstTerrain = true; //防止移动、放大缩小会视觉偏移depthTestAgainstTerrain // 设置该属性为true之后，标绘将位于地形的顶部；如果设为false（默认值），那么标绘将位于平面上。缺陷：开启该属性有可能在切换图层时会引发标绘消失的bug。
|
||
var CartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(data.lon), Cesium.Math.toRadians(data.lat),0); //中心位子
|
||
return this.AddRadarScanPostStage(viewer, CartographicCenter,data.r,data.scanColor,data.interval);
|
||
}
|
||
AddRadarScanPostStage(viewer, cartographicCenter, radius, scanColor, duration) {
|
||
var ScanSegmentShader =
|
||
"uniform sampler2D colorTexture;\n" +
|
||
"uniform sampler2D depthTexture;\n" +
|
||
"varying vec2 v_textureCoordinates;\n" +
|
||
"uniform vec4 u_scanCenterEC;\n" +
|
||
"uniform vec3 u_scanPlaneNormalEC;\n" +
|
||
"uniform vec3 u_scanLineNormalEC;\n" +
|
||
"uniform float u_radius;\n" +
|
||
"uniform vec4 u_scanColor;\n" +
|
||
"vec4 toEye(in vec2 uv, in float depth)\n" +
|
||
" {\n" +
|
||
" vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +
|
||
" vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +
|
||
" posInCamera =posInCamera / posInCamera.w;\n" +
|
||
" return posInCamera;\n" +
|
||
" }\n" +
|
||
"bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n" +
|
||
"{\n" +
|
||
"vec3 v01 = testPt - ptOnLine;\n" +
|
||
"normalize(v01);\n" +
|
||
"vec3 temp = cross(v01, lineNormal);\n" +
|
||
"float d = dot(temp, u_scanPlaneNormalEC);\n" +
|
||
"return d > 0.5;\n" +
|
||
"}\n" +
|
||
"vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
|
||
"{\n" +
|
||
"vec3 v01 = point -planeOrigin;\n" +
|
||
"float d = dot(planeNormal, v01) ;\n" +
|
||
"return (point - planeNormal * d);\n" +
|
||
"}\n" +
|
||
"float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n" +
|
||
"{\n" +
|
||
"vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\n" +
|
||
"return length(tempPt - ptOnLine);\n" +
|
||
"}\n" +
|
||
"float getDepth(in vec4 depth)\n" +
|
||
"{\n" +
|
||
"float z_window = czm_unpackDepth(depth);\n" +
|
||
"z_window = czm_reverseLogDepth(z_window);\n" +
|
||
"float n_range = czm_depthRange.near;\n" +
|
||
"float f_range = czm_depthRange.far;\n" +
|
||
"return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
|
||
"}\n" +
|
||
"void main()\n" +
|
||
"{\n" +
|
||
"gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +
|
||
"float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +
|
||
"vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +
|
||
"vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
|
||
"float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
|
||
"float twou_radius = u_radius * 2.0;\n" +
|
||
"if(dis < u_radius)\n" +
|
||
"{\n" +
|
||
"float f0 = 1.0 -abs(u_radius - dis) / u_radius;\n" +
|
||
"f0 = pow(f0, 64.0);\n" +
|
||
"vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\n" +
|
||
"float f = 0.0;\n" +
|
||
"if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz))\n" +
|
||
"{\n" +
|
||
"float dis1= length(prjOnPlane.xyz - lineEndPt);\n" +
|
||
"f = abs(twou_radius -dis1) / twou_radius;\n" +
|
||
"f = pow(f, 3.0);\n" +
|
||
"}\n" +
|
||
"gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);\n" +
|
||
"}\n" +
|
||
"}\n";
|
||
|
||
var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
|
||
var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
|
||
var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
|
||
var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);
|
||
var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
|
||
var _CartographicCenter2 = new Cesium.Cartographic(cartographicCenter.longitude + Cesium.Math.toRadians(0.001), cartographicCenter.latitude, cartographicCenter.height);
|
||
var _Cartesian3Center2 = Cesium.Cartographic.toCartesian(_CartographicCenter2);
|
||
var _Cartesian4Center2 = new Cesium.Cartesian4(_Cartesian3Center2.x, _Cartesian3Center2.y, _Cartesian3Center2.z, 1);
|
||
var _RotateQ = new Cesium.Quaternion();
|
||
var _RotateM = new Cesium.Matrix3();
|
||
var _time = (new Date()).getTime();
|
||
var _scratchCartesian4Center = new Cesium.Cartesian4();
|
||
var _scratchCartesian4Center1 = new Cesium.Cartesian4();
|
||
var _scratchCartesian4Center2 = new Cesium.Cartesian4();
|
||
var _scratchCartesian3Normal = new Cesium.Cartesian3();
|
||
var _scratchCartesian3Normal1 = new Cesium.Cartesian3();
|
||
var ScanPostStage = new Cesium.PostProcessStage({
|
||
fragmentShader: ScanSegmentShader,
|
||
uniforms: {
|
||
u_scanCenterEC: function () {
|
||
return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
||
},
|
||
u_scanPlaneNormalEC: function () {
|
||
var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
||
var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
|
||
_scratchCartesian3Normal.x = temp1.x - temp.x;
|
||
_scratchCartesian3Normal.y = temp1.y - temp.y;
|
||
_scratchCartesian3Normal.z = temp1.z - temp.z;
|
||
Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
|
||
return _scratchCartesian3Normal;
|
||
|
||
},
|
||
u_radius: radius,
|
||
u_scanLineNormalEC: function () {
|
||
var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
|
||
var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
|
||
var temp2 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center2, _scratchCartesian4Center2);
|
||
_scratchCartesian3Normal.x = temp1.x - temp.x;
|
||
_scratchCartesian3Normal.y = temp1.y - temp.y;
|
||
_scratchCartesian3Normal.z = temp1.z - temp.z;
|
||
Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
|
||
_scratchCartesian3Normal1.x = temp2.x - temp.x;
|
||
_scratchCartesian3Normal1.y = temp2.y - temp.y;
|
||
_scratchCartesian3Normal1.z = temp2.z - temp.z;
|
||
var tempTime = (((new Date()).getTime() - _time) % duration) / duration;
|
||
Cesium.Quaternion.fromAxisAngle(_scratchCartesian3Normal, tempTime * Cesium.Math.PI * 2, _RotateQ);
|
||
Cesium.Matrix3.fromQuaternion(_RotateQ, _RotateM);
|
||
Cesium.Matrix3.multiplyByVector(_RotateM, _scratchCartesian3Normal1, _scratchCartesian3Normal1);
|
||
Cesium.Cartesian3.normalize(_scratchCartesian3Normal1, _scratchCartesian3Normal1);
|
||
return _scratchCartesian3Normal1;
|
||
},
|
||
u_scanColor: scanColor
|
||
}
|
||
});
|
||
viewer.scene.postProcessStages.add(ScanPostStage);
|
||
return (ScanPostStage);
|
||
|
||
}
|
||
}
|
||
/**
|
||
* 地面雷达
|
||
* @param {*} opt
|
||
*/
|
||
class dmRadar{
|
||
constructor(opt){
|
||
this.init(opt);
|
||
}
|
||
init(opt){
|
||
if(opt == null){
|
||
return false;
|
||
}
|
||
var t = this;
|
||
for(var key in opt){
|
||
t[key] = opt[key];
|
||
}
|
||
this.url = this.url == undefined ? '../src/Cesium/Apps/SampleData/kml/facilities/facilities.kml' : this.url;
|
||
this.pixelRange = this.pixelRange == undefined ? 15 : this.pixelRange;
|
||
this.minimumClusterSize = this.minimumClusterSize == undefined ? 3 : this.minimumClusterSize;
|
||
this.load();
|
||
}
|
||
load(){
|
||
var _self = this,options = {camera : _self.viewer.scene.camera,canvas : _self.viewer.scene.canvas};
|
||
var dataSourcePromise = _self.viewer.dataSources.add(Cesium.KmlDataSource.load(_self.url, options));
|
||
dataSourcePromise.then(function(dataSource) {
|
||
dataSource.clustering.enabled = true;
|
||
dataSource.clustering.pixelRange = _self.pixelRange;
|
||
dataSource.clustering.minimumClusterSize = _self.minimumClusterSize;
|
||
_self.raderData = dataSource;
|
||
_self.customStyle();
|
||
});
|
||
}
|
||
remove(){
|
||
this.viewer.dataSources.remove(this.raderData);
|
||
}
|
||
setPixelRange(value){
|
||
this.raderData.clustering.pixelRange = value;
|
||
this.customStyle();
|
||
}
|
||
setMinimumClusterSize(){
|
||
|
||
}
|
||
customStyle(){
|
||
var _self = this,dataSource = this.raderData,removeListener,singleDigitPins = new Array(8);
|
||
var pinBuilder = new Cesium.PinBuilder();
|
||
var pin50 = pinBuilder.fromText('50+', Cesium.Color.RED, 48).toDataURL();
|
||
var pin40 = pinBuilder.fromText('40+', Cesium.Color.ORANGE, 48).toDataURL();
|
||
var pin30 = pinBuilder.fromText('30+', Cesium.Color.YELLOW, 48).toDataURL();
|
||
var pin20 = pinBuilder.fromText('20+', Cesium.Color.GREEN, 48).toDataURL();
|
||
var pin10 = pinBuilder.fromText('10+', Cesium.Color.BLUE, 48).toDataURL();
|
||
for (var i = 0; i < singleDigitPins.length; ++i) {
|
||
singleDigitPins[i] = pinBuilder.fromText('' + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();
|
||
}
|
||
|
||
if (Cesium.defined(removeListener)) {
|
||
removeListener();
|
||
removeListener = undefined;
|
||
} else {
|
||
removeListener = dataSource.clustering.clusterEvent.addEventListener(function(clusteredEntities, cluster) {
|
||
cluster.label.show = false;
|
||
cluster.billboard.show = true;
|
||
cluster.billboard.id = cluster.label.id;
|
||
cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
|
||
|
||
if (clusteredEntities.length >= 50) {
|
||
cluster.billboard.image = pin50;
|
||
} else if (clusteredEntities.length >= 40) {
|
||
cluster.billboard.image = pin40;
|
||
} else if (clusteredEntities.length >= 30) {
|
||
cluster.billboard.image = pin30;
|
||
} else if (clusteredEntities.length >= 20) {
|
||
cluster.billboard.image = pin20;
|
||
} else if (clusteredEntities.length >= 10) {
|
||
cluster.billboard.image = pin10;
|
||
} else {
|
||
cluster.billboard.image = singleDigitPins[clusteredEntities.length - 2];
|
||
}
|
||
});
|
||
}
|
||
// force a re-cluster with the new styling
|
||
var pixelRange = dataSource.clustering.pixelRange;
|
||
dataSource.clustering.pixelRange = 0;
|
||
dataSource.clustering.pixelRange = pixelRange;
|
||
}
|
||
} |