Cesium 加载 本地 b3dm 格式文件 并且 获取鼠标点击处经纬度 (亲测可用)

很奇怪cesium 里面只支持 相对路径 不支持绝对路径

我把 模型放在 /***/Cesium-1.128/Apps/SampleData/Cesium3DTiles/Tilesets 下面
复制代码
"../../SampleData/Cesium3DTiles/Tilesets/terra_b3dms/tileset.json",

所有源码

复制代码
const viewer = new Cesium.Viewer("cesiumContainer", {
  shadows: true,
});

const viewModel = {
  height: 0,
};

Cesium.knockout.track(viewModel);

const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

let tileset;
try {
  tileset = await Cesium.Cesium3DTileset.fromUrl(
    "../../SampleData/Cesium3DTiles/Tilesets/terra_b3dms/tileset.json",
  );
  viewer.scene.primitives.add(tileset);
  viewer.scene.globe.depthTestAgainstTerrain = true;
  viewer.zoomTo(
    tileset,
    new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0),
  );
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

Cesium.knockout.getObservable(viewModel, "height").subscribe(function (height) {
  height = Number(height);
  if (isNaN(height) || !Cesium.defined(tileset)) {
    return;
  }

  const cartographic = Cesium.Cartographic.fromCartesian(
    tileset.boundingSphere.center,
  );
  const surface = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    0.0,
  );
  const offset = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    height,
  );
  const translation = Cesium.Cartesian3.subtract(
    offset,
    surface,
    new Cesium.Cartesian3(),
  );
  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});


//鼠标显示 位置

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(event){
    let ray = viewer.camera.getPickRay(event.position);
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度
    let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate.longitude);
    console.log(coordinate.latitude);
    console.log(coordinate.altitude);
    //console.log(longitude);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
输出坐标
复制代码
121.484453
31.361559
0
121.484535
31.361587
0
121.484766
31.361574
0
相关推荐
Edward Nygma20 分钟前
springboot3+vue3融合项目实战-大事件文章管理系统-更新用户密码
android·开发语言·javascript
那年一路北41 分钟前
多视图密集对应学习:细粒度3D分割的自监督革命
3d
sunbyte43 分钟前
Three.js + React 实战系列 - 职业经历区实现解析 Experience 组件✨(互动动作 + 3D 角色 + 点击切换动画)
javascript·react.js·3d
2401_831943321 小时前
Element Plus对话框(ElDialog)全面指南:打造灵活弹窗交互
前端·vue.js·交互
strongwyy1 小时前
DA14585墨水屏学习(2)
前端·javascript·学习
好青崧1 小时前
冒泡排序的原理
前端
椒盐螺丝钉1 小时前
CSS 基础知识分享:从入门到注意事项
前端·css
球球和皮皮1 小时前
Babylon.js学习之路《一、初识 Babylon.js:什么是 3D 开发与 WebGL 的完美结合?》
javascript·3d·前端框架·ar·vr
冬阳春晖2 小时前
web animation API 锋利的css动画控制器 (更新中)
前端·javascript·css
Python私教3 小时前
使用FastAPI和React以及MongoDB构建全栈Web应用05 FastAPI快速入门
前端·react.js·fastapi