Cesium之3DTileset实例管理

这篇具有很好参考价值的文章主要介绍了Cesium之3DTileset实例管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近使用Cesium结合ts和react自己手动搭建了一个基本界面,加载3dTiles数据和geojson数据,动态控制图层的显隐。本来以为是非常简单的功能,但是实际操作中发现有一些地方值得注意。

搭建的效果就是这个样子,经典的顶部header+左侧布局,主视窗显示地图:
Cesium之3DTileset实例管理
加载geojson数据源的方法很简单,Cesium.GeoJsonDataSource.load方法会返回Promise<Cesium.GeoJsonDataSource> 类型的Promise(resolve),给其指定一个固定的标识name。
代码:

  const shandongJson = Cesium.GeoJsonDataSource.load(
    '../mock/shandong.geojson',
    {
      clampToGround:true
    }
  )
  shandongJson.then((shandongJson)=>{
    shandongJson.name = '山东';
    viewRef.dataSources.add(shandongJson)
  })

因为有 Cesium.Viewer.dataSources.getByName() 方法,直接通过name属性获取对应的geojson对象。

// 涉及业务代码的部分就不放上了 重点是getByName方法
if (info.node.type === 'geojson' && viewer){
        viewer.dataSources.getByName(info.node.title as string)[0].show = info.checked;
      }

但是在加载3dTile数据时,就没这么方便了,当我向Viewer中同时添加json数据源和3dTile数据时,通过打印其存储位置,发现是这样的:
Cesium之3DTileset实例管理
在Cesium官网上查阅没有一个可以直接获取Cesium3DTileset对象实例的方法,通过index获取获取实例显然不太可行,没办法,只能想一个其它的方法用来存储Cesium3DTileset对象。于是使用Mobx建立全局store,思路如下,Redux和Vuex也是同理,只是语法不同。

import { action, extendObservable, runInAction } from "mobx";
import * as Cesium from 'cesium'
interface tileSetListProp {
  [key: string]: Cesium.Cesium3DTileset
}
interface OBSERVABLE_PROP {
  tileSetList: tileSetListProp
}
// 可观察属性
const OBSERVABLE: OBSERVABLE_PROP = {
  tileSetList: {},
};
// 建立下面的数据结构存储
//  {
//   key1: Cesium3DTileset1,
//   key2: Cesium3DTileset2,
// }
class Tiles {
  tileSetList: tileSetListProp = {}

  constructor() {
    extendObservable(this, {
      ...OBSERVABLE
    });
  }
	// 向容器中添加新的Cesium3DTileset
  @action.bound addTileSet = (key: string, tileSet: Cesium.Cesium3DTileset) => {
    runInAction(() => {
      this.tileSetList[key] = tileSet;
    });

  }

  @action.bound update(data: any) {
    Object.assign(this, data);
  }

}

export default new Tiles();

页面加载时:引入全局变量,在数据加载时把它存进去:addTileSet(‘Building’, tileBuilding), useStores是一个工具函数,直接采用mobx的inject引用是一样的,全局store如何使用就不赘述了,网上资料很多。

const Pages: FC = () => {
  const [viewer, setViewer] = useState<null | Cesium.Viewer>(null)
  const {
    tiles: {
      tileSetList,
      addTileSet
    }
  } = useStores()

  // const viewerRef = useRef<null | Cesium.Viewer>(null);
  useEffect(() => {
    const view = initViewer();
    initTile(view)
    setViewer(view);
    const MP = new MousePosition(view);
  }, [])

  const initTile = (viewer:Cesium.Viewer) => {
    const tileBuilding = viewer!.scene.primitives.add(
      new Cesium.Cesium3DTileset({ // 3d titles
        url: '../mock/tileset.json',
      })
    )

    tileBuilding.readyPromise
      .then(function (tileBuilding: Cesium.Cesium3DTileset) {
        addTileSet('Building', tileBuilding)
      })
      .catch(function (error: any) {
        console.log(error);
      });

    const tileBIM = viewer!.scene.primitives.add(
      new Cesium.Cesium3DTileset({ // 3d titles
        url: Cesium.IonResource.fromAssetId(8564),
      })
    )

    tileBIM.readyPromise
      .then(function (tileBIM: Cesium.Cesium3DTileset) {
        addTileSet('BIM', tileBIM)
      })
      .catch(function (error: any) {
        console.log(error);
      });
  }

  const add3DTile = (tileObj: TileProp) => {
    if (!viewer) return message.error('图层未加载');      
      viewer.zoomTo(
        tileSetList[tileObj.title],
        new Cesium.HeadingPitchRange( // heading pitch roll
          0.5,
          -0.2,
          tileSetList[tileObj.title].boundingSphere.radius * 4.0
        )
      );
      return
    }
  return (
    <div className={styles.cesiumPage}>
      <MapHeader
        viewer={viewer}
        onRadioChange={add3DTile}
      />
      <div className={styles.cesiumPageContainer}>
        <LayerEdit
          viewer={viewer}
        />
        <div className={styles.baseMapWrapper}>
          <Titles />
        </div>
      </div>
    </div>
  );
}
export default Pages

同样的,在左侧组件中通过Antd的Tree勾选节点可以很方便控制显隐: tileSetList[key].show = info.checked

