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
相关推荐
半醉看夕阳8 分钟前
HarmonyOS开发 ArkTS 之字符串的剖析
javascript·harmonyos·arkts
程序猿小D12 分钟前
第14节 Node.js 全局对象
linux·前端·npm·node.js·编辑器·vim
Mintopia17 分钟前
当代码遇见光影魔术师:用 JavaScript 揭秘环境光遮蔽的奇幻世界
前端·javascript·计算机图形学
Dignity_呱34 分钟前
别在傻傻分不清any void never unknown的场景啦
前端·vue.js·typescript
站在风口的猪110836 分钟前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5
crary,记忆1 小时前
Angular报错:cann‘t bind to ngClass since it is‘t a known property of div
前端·javascript·angular·angular.js
betterangela1 小时前
react私有样式处理
前端·react.js·前端框架
几何心凉1 小时前
如何处理React中表单的双向数据绑定?
前端·javascript·react.js
摸鱼仙人~1 小时前
React Hooks 指南:何时使用 useEffect ?
javascript·react.js·ecmascript
巴巴_羊1 小时前
React 新项目
前端·react.js·前端框架