cesium模型位置调整
使用经纬度坐标创建entity
let circle01 = viewer.entities.add({ // position: new Cesium.Cartesian3(-2458283.9120733286, 4760603.561249552, 3448793.686233579), position: Cesium.Cartesian3.fromDegrees( 117.31095238646725, 32.944383619060055, 16.44461196856918 + 4 ), // ellipsoid: { // radii: new Cesium.Cartesian3(4.0, 4.0, 4.0), // material: Cesium.Color.fromRandom({ alpha: 1.0 }), // }, box: { dimensions : new Cesium.Cartesian3(5, 5, 8), material : Cesium.Color.fromRandom({ alpha: 1.0 }),//转换颜色 outline : false, outlineColor : Cesium.Color.BLACK }, label: { //文字标签 text: "文字标签", font: '500 20px Helvetica',// 15pt monospace scale: 1, style: Cesium.LabelStyle.FILL, fillColor: Cesium.Color.WHITE, // pixelOffset: new Cesium.Cartesian2(0, 0), //偏移量 eyeOffset: new Cesium.Cartesian3(0.0, 70.0, -15.0), // horizontalOrigin: Cesium.HorizontalOrigin.LEFT, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, showBackground: true, // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // disableDepthTestDistance: Number.POSITIVE_INFINITY, // backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0) //背景顔色 }, });
// 获取实体经纬度坐标并赋值 let p = worldToLng(viewer, circle01.position._value); console.log("worldToLng", circle01.position._value, p) circle01.lcx_x = p.x; circle01.lcx_y = p.y; circle01.lcx_z = p.z;
设置entity位置动态监听,注意这里不能在场景没有加载完的情况下设置,所以我加了延迟设置,其实可以在页面交互时,动态给entity设置属性动态监听
setTimeout(() => { circle01.position = new Cesium.CallbackProperty(function () { return Cesium.Cartesian3.fromDegrees( circle01.lcx_x, circle01.lcx_y, circle01.lcx_z ); }, false); }, 2000)
绑定键盘事件
// 选中球 w 球向上移动 s 球向下移动 window.addEventListener("keydown", (e) => { switch (e.keyCode) { case 87: circle01.lcx_z += 1; break; case 83: circle01.lcx_z -= 1; } console.log("e.keyCode", e.keyCode, "circle01.lcx_z", circle01.lcx_z) });
鼠标左键按下,拾取 entity
// 鼠标左键按下,拾取 entity handler.setInputAction(function (e) { // 拾取坐标 var pick = viewer.scene.pick(e.position); if (pick && pick.id) {// 禁止相机移动 viewer.scene.screenSpaceCameraController.enableInputs = false; if (entitySelected && entitySelected == pick.id) { return; }// 获取实体 entity entitySelected = pick.id; // 获取实体坐标并赋值给 position let p = worldToLng(viewer, entitySelected.position._value); position.x = p.x; position.y = p.y; position.z = p.z; // position 添加 callbackProperty entitySelected.position = new Cesium.CallbackProperty(function () { return Cesium.Cartesian3.fromDegrees( position.x, position.y, position.z ); }, false); } else { entitySelected = undefined; viewer.scene.screenSpaceCameraController.enableInputs = true; } }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
坐标转换
/*** * 坐标转换 笛卡尔转84 * * @param {Object} Cartesian3 三维位置坐标 * * @return {Object} {lng,lat,alt} 地理坐标 */ function transformCartesianToWGS84(cartesian, viewer) { if (viewer && cartesian) { var ellipsoid = Cesium.Ellipsoid.WGS84; var cartographic = ellipsoid.cartesianToCartographic(cartesian); return { lng: Cesium.Math.toDegrees(cartographic.longitude), lat: Cesium.Math.toDegrees(cartographic.latitude), alt: cartographic.height, }; } } /*** * 坐标转换 84转笛卡尔 * * @param {Object} {lng,lat,alt} 地理坐标 * * @return {Object} Cartesian3 三维位置坐标 */ function transformWGS84ToCartesian(position, alt, viewer) { if (viewer) { return position ? Cesium.Cartesian3.fromDegrees( position.lng || position.lon, position.lat, position.alt = alt || position.alt, Cesium.Ellipsoid.WGS84 ) : Cesium.Cartesian3.ZERO } }