// 引入全局Store,只用到了tileSetList
const {
    tiles: {
      tileSetList,
      addTileSet
    }
  } = useStores()
  
 ···
 ··· // 省略无用代码
 
// Tree选中节点的触发的事件
 const onCheck = (checkedKeys:any, info:CheckInfo) => {

      const layers = getLayersById(info)
      console.log('onCheck', checkedKeys, info, layers);
      // @ts-ignore
      if (info.node.type === 'geojson' && viewer){
        viewer.dataSources.getByName(info.node.title as string)[0].show = info.checked;
      }
      // @ts-ignore
      if (info.node.type === '3dtiles' && viewer){
        const key = info.node.title as string
        console.log('3dtiles',tileSetList,tileSetList[key])
        // get方法通过索引获取数组元素,实践证明不大好用
        // viewer.scene.primitives.get(info.node.key as number).show = info.checked; 
        tileSetList[key].show = info.checked // 设置显隐
      }
    };

这样子就达到目的了。
模型显示:
Cesium之3DTileset实例管理
模型隐藏:
Cesium之3DTileset实例管理文章来源地址https://www.toymoban.com/news/detail-477232.html

到了这里,关于Cesium之3DTileset实例管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CesiumForUnreal实现多边形裁剪3dTileset效果

    基于CesiumForUnreal插件的 Cartographic Polygon Actor在 Runtime 运行时环境下实现对地形3DTileset的多边形裁剪效果,GIF动图如下: 在Editor中的具体操作过程可以参考CesiumForUnreal官方裁剪地形的教程,本文这里在Runtime环境下进行实现。数据依旧是使用CesiumForUnreal插件加载在线的地形和影

    2024年02月13日
    浏览(55)
  • CesiumForUnreal之3DTileset点选拾取属性与单体高亮

    在UE5中使用CesiumForUnreal插件加载本地的3dTiles建筑白模数据,实现点击拾取3DTileset单体要素的 属性数据 ,并对 高亮单体 进行展示,GIF动图如下: 总体的实现过程分为 数据准备 、 属性拾取 和 单体高亮 三个大的部分,在本文中数据准备部分简要概述,拾取属性和单体高亮会

    2024年02月04日
    浏览(30)
  • vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理

     ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标:打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。 之前使用layui是时候 狠心升级下了。 只为了好看----------于是  小白教

    2024年01月16日
    浏览(36)
  • vue结合Cesium加载gltf模型

    Cesium支持什么格式?         Cesium支持的格式包括:3D模型格式(如COLLADA、gITF、OBJ)、影像格式(如JPEG、PNG、GeoTIFF)、地形格式(如STL、Heightmap)、矢量数据格式(如GeoJSON、KMZ)、时间动态数据格式(如CZML),以及其他各种数据格式。此外,Cesium还通过插件支持其他特

    2024年02月01日
    浏览(38)
  • vue3结合Cesium加载倾斜摄影3dtiles

            这篇文章主要是为了记录加载3dtiles时模型与地形有时候存在一些高度上的差异,为此将解决方法做一个记录,便于其他读者使用。         加载倾斜摄影3dtitle           调整倾斜摄影高度         调用方式:

    2024年02月02日
    浏览(62)
  • Cesium结合GIS天地图 加载倾斜摄影3dtile + vue3

    将倾斜摄影OSGB数据转换为3dtile(转换方式很多,可以利用第三方工具cesiumlab) 利用Cesium加载GIS地图,我这里使用的是天地图,可以加载其他地图都行 加载3dtile数据到地图中展示 以加载天地图为例,需要先到天地图官网去申请开发者,获取一个token,以下代码直接粘贴就行,注释

    2024年02月11日
    浏览(52)
  • 【WebGIS实例】(10)Cesium开场效果(场景、相机旋转,自定义图片底图)

    漫游效果视频: 【WebGIS实例】(10)Cesium开场效果(场景、相机 点击鼠标后将停止旋转并正常加载影像底图: 可以直接看代码,注释写得应该比较清楚了: 调用: 刚进入时就是直接加载这种图片作为SingleTileImageryProvider的,因为这样能够很快得加载出完整效果,而且不会像

    2024年02月12日
    浏览(38)
  • 使用Django自带的后台管理系统进行数据库管理的实例

    Django自带的后台管理系统主要用来对数据库进行操作和管理。它是Django框架的一个强大功能,可以让你快速创建一个管理界面,用于管理你的应用程序的数据模型。 使用Django后台管理系统,你可以轻松地进行以下操作: 数据库管理:你可以查看、添加、编辑和删除数据库中

    2024年02月15日
    浏览(55)
  • 使用DockerUI结合内网穿透工具轻松实现公网访问和管理docker容器

    DockerUI是一个docker容器镜像的可视化图形化管理工具。DockerUI可以用来轻松构建、管理和维护docker环境。它是完全开源且免费的。基于容器安装方式,部署方便高效,浏览和维护docker单节点或集群节点worker和manager。DockerUI具有易于使用的界面。它不需要记住 docker 指令。只需下

    2024年02月05日
    浏览(59)
  • Openstack使用Dashboard进行镜像操作、管理实例等其他操作

    一、OpenStack 介绍 OpenStack为私有云和公有云提供可扩展的弹性的云计算服务云计算服务云计算服务。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。 二、OpenStack 能做什么 OpenStack的主要目标是管理数据中心的资源,简化资源分配。它管理三部分

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包