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
相关推荐
乐兮创想 小林10 分钟前
B2B 内容营销的工程化运营:从内容矩阵建模到 SEO/GEO 联动的完整体系
前端·线性代数·矩阵·网站建设·北京网站建设公司
2501_9400417410 分钟前
全栈开发提速指南:可以直接用的项目生成提示词
前端·prompt
BomanGe211 分钟前
NSK直线导轨LH55EL与NH55EM替代指南
前端·javascript·数据库·经验分享·规格说明书
云水一下11 分钟前
Vue.js从零到精通系列(四):前端路由与Vue Router——打造多页单页应用
前端·javascript·vue.js
糯米导航14 分钟前
浏览器解析HTML头部的底层逻辑:从字节流到渲染树的关键一步
前端·html
ViavaCos15 分钟前
前端SSE实战指南
前端
风骏时光牛马18 分钟前
C++开发常见问题与解决方案汇总
前端
zhedream19 分钟前
Vue 3 Teleport 报错实录:从 patch 时机到 `defer` 属性
前端·vue.js
雁北向20 分钟前
自定义指令 数值输入显示优化 巴飞特 测试
前端·vue.js
研☆香22 分钟前
jQuery补充知识点
前端·javascript·jquery