首页 / 浏览问题 / 三维GIS / 问题详情
webgl中自定义图标的平滑行动轨迹
31EXP 2021年09月15日
viewer.entities.add({
                position:cesium.Cartesian3.fromDegrees(item.x, item.y, item.z),
                name:'customer',
                billboard:{
                  image: require('../assets/image/rcxxtj/redSolider.png'),
                  width: 63,
                  height: 63,
                }
              });
目前是用这种方式在webgl中画出自定义的图片的,现在有三个经纬度位置,想让它经过这三个经纬度平滑移动。请教下怎么实现?(不是模型移动,是这个自定义的图片移动)

1个回答

你好,不管是模型还是图片,按照轨迹平滑移动都是参考我之前给你发的那篇博客,都能实现:https://blog.csdn.net/a873054267/article/details/86231494/ ;或者你也可以参考这个代码去写

function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer',{
            timeline:true
        });
        // viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
        //     url : 'https://dev.virtualearth.net',
        //     mapStyle : Cesium.BingMapsStyle.AERIAL,
        //     key : URL_CONFIG.BING_MAP_KEY
        // }));
        //Set the random number seed for consistent results.
        Cesium.Math.setRandomNumberSeed(3);

        //Set bounds of our simulation time
        var start = Cesium.JulianDate.fromDate(new Date(2017, 2, 25, 16));
        var stop = Cesium.JulianDate.addSeconds(start, 3600, new Cesium.JulianDate());

        //Make sure viewer is at the desired time.
        viewer.clock.startTime = start.clone();
        viewer.clock.stopTime = stop.clone();
        viewer.clock.currentTime = start.clone();
        viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //在时间结束后再次从开始重复
        viewer.clock.multiplier = 20;//时间流速

        //Set timeline to simulation bounds
        viewer.timeline.zoomTo(start, stop);//底部时间条控件调整



        var staticPosition = Cesium.Cartesian3.fromDegrees(-112.110693, 36.0994841, 1000);//静止的位置

        var entity = viewer.entities.add({

            //Set the entity availability to the same interval as the simulation time.
            // availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            //     start: start,
            //     stop: stop
            // })]),

            //Load the Cesium plane model to represent the entity
            // model: {
            //     //uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
            //     uri: 'xin01(1).glb',
            //     color: getColor('red', 1),
            //     minimumPixelSize: 54,//控制模型最小
            //     maximumScale:5//控制模型最大
            // },
            billboard: {
                image: './images/location4.png',
                width: 30,
                height: 40,
            },

            position: staticPosition,
            //实时轨迹显示
            path: {
                show: true,
                leadTime: 60,//飞机将要经过的路径,路径存在的时间
                trailTime: 60,//飞机已经经过的路径,路径存在的时间
                width: 1,//线宽度
                resolution: 1,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.3,//应该是轨迹线的发光强度
                    color: Cesium.Color.PALEGOLDENROD//颜色
                })
            }
        });
        window.entity = entity
        var aa,bb,cc,dd,ee,ff;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

        //设置鼠标左键单击回调事件
        handler.setInputAction(function (e) {
            console.log(entity)
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        viewer.clock.onTick.addEventListener(function(clock) {
            var curtime = viewer.clock.currentTime;
            //笛卡尔坐标
            var pos = entity._position.getValue(curtime, null);
            var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(pos);
            //经纬度坐标
            var lon = Cesium.Math.toDegrees(cartographic.longitude);
            var lat = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height;


            var line = turf.lineString([[aa, bb], [cc, dd]]);
            var point = turf.point([lon, lat]);

            turf.booleanContains(line, point);
            //         console.log(aa,bb,cc,dd)
            // console.log(lon, lat)
            //         console.log(turf.booleanContains(line, point))

            // }

            //
            //
            //     // getDistance (satrt, end){
            //     //     var geodesic = new Cesium.EllipsoidGeodesic();
            //     //     geodesic.setEndPoints(satrt, end);
            //     //     var distance = geodesic.surfaceDistance
            //         // return distance
            //     // }
            //     // console.log(aa,'1111111111111')
            //     // console.log(lon)
            //     //
            //     // if(aa==lon){
            //     //     console.log('=====================================')
            //     //     console.log(lon,lat,height)
            //     // }
            //
            //     // var pmpos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(Viewer.scene, pos);
            //     // var info = lon.toFixed(8) + "," + lat.toFixed(8) + "," + height.toFixed(8);
            //     // console.log(info);
            //
        });

        viewer.trackedEntity = entity;
        function getColor(colorName, alpha) {
            var color = Cesium.Color[colorName.toUpperCase()];
            return Cesium.Color.fromAlpha(color, parseFloat(alpha));
        }
        //根据geojson获取飞行路径
        Cesium.loadJson('New_Line_1.json').then(function (jsonData) {
            var lineArray = jsonData.features[0].geometry.coordinates;
            var property = new Cesium.SampledPositionProperty();
            for (var i = 0;  i< lineArray.length; i ++) {
                aa=lineArray[1][0]
                bb=lineArray[1][1]
                cc=lineArray[2][0]
                dd=lineArray[2][1]
                var lon = lineArray[i][0];
                var lat = lineArray[i][1];
                var dtime = 100*i;
                var time = Cesium.JulianDate.addSeconds(start, dtime, new Cesium.JulianDate());//时间递增
                var position = Cesium.Cartesian3.fromDegrees(lon, lat,11750);//位置变化
                property.addSample(time, position);
            }
            entity.position = property;
            entity.orientation = new Cesium.VelocityOrientationProperty(property);
        }).otherwise(function (error) {
            console.log(error);
        });
        //移动的原理:position参数包含时间和所处位置,根据当前时间得到位置
        //entity.position = circularPosition;
        //根据模型当前位置自动计算模型的旋转等参数
        //entity.orientation = new Cesium.VelocityOrientationProperty(circularPosition);
    }

6,087EXP 2021年09月16日
现在场景是两个士兵图片第一个跟着轨迹走到终点,图片能定住。然后再过来新两个士兵图片后,我把这整个方法又调了一次,轨迹也没问题,可是结束后,前面两个士兵图片消失了。怎么让每次执行的图片都不消失。viewer.clock.clockRange我也改了等于1了,上一次的图片还是会消失
...