SuperMap iClient3D for Cesium实现鼠标移动到模型上显示模型属性内容

实现效果展示

1、iDesktop处理模型数据

首先在iDesktop中对模型生成缓存，其中属性存储类型选择Attribute。

生成缓存属性（Attribute）是指将数据源中的属性数据进行缓存，以加快对属性数据的访问速度。如果需要对属性数据进行查询、筛选或显示等操作，就可以直接从三维服务中获取数据，而无需发布数据服务，从而提高数据访问的效率和响应速度。

2、使用label实现

var url = 'http://localhostXXX/iserver/services/3D-CBD/rest/realspace';
var promise = scene.open(url);

Cesium.when(promise, function (layers) {
  for (var i = 0; i < layers.length; i++) {
    layers[i].indexedDBSetting.isAttributesSave = true;//将图层属性保存到IndexedDB数据库中
  }
  var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);//创建一个屏幕空间事件处理程序，监视鼠标在场景中的移动

  var labelEntity = viewer.entities.add({//创建一个实体对象，用于显示标签
    label: {
      show: false,
      showBackground: true,
      font: '14px monospace',
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      pixelOffset: new Cesium.Cartesian2(15, 0)
    }
  });
  //当用户在屏幕上移动鼠标时执行回调函数
  handler.setInputAction(function (movement) {
    var foundPosition = false;//定义一个变量，表示是否找到了选择的位置
    var position = scene.pickPosition(movement.endPosition);//获取鼠位置的三维坐标
    var pickedObj = scene.pick(movement.endPosition);//获取鼠标位置拾取到的模型对象
    var layerName = pickedObj.primitive._name;//获取选择的模型所在的图层名称
    var queryLayer = scene.layers.find(layerName)//获取选择的模型所在的图层

    if (queryLayer.getSelection().length > 0) {//0000如果选择了至少一个模型
      const selectedId = Number(queryLayer.getSelection()[0]);//获取选择模型的id
      console.log(selectedId)
      queryLayer.getAttributesById([selectedId]).then(function (atts) {//获取选择模型的属性，并在promise对象完成时执行回调函数
        var cartesian = viewer.scene.pickPosition(movement.endPosition);//获取鼠标位置的三维坐标
        if (Cesium.defined(cartesian)) {//如果找到了选择的位置
          console.log(atts.MODELNAME)
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);//将三维坐标转换为经纬度坐标
          labelEntity.position = cartesian;//设置标签实体的位置
          labelEntity.label.show = true;//显示标签实体
          labelEntity.label.text ='编号: ' + atts.MODELNAME;//设置标签实体的文本内容为模型的属性值
          //设置标签实体的垂直偏移量，以便在地球表面和笛卡尔坐标系中正确显示标签
          labelEntity.label.eyeOffset = new Cesium.Cartesian3(50.0, 50.0, -                
                cartographic.height * (scene.mode === Cesium.SceneMode.SCENE2D ? 1.5 : 1.0));
          foundPosition = true;//表示已找到选择的位置
           }
      })
   }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

3、使用div实现

//添加一个div用来展示字段内容
var labelDiv = document.createElement('div');
labelDiv.style.display = 'none';
labelDiv.style.position = 'absolute';
labelDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
labelDiv.style.color = 'white';
labelDiv.style.padding = '5px';
labelDiv.style.fontFamily = 'monospace';
labelDiv.style.fontSize = '14px';
document.body.appendChild(labelDiv);


handler.setInputAction(function (movement) {
      var foundPosition = false;
      var position = scene.pickPosition(movement.endPosition);
      var pickedObj = scene.pick(movement.endPosition);
      var layerName = pickedObj.primitive._name;
      var queryLayer = scene.layers.find(layerName);

      if (queryLayer.getSelection().length > 0) {
              const selectedId = Number(queryLayer.getSelection()[0]);
              queryLayer.getAttributesById([selectedId]).then(function (atts) {
              var cartesian = viewer.scene.pickPosition(movement.endPosition);
              if (Cesium.defined(cartesian)) {
              var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
              var pixelPos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
              if (Cesium.defined(pixelPos)) {
                        labelDiv.style.left = pixelPos.x + 'px';
                        labelDiv.style.top = pixelPos.y + 'px';
                        labelDiv.innerHTML = '编号: ' + atts.MODELNAME;
                        labelDiv.style.display = 'block';
                        foundPosition = true;
                        }
                    }
                });
             }

        if (!foundPosition) {
                labelDiv.style.display = 'none';
      }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);