3dtiles特性拾取的一个简单演示，带有悬停和选择行为

于 2019-10-12 14:31:06 发布
阅读量913 收藏 4
点赞数 1
分类专栏： gis方向 文章标签： cesium
原文链接：https://mp.csdn.net/mdeditor/102515998
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>day01</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet " href="./Cesium/Widgets/widgets.css">
</head>
<body>
        <div id="cesiumContainer"></div>
        <script>

    //----加载中国谷歌影像地图
    var guge=new Cesium.UrlTemplateImageryProvider({
      url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',
      tilingScheme:new Cesium.WebMercatorTilingScheme(),
      minimumLevel:1,
      maximumLevel:20
    });

    var viewer = new Cesium.Viewer('cesiumContainer', {
      //使用世界地形
     terrainProvider:Cesium.createWorldTerrain()
    });
    //设置地平面
    viewer.scene.globe.dephTestAgainstTerrain = true;

    //-------设置初始摄影机视图以查看曼哈顿地形
  var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248,40.69114333714821, 753);
  var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
  viewer.scene.camera.setView({
    destination:initialPosition,
    orientation:initialOrientation,
    endTransform:Cesium.Matrix4.IDENTITY
  })
      //加载纽约市建筑物瓦片
      var tileset = new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(5741)
      });
      viewer.scene.primitives.add(tileset);

      //HTML覆盖，用于在鼠标悬停时显示功能名称(及样式)
      var nameOverlay = document.createElement('div');
      viewer.container.appendChild(nameOverlay);
      nameOverlay.className = 'backdrop';
      nameOverlay.style.display = 'none';
      nameOverlay.style.position = 'absolute';
      nameOverlay.style.bottom = '0';
      nameOverlay.style.left = '0';
      nameOverlay.style['pointer-events'] = 'none';
      nameOverlay.style.padding = '4px';
      nameOverlay.style.backgroundColor = 'yellow';
    
      //有关当前选定功能的信息
      var selected = {
        feature:undefined,
        originalColor:new Cesium.Color()
      };

//一个实体对象，它将保存有关当前选定功能的信息以供信息框显示
      var selectedEntity = new Cesium.Entity();

//当在左键单击时未拾取某个功能时，获取默认的左键单击处理程序
var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

