多类动态圆—MCHMAP 丨地图引擎

MCHMAP 丨地图引擎

MCHMAP 丨地图引擎 > 快速开始 > MCHMAP > 多类动态圆

多类动态圆

扩散圆

(1)创建方法：const diffuseRing = CircleMaterialUtil.createCircleDiffuseEntity(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number[]} options.position 中心点坐标 [lon, lat] / [lon, lat, height]，height缺省0

@param {Number} [options.radius=1000] 椭圆半径

@param {Cesium.Color} [options.color=Cesium.Color.RED] 扩散环颜色

@param {Number} [options.speed=10] 扩散动画速度

@param {String} [options.name='扩散雷达圆环'] 实体名称

(2)show()显示

diffuseRing.show(); // 单个显示

CircleMaterialUtil.Class.CircleDiffuseEntity.showAll();// 全部显示

(3)hide()隐藏

diffuseRing.hide(); // 单个隐藏

CircleMaterialUtil.Class.CircleDiffuseEntity.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

diffuseRing.toggleVisible();

(5)flyTo(duration)飞行聚焦

diffuseRing.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.CircleDiffuseEntity.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

diffuseRing.lookAt();

(7)destroy()销毁

diffuseRing.destroy();// 单个销毁

CircleMaterialUtil.Class.CircleDiffuseEntity.destroyAll();// 全部销毁

(8)代码实例

const diffuseRing = CircleMaterialUtil.createCircleDiffuseEntity({
viewer: MchCesium.viewer,
position: [116.4072, 39.9175, 30],
radius: 200,
color: Cesium.Color.ORANGE.withAlpha(0.7),
speed: 1
});

扇形扫描雷达

(1)创建方法：const scanRadar = CircleMaterialUtil.createCircleScanEntity(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number[]} options.position 中心点坐标 [lon, lat] / [lon, lat, height]，height缺省0

@param {Number} [options.radius=1000] 扫描半径(米)

@param {Cesium.Color} [options.color=Cesium.Color.CYAN] 扇形扫描颜色

@param {Number} [options.speed=8] 旋转动画速度

@param {Number} [options.sectorAngle=60] 扇形夹角角度

@param {String} [options.name='扇形扫描雷达'] 实体名称

(2)show()显示

scanRadar.show(); // 单个显示

CircleMaterialUtil.Class.CircleScanEntity.showAll();// 全部显示

(3)hide()隐藏

scanRadar.hide(); // 单个隐藏

CircleMaterialUtil.Class.CircleScanEntity.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

scanRadar.toggleVisible();

(5)flyTo(duration)飞行聚焦

scanRadar.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.CircleScanEntity.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

scanRadar.lookAt();

(7)destroy()销毁

scanRadar.destroy();// 单个销毁

CircleMaterialUtil.Class.CircleScanEntity.destroyAll();// 全部销毁

(8)代码实例

const scanRadar = CircleMaterialUtil.createCircleScanEntity({
viewer: MchCesium.viewer,
position: [116.3872, 39.9175, 20],
radius: 200,
color: Cesium.Color.LIME.withAlpha(0.65),
speed: 9,
sectorAngle: 90
});

水波纹雷达

(1)创建方法：const ripple = CircleMaterialUtil.createCircleRippleEntity(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number[]} options.position 中心点坐标 [lon, lat] / [lon, lat, height]，height缺省0

@param {Number} [options.radius=1000] 波纹半径(米)

@param {Cesium.Color} [options.color=Cesium.Color.RED] 水波纹颜色

@param {Number} [options.speed=3] 波纹扩散速度

@param {Number} [options.count=4] 波纹循环圈数

@param {Number} [options.gradient=0.2] 波纹衰减系数

@param {String} [options.name='循环水波纹'] 实体名称

(2)show()显示

ripple.show(); // 单个显示

CircleMaterialUtil.Class.CircleRippleEntity.showAll();// 全部显示

(3)hide()隐藏

ripple.hide(); // 单个隐藏

CircleMaterialUtil.Class.CircleRippleEntity.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

ripple.toggleVisible();

(5)flyTo(duration)飞行聚焦

ripple.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.CircleRippleEntity.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

ripple.lookAt();

(7)destroy()销毁

ripple.destroy();// 单个销毁

CircleMaterialUtil.Class.CircleRippleEntity.destroyAll();// 全部销毁

(8)代码实例

