cesium鼠标控制键盘_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);