//如果支持剪影，则鼠标悬停时剪影功能为蓝色，鼠标单击时剪影功能为绿色。
//如果不支持轮廓，请在鼠标悬停时将特征颜色更改为黄色，在鼠标单击时更改为绿色。
if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
    //支持剪影(悬停时为蓝色)
    var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
    silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
    silhouetteBlue.uniforms.length = 0.01;
    silhouetteBlue.selected = [];
    //鼠标单击时剪影为绿色
    var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
    silhouetteGreen.uniforms.color = Cesium.Color.LIME;
    silhouetteGreen.uniforms.length = 0.01;
    silhouetteGreen.selected = [];
    //处理结果
    viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));

 //悬停时剪影蓝色特征。
    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
 //如果以前突出显示过某个功能，请撤消突出显示。
      silhouetteBlue.selected = [];

      //选择新功能
      var pickedFeature = viewer.scene.pick(movement.endPosition);  //当前元素，最后的位置
      if (!Cesium.defined(pickedFeature)) {
          nameOverlay.style.display = 'none';   //显示功能名称及样式
          return;
      }

     // 选择了一个功能，因此显示它的覆盖内容
        nameOverlay.style.display = 'block';
        nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
        nameOverlay.style.left = movement.endPosition.x + 'px';
        var name = pickedFeature.getProperty('name');
        if (!Cesium.defined(name)) {
            name = pickedFeature.getProperty('id');
        }
        nameOverlay.textContent = name;

       //如果尚未选择该功能，则突出显示该功能。
        if (pickedFeature !== selected.feature) {
            silhouetteBlue.selected = [pickedFeature];
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    //剪影选择的功能并在信息框中显示元数据。
    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
        //如果先前选择了某个功能，则撤消突出显示
        silhouetteGreen.selected = [];

        //选择新功能
        var pickedFeature = viewer.scene.pick(movement.position);
        if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
        }

        //如果功能尚未选定，请选择它
        if (silhouetteGreen.selected[0] === pickedFeature) {
            return;
        }

        //保存所选特征的原始颜色
        var highlightedFeature = silhouetteBlue.selected[0];
        if (pickedFeature === highlightedFeature) {
            silhouetteBlue.selected = [];
        }
        
        //突出显示新选择的功能
        silhouetteGreen.selected = [pickedFeature];

        //设置功能信息框说明
        var featureName = pickedFeature.getProperty('name');
        selectedEntity.name = featureName;
        selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
        viewer.selectedEntity = selectedEntity;
        selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
                                     '<tr><th>BIN</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +
                                     '<tr><th>DOITT ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +
                                     '<tr><th>SOURCE ID</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +
                                     '</tbody></table>';
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
} else {
    //不支持剪影。相反，请更改特征颜色。

    //关于当前突出显示的功能的信息
    var highlighted = {
        feature : undefined,
        originalColor : new Cesium.Color()
    };

    //悬停时将特征涂成黄色。
    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
        //如果以前突出显示过某个功能，请撤消突出显示
        if (Cesium.defined(highlighted.feature)) {
            highlighted.feature.color = highlighted.originalColor;
            highlighted.feature = undefined;
        }
        //选择新功能
        var pickedFeature = viewer.scene.pick(movement.endPosition);
        if (!Cesium.defined(pickedFeature)) {
            nameOverlay.style.display = 'none';
            return;
        }
        //选择了一个功能，因此显示它的覆盖内容。
        nameOverlay.style.display = 'block';
        nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
        nameOverlay.style.left = movement.endPosition.x + 'px';
        var name = pickedFeature.getProperty('name');
        if (!Cesium.defined(name)) {
            name = pickedFeature.getProperty('id');
        }
        nameOverlay.textContent = name;
        
        //如果尚未选择该功能，则突出显示该功能。
        if (pickedFeature !== selected.feature) {
            highlighted.feature = pickedFeature;
            Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
            pickedFeature.color = Cesium.Color.YELLOW;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    //为所选内容上色，并在信息框中显示元数据。
    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
        // If a feature was previously selected, undo the highlight
        if (Cesium.defined(selected.feature)) {
            selected.feature.color = selected.originalColor;
            selected.feature = undefined;
        }
        //选择新功能
        var pickedFeature = viewer.scene.pick(movement.position);
        if (!Cesium.defined(pickedFeature)) {
            clickHandler(movement);
            return;
        }
        //如果功能尚未选定，请选择它
        if (selected.feature === pickedFeature) {
            return;
        }
        selected.feature = pickedFeature;
        //保存所选特征的原始颜色
        if (pickedFeature === highlighted.feature) {
            Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
            highlighted.feature = undefined;
        } else {
            Cesium.Color.clone(pickedFeature.color, selected.originalColor);
        }
        //突出显示新选择的功能
        pickedFeature.color = Cesium.Color.LIME;
        //设置功能信息框说明
        var featureName = pickedFeature.getProperty('name');
        selectedEntity.name = featureName;
        selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
        viewer.selectedEntity = selectedEntity;
        selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
                                     '<tr><th>BIN</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +
                                     '<tr><th>DOITT ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +
                                     '<tr><th>SOURCE ID</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +
                                     '<tr><th>Longitude</th><td>' + pickedFeature.getProperty('longitude') + '</td></tr>' +
                                     '<tr><th>Latitude</th><td>' + pickedFeature.getProperty('latitude') + '</td></tr>' +
                                     '<tr><th>Height</th><td>' + pickedFeature.getProperty('height') + '</td></tr>' +
                                     '<tr><th>Terrain Height (Ellipsoid)</th><td>' + pickedFeature.getProperty('TerrainHeight') + '</td></tr>' +
                                     '</tbody></table>';
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}


        </script> 
    </body>
</html>

拾取图

三星程序饲养员
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值