cesium模型加载-点击-高亮

依托偶尔宁

于 2024-08-29 18:01:09 发布

阅读量306

点赞数 4

分类专栏： cesium 文章标签： javascript 前端

本文链接：https://blog.csdn.net/xy1580/article/details/141685022

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

cesium模型加载-点击-高亮

模型加载， Cesium3DTileset文档地址


var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
     url : 'http://localhost:8002/tilesets/Seattle/tileset.json'
}));

设置tileset的样式, Cesium3DTileStyle文档地址


tileset.style = new Cesium.Cesium3DTileStyle({
   color : {
       conditions : [
           ['${Height} >= 100', 'color("purple", 0.5)'],
           ['${Height} >= 50', 'color("red")'],
           ['true', 'color("blue")']
       ]
   },
   show : '${Height} > 0',
   meta : {
       description : '"Building id ${id} has height ${Height}."'
   }
});

业务需要点击相关数据对于模型id高亮

      // 点击数据获取id
      const filterLayer = (id) =>{
          let that = this
      
          let ids = [1,2,3];
          // 使用show regexp - 效率稍好
          const exp = ['${names} !== undefined && ', 'regExp("', ids.join('|'), '")', '.test(${names})'].join(
              '',
          )
          const falseExp = [
              '${names} === undefined || ',
              '!regExp("',
              ids.join('|'),
              '")',
              '.test(${names})',
          ].join('')
          const selExp = [
              '${names} !== undefined && ',
              '${names} === ',
              '"' + id + '"',
          ].join('')
          
          tileset.style = new Cesium.Cesium3DTileStyle({
              color: {
                  conditions: [
                      [selExp, 'rgba(0,0,0,0)'],
                      [falseExp, 'rgba(255,255,255,0)'],
                  ],
              },
              // show: exp,
          })
            // 如上 falseExp 代表需要隐藏的模型，设置color为透明也会隐藏掉模型， 设置 show: exp 也可以显示和隐藏模型，但是如果设置show为false的同时设置color的颜色会导致模型显示。设置selExp为rgba(0,0,0,0)表示高亮为红色。
            
      }