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
相关推荐
前端大卫30 分钟前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
zhooyu40 分钟前
C++和OpenGL手搓3D游戏编程(20160207进展和效果)
开发语言·c++·游戏·3d·opengl
却尘1 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare1 小时前
浅浅看一下设计模式
前端
Lee川1 小时前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix1 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人1 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl1 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人2 小时前
vue3使用jsx语法详解
前端·vue.js