cesium 动态圆扩散效果雷达扫描效果

最新推荐文章于 2024-05-23 18:35:53 发布

tianmeng1999

最新推荐文章于 2024-05-23 18:35:53 发布

阅读量5.4k

点赞数 12

分类专栏： cesium

本文链接：https://blog.csdn.net/weixin_42448623/article/details/106898966

版权

**如果有用的话，请点个赞。谢谢！！！ **
获取 AccessToken

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium 扩散圆</title>
    <script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        body,html{
   
            height:100%;
            padding:0;
            margin:0;
        }
        #cesiumContainer{
   
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        // cesium 秘钥
        Cesium.Ion.defaultAccessToken = '你的AccessToken';
        var viewer = new Cesium.Viewer('cesiumContainer',{
   
            geocoder: false,                //是否显示地名查找控件
            sceneModePicker: false,         //是否显示投影方式控件
            navigationHelpButton: false,    //是否显示帮助信息控件
            baseLayerPicker: false,         //是否显示图层选择控件
            homeButton: false,              //是否显示Home按钮
            fullscreenButton: false,        //是否显示全屏按钮    
            timeline:false,                 //时间轴控件 
            animation:false                //动画控件 
        })

                // viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
        viewer.scene.globe.depthTestAgainstTerrain = true; //开启深度检测
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印 或 css

        var entity = viewer.entities.add({
   
            name: "点",
            position: Cesium.Cartesian3.fromDegrees(117.270739, 31.84309, 43.48),
            billboard: {
   
                image: "./marker/acting.png",
                scale: 1,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            }
        })
        viewer.flyTo(entity)

        // showCircleScan() // 圆扩散
        function showCircleScan() {
   
            var cartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(117.270739), Cesium.Math.toRadians(31.84309), 32);
            var scanColor = new Cesium.Color(0.0, 1.0, 0.0, 1