const ripple = CircleMaterialUtil.createCircleRippleEntity({
viewer: MchCesium.viewer,
position: [116.3972, 39.9125, 15],
radius: 300,
color: Cesium.Color.BLUE.withAlpha(0.7),
speed: 2.5,
count: 4
});

雷达线扫描

(1)创建方法：const lineRadar = CircleMaterialUtil.createRadarLineEntity(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number[]} options.position 中心点坐标 [lon, lat] / [lon, lat, height]，height缺省0

@param {Number} [options.radius=1000] 扫描半径(米)

@param {Cesium.Color} [options.color=Cesium.Color.RED] 扫描线颜色

@param {Number} [options.speed=10] 旋转速度

@param {String} [options.name='细线雷达扫描'] 实体名称

(2)show()显示

lineRadar.show(); // 单个显示

CircleMaterialUtil.Class.RadarLineEntity.showAll();// 全部显示

(3)hide()隐藏

lineRadar.hide(); // 单个隐藏

CircleMaterialUtil.Class.RadarLineEntity.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

lineRadar.toggleVisible();

(5)flyTo(duration)飞行聚焦

lineRadar.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.RadarLineEntity.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

lineRadar.lookAt();

(7)destroy()销毁

lineRadar.destroy();// 单个销毁

CircleMaterialUtil.Class.RadarLineEntity.destroyAll();// 全部销毁

(8)代码实例

const lineRadar = CircleMaterialUtil.createRadarLineEntity({
viewer: MchCesium.viewer,
position: [116.3772, 39.9195, 25],
radius: 200,
color: Cesium.Color.LIME.withAlpha(0.6)
});

立体雷达扫描

(1)创建方法：const solidRadarScan = CircleMaterialUtil.createSolidRadarScan(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number} [options.radius=1000] 雷达扫描半径(米)

@param {Cesium.Color} [options.color=new Cesium.Color(0, 1, 1, 0.3)] 墙体材质颜色

@param {Number} [options.speed=0.5] 旋转角速度

@param {Number[]} options.position 中心点经纬度 [lon, lat]

(2)show()显示

solidRadarScan.show(); // 单个显示

CircleMaterialUtil.Class.SolidRadarScan.showAll();// 全部显示

(3)hide()隐藏

solidRadarScan.hide(); // 单个隐藏

CircleMaterialUtil.Class.SolidRadarScan.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

solidRadarScan.toggleVisible();

(5)flyTo(duration)飞行聚焦

solidRadarScan.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.SolidRadarScan.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

solidRadarScan.lookAt();

(7)destroy()销毁

solidRadarScan.destroy();// 单个销毁

CircleMaterialUtil.Class.SolidRadarScan.destroyAll();// 全部销毁

(8)代码实例

const solidRadarScan = CircleMaterialUtil.createSolidRadarScan({
viewer: MchCesium.viewer,
position: [116.387, 39.923],
radius: 1500,
speed: 0.6,
color: new Cesium.Color(0,1,1,0.35),
});

波纹雷达

(1)创建方法：const radarWave = CircleMaterialUtil.createRadarWaveEntity(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number[]} options.position 中心点坐标 [lon, lat]或[lon, lat, height]，height缺省为0

@param {Number} [options.radius=1000] 雷达平面半径(米)

@param {Cesium.Color} [options.color=Cesium.Color.RED] 波纹颜色

@param {Number} [options.speed=10] 波纹动画转速

@param {String} [options.name='波纹雷达'] 实体名称

(2)show()显示

radarWave.show(); // 单个显示

CircleMaterialUtil.Class.RadarWaveEntity.showAll();// 全部显示

(3)hide()隐藏

radarWave.hide(); // 单个隐藏

CircleMaterialUtil.Class.RadarWaveEntity.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

radarWave.toggleVisible();

(5)flyTo(duration)飞行聚焦

radarWave.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.RadarWaveEntity.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

radarWave.lookAt();

(7)destroy()销毁

radarWave.destroy();// 单个销毁

CircleMaterialUtil.Class.RadarWaveEntity.destroyAll();// 全部销毁

(8)代码实例

const radarWave = CircleMaterialUtil.createRadarWaveEntity({
viewer: MchCesium.viewer,
position: [116.382111, 39.923111,30],
radius: 200,
color: Cesium.Color.CYAN.withAlpha(0.9),
speed: 9,
name: "城市波纹监测雷达"
});

