Cesium 实现动态加载管道

Posted 2020-11-05 liuruipeng

1、安装node.js 环境

1）下载node.js 官网：https://nodejs.org/en/

 

 

下载完成后双击安装，选择默认。

确认node.js是否安装成功：命令窗口（windows+r，输入cmd，enter确认）输入命令：node -v，如果成功，会显示版本号。

 

安装npm，执行命令：npm install;

确认npm是否安装成功：命令窗口（windows+r，输入cmd，enter确认）输入命令：npm -v，如果成功，会显示版本号。

 

2、下载cesiumjs项目

官网下载地址：http://cesiumjs.org/downloads.html

 

2：前台代码部分（入门级别都改知道的）

<HTTP>

    <style>
    @import url(../templates/bucket.css);
　</style>
　　<div id="cesiumContainer" class="fullSize"></div>
　　<div id="loadingOverlay"><h1>Loading...</h1></div>
　　<div id="toolbar"></div>

　　<这里放你后台的JS  文件  或者直接前台直接script 也行  >

</HTTP>

3：JS  代码   注：如果本地不能运行（多半环境没配好），可以去粘贴到网址上去 （http://www.marsgis.cn/cesium/docs/go.html?id=14）

<script>

    　　var viewer = new Cesium.Viewer(‘cesiumContainer‘);
            viewer.clock.shouldAnimate = true;
            var start=-110,startpoint=15,end=-110,endpoint=15,Zer=-100,Zerpoint=16;

            function getMidpoint() {
                end+=0.01;
                if (end>=-110&&end>=-100) {
                    end=-100;
                    Zerpoint+=0.01;
                    if(Zerpoint<=20)
                    {
                        return Cesium.Cartesian3.fromDegreesArray([start, startpoint,
                            end, endpoint,Zer,Zerpoint
                        ]);
                    }else if(Zerpoint>=20)
                    {
                        Zerpoint=20;
                        return Cesium.Cartesian3.fromDegreesArray([start, startpoint,
                            end, endpoint,Zer,Zerpoint
                        ]);
                    }

                }else
                {
                    return Cesium.Cartesian3.fromDegreesArray([start, startpoint,
                        end, endpoint
                    ]);
                }

            }

            function computeCircle(radius) {
                var positions = [];
                for (var i = 0; i < 360; i++) {
                    var radians = Cesium.Math.toRadians(i);
                    positions.push(new Cesium.Cartesian2(radius * Math.cos(radians), radius * Math.sin(radians)));
                }
                return positions;
            }


            // 用计算长度标注折线。
            var lable= viewer.entities.add({
                polylineVolume : {
                    positions : new Cesium.CallbackProperty(getMidpoint, false),
                    shape : computeCircle(100000.0),
                    material : Cesium.Color.WHITE.withAlpha(0.4)

                }
            });
            viewer.zoomTo(lable);

            viewer.trackedEntity = lable;

</script>