supermap 实现单体化模型点选及自定义信息框弹出

在三维技术中，最常使用到的就是模型的点选，点击三维场景中的某一个具体模型时，能展示模型的基本信息及从后台获取的其它相关信息。这一个过程涉及到了模型的单体化技术及WebGL的查询技术，如果采取的建模方式是CAD建模，那么单体化这步可以忽略，如果是采用倾斜摄影，则需要选择合适的单体化技术将整个三维场景（“一张皮”）分成一个个的单体并赋予ID，进而实现每个“单体”的识别和属性查询。

相关视频资料
单体化技术：http://support.supermap.com.cn/product/VedioPlay.aspx?id=210

倾斜摄影数据查询：http://support.supermap.com.cn/product/VedioPlay.aspx?id=307

supermap 属性查询在线范例：http://support.supermap.com.cn:8090/webgl/examples/editor.html#S3MTiles

---

一、数据集处理

通过 supermap 的属性查询可以获取到数据集上的模型属性信息如 SMID、经纬度等，而对于一些模型相关的业务信息，有2种方式获取：
（1）将模型信息存储在服务器中，拿到 SMID 后去服务器中获取相对应的数据，这种方式有其便利性，当模型的业务信息有变动时，无需更改模型数据集直接修改服务器的数据即可，但存在的问题是当模型有变动时 SMID 也可能会有变动（当删除了某个模型后会造成其它模型 SMID 的改变），导致服务器存储的 SMID 与模型实际的 SMID 不匹配。
（2）将模型信息存储在数据集中，这种做法请求一次网络即可获得所有数据，缺点是当模型有更新时，需要重新录入模型的数据。
如果模型数据信息量不大，而且基本不发生改变的话，可以选择第二种方式；如果模型相关的数据存在变动的可能性较大，基础模型也可能会更新或修改的话，建议选择第一种方式，但是不推荐以 SMID 为查询值，需要建模人员在建立模型时按照约定好的格式进行建模和场景的导出（以 CAD 建模为例，可统一约定模型的 modelName 属性值，使得每次重新建模后，modelName 属性始终与模型一一对应而不发生改变，服务器也以 modelName 来存储模型信息实现数据同步）

以下介绍如何处理数据集数据，如果选择第一种查询方式且无需对数据集进行修改的可跳过这一步骤。

1、修改属性表
选中数据集后右键→点击【属性】

数据集属性菜单
右边将出现属性面板，选择里面的【属性表】选项，将出现以下界面，可以看到一些系统内置的属性信息，也可增加一些业务需求上的属性信息：点击【添加】→双击新增的属性表格进行编辑，定义好属性的类型和长度→点击【应用】
属性面板

2、关联浏览属性数据
首先新建一个球面场景，将数据集拖入新建的球面场景中。
然后在【图层管理器】中选中当前图层→右键→点击【关联浏览属性数据】

关联浏览属性菜单

将弹出一个与场景同步关联的数据集窗口如下

弹出关联浏览属性表

在场景中选中要修改的模型，数据集将同步选中模型对应的数据，双击单元格即可编辑信息

修改关联浏览属性表

二、属性查询

属性查询依赖 S3MTilesLayer 和 Viewer 两个对象类，先通过 S3MTilesLayer 的 setQueryParameter 方法设置属性查询参数，再使用 Viewer 的 pickEvent 方法获取选中模型的属性信息。

1、自定义信息弹出框
自定义弹出框的布局，样式此处省略

   <div id="custom-info-box" class="custom-info-box">
      <!-- 自定义描述信息 -->
      <div class="custom-info-box-content" id="custom-info-box-content">
        <p id="info-main"></p>
        <p id="info-desc"></p>
      </div>
      <!-- 自定义图片 -->
      <img id="info-img" src="./images/info-box-bar.png" alt="" />
    </div>

2、设置属性查询参数及处理模型选中事件

<script type="text/javascript">
function onload(Cesium) {
    ........ // 此处需先加载s3m缓存资源，详细见这篇文章：https://www.jianshu.com/p/6d2d2bce5ef9
    
   // 将自定义弹出框设为系统的属性查询弹出框
   var customInfobox = document.getElementById('custom-info-box')
   viewer.customInfobox = customInfobox

   // 设置属性查询参数
   var layer = viewer.scene.layers.find(layerName);    // layerName 为设置进行属性查询的图层名称 
   layer.setQueryParameter({
      url: dataUrl,       // dataUrl 为 数据服务 url ，目录到 data 这一级                  
      dataSourceName: dataSourceName,       // dataSourceName 为数据源名称
      dataSetName: dataSetName,            // dataSetName 为数据集名称
      keyWord: 'SmID',                   // 查询关键字默认填写 SmID
  });

   // 处理模型选中事件
   var infoImg = document.getElementById('info-img')
   var infoMain = document.getElementById('info-main')
   var infoDesc = document.getElementById('info-desc')
   viewer.pickEvent.addEventListener(function(feature) {       // 对 pickEvent 事件进行监听
     var smID = feature.SMID || ' '          // 如果数据存储在其它地方，这里拿到smID或设置的查询关键字后直接请求后台
     infoMain.innerText = feature.LABELNAME || ' '       // 注意，feature 里的属性名称都要大写
     infoDesc.innerText = feature.LABELDESC || ' '
     infoImg.src = feature.URL || ' '
  })
}
</script>