线圈发光

(1)创建方法：const scanLine = CircleMaterialUtil.createScanlineEntity(options);

参数说明：

options 配置参数

@param {Cesium.Viewer} options.viewer 场景Viewer实例

@param {Number[]} options.position [lon,lat] / [lon,lat,height]

@param {Number} [options.radius=1000] 最大扩散半径

@param {Cesium.Color} [options.color=Cesium.Color.YELLOW.withAlpha(0.5)] 发光颜色

@param {Number} [options.speed=3000] 动画速度(0 → 11000 == 最快 → 最慢)

@param {String} [options.name='线圈发光扫描'] 实体名称

(2)show()显示

scanLine.show(); // 单个显示

CircleMaterialUtil.Class.ScanlineEntity.showAll();// 全部显示

(3)hide()隐藏

scanLine.hide(); // 单个隐藏

CircleMaterialUtil.Class.ScanlineEntity.hideAll();// 全部隐藏

(4)toggleVisible()显隐切换

radarWave.toggleVisible();

(5)flyTo(duration)飞行聚焦

scanLine.flyTo(1.2);

参数说明：duration飞行时长（单位：秒）

CircleMaterialUtil.Class.ScanlineEntity.flyToAll(2);// 整体范围聚焦

(6)lookAt()视角锁定

scanLine.lookAt();

(7)destroy()销毁

scanLine.destroy();// 单个销毁

CircleMaterialUtil.Class.ScanlineEntity.destroyAll();// 全部销毁

(8)代码实例

const scanLine2 = CircleMaterialUtil.createScanlineEntity({
viewer: MchCesium.viewer,
position: [116.3872, 39.9135, 30],
radius: 200,
color: Cesium.Color.RED.withAlpha(0.6),
speed: 7000,
name: "警戒线圈扩散"
});

