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);
网友评论