main

分支 (1)

管理

管理

main

cesium_pdf
/
6.5三维模型篇_3D Tiles要素拾取.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>三维模型篇_3D Tiles要素拾取</title>
  <script src="./Build/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">

</head>
<style>
  html,
  body,
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>
<body>

  <div id="cesiumContainer"></div>

  <script>


    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
    var viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: true,  //是否显示地名查找工具
      homeButton: true,    //是否显示首页位置工具
      sceneModePicker: true,   //是否显示视角模式切换工具
      baseLayerPicker: true,   //是否显示默认图层选择工具
      animation: false, //是否显示动画工具
      timeline: false,  //是否显示时间轴工具
      fullscreenButton: false,  //是否显示全屏按钮工具
    });

    var tileSet = viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: "./3D格式数据/Tileset/tileset.json"
      })
    );
    //定位过去
    viewer.zoomTo(tileSet);

    // 创建div
    const newDiv = document.createElement("div");
    console.log('@viewer.container:',viewer.container);
    viewer.container.appendChild(newDiv);
    newDiv.style.display = "none";
    newDiv.style.position = "absolute";
    newDiv.style.bottom = "0";
    newDiv.style.left = "0";
    newDiv.style.padding = "4px";
    newDiv.style.backgroundColor = "white";

    //创建高亮要素对象
    const highlighted = {
      feature: undefined,  // 记录高亮要素
      originalColor: new Cesium.Color(),  // 记录高亮要素的原始颜色
    };

    // 鼠标移动事件
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (event) {
      //捕捉要素
      const pickedFeature = viewer.scene.pick(event.endPosition);
      console.log('@pickedFeature:',pickedFeature);

      //当未捕捉到要素时隐藏div
      if (!Cesium.defined(pickedFeature)) {
        // console.log('未捕捉到要素:',Cesium.defined(pickedFeature));  // false   pickedFeature为undefined
        newDiv.style.display = "none";
        return;
      }
      //否则若捕捉到要素
      else {
        //高亮显示

        // 1、重置高亮要素
        if (Cesium.defined(highlighted.feature)) { // 判断 高亮要素highlighted.feature 是否已定义
          // 若已定义，则将 highlighted.feature 的样式修改为初始颜色并设置 highlighted.feature 为未定义
          highlighted.feature.color = highlighted.originalColor;
          highlighted.feature = undefined;
        }

        // 2、设置新的高亮要素
        highlighted.feature = pickedFeature;
        Cesium.Color.clone(pickedFeature.color, highlighted.originalColor); // // 复制 pickedFeature 的当前颜色到 highlighted.originalColor，以便将来可以恢复
        pickedFeature.color = Cesium.Color.LIME.withAlpha(0.5); // 将 pickedFeature 的颜色设置为半透明的青柠色以实现高亮效果

        // 3、显示高度信息  提示高度
        newDiv.style.display = "block";  // 设置display属性为block，使newDiv元素可见。

        //加5 是为了不让div遮挡左键点击
        // viewer.canvas.clientHeight和viewer.canvas.clientWidth可能是获取Cesium视图容器高度和宽度的方法
        newDiv.style.bottom = `${viewer.canvas.clientHeight - event.endPosition.y + 5}px`; // 根据viewer画布的尺寸和事件的位置（event.endPosition），计算newDiv应该出现的位置，使其不会遮挡到用户点击的位置（通过加上5像素的偏移量来实现）。
        newDiv.style.left = `${event.endPosition.x}px`;

        const name = "Height:" + pickedFeature.getProperty("Height").toFixed(2) + "m"; // 从pickedFeature中获取“Height”属性，将其格式化为保留两位小数的字符串，并附加单位“m”，然后将这个字符串设置为newDiv的文本内容。
        newDiv.textContent = name;
      }


    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


  </script>
</body>

</html>