cesium 添加model及其增删改

cesium添加模型非常简单，通过其Cesium.model.接口，可以添加基于GLTF的模型，这里我们通过Cesium.Model.fromGltf()方法。来添加我们的模型。测试模型都是用网上的，3dmax的需要导出成fbx之后，通过win10自带的3d模型查看器加入到地图上的。

API接口

我们用不到所有的只需要添加进来

var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                    url : Model_URL,
                    scale : Model_Scale,
                    heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
                    color:Cesium.Color.fromCssColorString('#ffffff'),

                }));

其中URL是模型的地址，scale是模型的尺寸，heightReference是模型高度的参考。color是模型的颜色（颜色会与材质融合）
接下来我们要把它添加到地图上我们指定的地点。

function update3dtilesMaxtrix(model,params) {
            //旋转
            var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
            var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
            var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
            var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
            var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
            var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
            //平移
            var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
            var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            //旋转、平移矩阵相乘
            Cesium.Matrix4.multiply(m, rotationX, m);
            Cesium.Matrix4.multiply(m, rotationY, m);
            Cesium.Matrix4.multiply(m, rotationZ, m);
            //赋值给model
            model.modelMatrix = m;
        }

由于我们直接添加的primitives，所以我们可以直接修改model的投影矩阵，来直接放置到我们需要的地图上。我们可以点击地球来获取我们需要的位置。

var handler1 = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        handler1.setInputAction(function (movement) {
            cancelfocus();
            if(addModel == true){
                let ray = viewer.camera.getPickRay(movement.position);
                let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var lat = Cesium.Math.toDegrees(cartographic.latitude);
                var lng = Cesium.Math.toDegrees(cartographic.longitude);
                var alt1 = cartographic.height;

                var params= {
                    tx: lng,  //模型中心X轴坐标（经度，单位：十进制度）
                    ty: lat,    //模型中心Y轴坐标（纬度，单位：十进制度）
                    tz: alt1,    //模型中心Z轴坐标（高程，单位：米）
                    rx: 0,    //X轴（经度）方向旋转角度（单位：度）
                    ry: 0,    //Y轴（纬度）方向旋转角度（单位：度）
                    rz: 0      //Z轴（高程）方向旋转角度（单位：度）
                };

                var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                    url : Model_URL,
                    scale : Model_Scale,
                    heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
                    color:Cesium.Color.fromCssColorString('#ffffff'),

                }));
                model.type = "model";
                model.tx = lng;
                model.ty = lat;
                model.tz = alt1;
                model.rx = 0;
                model.ry = 0;
                model.rz = 0;
                update3dtilesMaxtrix(model,params);

                addModel = false;
            }
       }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

这样我们就可以成功的将模型添加到我们点击在地球上的位置了，或者我们还可以移动我们的model只需在鼠标事件中获取我们需要的位置坐标就行了，注意我们再将其添加到模型高度上时，他是将自身也会算入其中，会导致越来越高（除非快速移动到另外一个模型上）。但是如果根据
地形就不会有这个问题。但是就无法添加到模型上去（取舍看自己需求）。所以我添加的时候因为不会选中model所以是获取模型的高度，之后进行平移时，也是获取的模型高度，但是不改变自身model的模型高度，高度获取的就是添加时存入到model里的高度。

let ray = this.viewer.camera.getPickRay(movement.endPosition);//movement是屏幕坐标
            let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);//获取在地球上的点
            console.log(cartesian);

            if(typeof pointDraged.primitive.type =="undefined"){
                return;
            }

            var cartesian2 = viewer.scene.pickPosition(movement.endPosition);//获取鼠标点击上模型的坐标
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var ellipsoid = viewer.scene.globe.ellipsoid;
            var a1 = ellipsoid.cartesianToCartographic(cartesian);
            var lat = Cesium.Math.toDegrees(cartographic.latitude);
            var lng = Cesium.Math.toDegrees(cartographic.longitude);
            var alt1 = cartographic.height;

这样在通过上面的修改model矩阵代码就能够对mode进行移动了。
删除model我是通过监听键盘的退格事件来完成的。

function getFlagForKeyCode(keyCode) {
        switch (keyCode) {
            case 8:
                if(typeof SelModel != "undefine"){
                    viewer.scene.primitives.remove(SelModel);
                    SelModel = "";
                }
                return "Backspace";
            default:
                return undefined;
        }
    }
    document.addEventListener('keydown', function (e) {
        var flagName = getFlagForKeyCode(e.keyCode);
    }, false);
    document.addEventListener("keyup", function (e) {
        var flagName = getFlagForKeyCode(e.keyCode);
    }, false);