完整代码实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多类型动态圆</title>
<script src="https://mhc.ixiera.com/mhc/main_min.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<script src="js/CircleDynamicMaterial.min.js"></script>
<style type="text/css">
body{width: 100vw;height: 100vh;display: block;overflow: hidden;position: relative;}
.cesium-viewer,
.cesium-viewer-cesiumWidgetContainer,
.cesium-widget,
.cesium-widget canvas{width: 100%;height: 100%;}
.btns-row{position: absolute; top: 15px;left: 15px;}
.btns-row .item-row{margin-bottom: 10px;}
.btns-row .item-row input{line-height: 30px;padding: 0px 10px;}
.btns-row button{min-width: 100px;height: 30px; padding: 0 8px; border-radius: 2px;margin-right: 15px;font-size: 12px;}
</style>
</head>
<body>
<div id="container" style="width: 100vw;height: 100vh;display: block;overflow: hidden;"></div>
<div class="btns-row">
<div class="item-row">
<button onclick="render()">扩散圆</button>
<button onclick="render2()">扇形扫描雷达</button>
<button onclick="render3()">波纹雷达</button>
<button onclick="render4()">雷达细线扫描</button>
</div>
<div class="item-row">
<button onclick="render5()">立体雷达扫描</button>
<button onclick="render6()">波纹雷达</button>
<button onclick="render7()">线圈发光</button>
</div>
</div>
<script type="text/javascript">
// 初始化地图
MchCesium.init('container', true);
const viewer = MchCesium.viewer;
// 加载 - 1. 扩散圆
function render(){
// 仅经纬度，高度默认0
const diffuseRing = CircleMaterialUtil.createCircleDiffuseEntity({
    viewer: viewer,
    position: [116.397, 39.908, 10],
    radius: 200,
    color: Cesium.Color.LIME.withAlpha(0.65),
    speed: 1,
    name: "城市扩散监测圆环"
});

// 带自定义高度
const diffuseRing2 = CircleMaterialUtil.createCircleDiffuseEntity({
    viewer: viewer,
    position: [116.4072, 39.9175, 30],
    radius: 200,
    color: Cesium.Color.ORANGE.withAlpha(0.7),
    speed: 1
});
// // 聚焦
// diffuseRing.flyTo(1.2);
// // 显隐切换
// diffuseRing.toggleVisible();
// // 显示
// diffuseRing.show();
// // 全部显示
// CircleMaterialUtil.Class.CircleDiffuseEntity.showAll();
// 隐藏
// diffuseRing.hide();
// // 全部隐藏
// CircleMaterialUtil.Class.CircleDiffuseEntity.hideAll();
// 聚焦
// diffuseRing.lookAt();
// 整体范围聚焦
CircleMaterialUtil.Class.CircleDiffuseEntity.flyToAll(2);
// 销毁
// diffuseRing.destroy();
// // 一键销毁所有扩散圆环
// CircleMaterialUtil.Class.CircleDiffuseEntity.destroyAll();
}
// 加载 - 2. 扇形扫描雷达
function render2(){
// 仅经纬度，高度默认0
const scanRadar = CircleMaterialUtil.createCircleScanEntity({
    viewer: viewer,
    position: [116.3872, 39.9075],
    radius: 400,
    color: Cesium.Color.CYAN.withAlpha(0.7),
    speed: 7,
    sectorAngle: 70,
    name: "城市扇形安防扫描"
});
// 带自定义离地高度
   const scanRadar2 = CircleMaterialUtil.createCircleScanEntity({
    viewer: viewer,
    position: [116.3872, 39.9175, 20],
    radius: 200,
    color: Cesium.Color.LIME.withAlpha(0.65),
    speed: 9,
    sectorAngle: 90
});
// 聚焦
scanRadar.flyTo(1.2);
// // 显隐切换
// scanRadar.toggleVisible();
// // 显示
// scanRadar.show();
// // 全部显示
// CircleMaterialUtil.Class.CircleScanEntity.showAll();
// 隐藏
// scanRadar.hide();
// // 全部隐藏
// CircleMaterialUtil.Class.CircleScanEntity.hideAll();
// // 聚焦
// scanRadar.lookAt();
// // 整体范围聚焦
// CircleMaterialUtil.Class.CircleScanEntity.flyToAll(2);
// 销毁
// scanRadar.destroy();
// // 一键销毁所有扩散圆环
// CircleMaterialUtil.Class.CircleScanEntity.destroyAll();
}
// 加载 - 3. 水波纹雷达
function render3(){
// 仅经纬度，高度默认0
const ripple = CircleMaterialUtil.createCircleRippleEntity({
    viewer: viewer,
    position: [116.3922, 39.9075],
    radius: 200,
    color: Cesium.Color.LIME.withAlpha(0.65),
    speed: 3,
    count: 5,
    gradient: 0.25,
    name: "湖面循环水波纹"
   });

// 带自定义离地高度
const ripple2 = CircleMaterialUtil.createCircleRippleEntity({
    viewer: viewer,
    position: [116.3972, 39.9125, 15],
    radius: 300,
    color: Cesium.Color.BLUE.withAlpha(0.7),
    speed: 2.5,
    count: 4
});
// // 显示
// ripple.show();
// CircleMaterialUtil.Class.CircleRippleEntity.showAll();
// // 隐藏
// ripple.hide();
// CircleMaterialUtil.Class.CircleRippleEntity.hideAll();
// // 显隐切换
// ripple.toggleVisible();
// 飞行聚焦
ripple.flyTo(1.2);
// // 锁定
// ripple.lookAt();
// CircleMaterialUtil.Class.CircleRippleEntity.flyToAll(2);
// // 销毁
// ripple.destroy();
// CircleMaterialUtil.Class.CircleRippleEntity.destroyAll();
}
// 加载 - 4. 雷达线扫描
function render4(){
// 仅经纬度，高度默认贴地
const lineRadar = CircleMaterialUtil.createRadarLineEntity({
    viewer: viewer,
    position: [116.3872, 39.9135],
    radius: 300,
    color: Cesium.Color.ORANGE.withAlpha(0.7),
    speed: 12,
    name: "边境细线警戒雷达"
});
// 自定义离地高度
const lineRadar2 = CircleMaterialUtil.createRadarLineEntity({
    viewer: viewer,
    position: [116.3772, 39.9195, 25],
    radius: 200,
    color: Cesium.Color.LIME.withAlpha(0.6)
});
// // 显示
// lineRadar.show();
// CircleMaterialUtil.Class.RadarLineEntity.showAll();
// // 隐藏
// lineRadar.hide();
// CircleMaterialUtil.Class.RadarLineEntity.hideAll();
// // 显隐切换
// lineRadar.toggleVisible();
// 飞行聚焦
lineRadar.flyTo(1.2);
// // 锁定实体
// lineRadar.lookAt();
// CircleMaterialUtil.Class.RadarLineEntity.flyToAll(2);
// // 销毁
// lineRadar.destroy();
// CircleMaterialUtil.Class.RadarLineEntity.destroyAll();
}
// 加载 - 5. 立体雷达扫描
function render5(){
const solidRadarScan = CircleMaterialUtil.createSolidRadarScan({
    viewer: viewer,
    position: [116.387, 39.923],
    radius: 1500,
    speed: 0.6,
    color: new Cesium.Color(0,1,1,0.35),
});
// console.log(solidRadarScan)
// 飞行聚焦当前雷达
solidRadarScan.flyTo(1.2);
// // 立刻视角锁定
// solidRadarScan.lookAt();
// // 显示单个
// solidRadarScan.show();
// // 全部显示
// CircleMaterialUtil.Class.SolidRadarScan.showAll();
// // 隐藏单个
// solidRadarScan.hide();
// // 全部隐藏
// CircleMaterialUtil.Class.SolidRadarScan.hideAll();
// 销毁单个 - 立体雷达扫描
// if(solidRadarScan) solidRadarScan.destroy();
// 销毁所有 - 立体雷达扫描
// CircleMaterialUtil.Class.SolidRadarScan.destroyAll();
// // 相机聚焦所有雷达整体范围
// CircleMaterialUtil.Class.SolidRadarScan.flyToAll(2);
}
// 加载 - 6. 波纹雷达
function render6(){
/ / 新建波纹雷达
const radarWave = CircleMaterialUtil.createRadarWaveEntity({
    viewer: viewer,
    position: [116.382111, 39.923111, 30],
    radius: 200,
    color: Cesium.Color.CYAN.withAlpha(0.9),
    speed: 9,
    name: "城市波纹监测雷达"
});
console.log(radarWave);
// 飞行聚焦
radarWave.flyTo(1.2);
// // 显示
// radarWave.show();
// // 全部显示
// CircleMaterialUtil.Class.RadarWaveEntity.showAll();
// // 隐藏
// radarWave.hide();
// // 全部隐藏
// CircleMaterialUtil.Class.RadarWaveEntity.hideAll();
// // 切换显隐
// radarWave.toggleVisible();
// // 瞬时锁定视角
// radarWave.lookAt();
// // 整体范围聚焦
// CircleMaterialUtil.Class.RadarWaveEntity.flyToAll(2);
// 销毁单个
// radarWave.destroy();
// // 一键清空所有波纹雷达
// CircleMaterialUtil.Class.RadarWaveEntity.destroyAll();
}
// 加载 - 7. 线圈发光
function render7(){
// 仅经纬度，高度默认贴地
const scanLine = CircleMaterialUtil.createScanlineEntity({
    viewer: viewer,
    position: [116.3962, 39.9275],
    radius: 200,
    color: Cesium.Color.CYAN.withAlpha(0.6),
    speed: 3000,
    name: "警戒线圈扩散"
});
// 自定义离地高度
const scanLine2 = CircleMaterialUtil.createScanlineEntity({
    viewer: viewer,
    position: [116.3872, 39.9135, 30],
    radius: 200,
    color: Cesium.Color.RED.withAlpha(0.6),
    speed: 7000,
    name: "警戒线圈扩散"
});
// // 动态修改参数
// scanLine.setRadius(2000);
// scanLine.setSpeed(20);
// scanLine.setColor(Cesium.Color.MAGENTA.withAlpha(0.7));
// // 显示
// scanLine.show();
// CircleMaterialUtil.Class.ScanlineEntity.showAll();
// // 隐藏
// scanLine.hide();
// CircleMaterialUtil.Class.ScanlineEntity.hideAll();
// // 显隐切换
// scanLine.toggleVisible();
// 飞行聚焦
scanLine.flyTo(2);
// // 锁定
// scanLine.lookAt();
// CircleMaterialUtil.Class.ScanlineEntity.flyToAll(2);
// // 销毁
// scanLine.destroy();
// CircleMaterialUtil.Class.ScanlineEntity.destroyAll();
}
</script>
</body>
</html>

效果展示

Demo地址：https://mhc.ixiera.com/mhc/mchmap/circleAnimationProperty/index.html

本文档来自—MCHMAP 丨地图引擎平台

返回顶部
热线电话
15201074279
微信
扫一扫
立即加微信