cesium在线加载3DTileset

已于 2024-03-29 09:21:21 修改
阅读量427 收藏 9
点赞数 5
文章标签： html
于 2024-03-29 09:18:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uiop5988110/article/details/137132342
版权
本文展示了如何使用Cesium.js库在一个HTML页面中创建一个3D地图视图，通过CesiumIon获取数据并加载CBD_D.json文件，实现地图的动态缩放和定位。
摘要由CSDN通过智能技术生成

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />

    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="cesiumContainer" class="fullSize"></div>

    <script>
      // Get your token from https://cesium.com/ion/tokens
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";

      const viewer = new Cesium.Viewer("cesiumContainer", {
        //shadows: true,
      });
      const tileset = new Cesium.Cesium3DTileset({
        url: "cbd_D.json",
      });

      tileset.readyPromise.then(function (tileset) {
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(
          tileset,
          new Cesium.HeadingPitchRange(
            0.0,
            -0.5,
            tileset.boundingSphere.radius * 2.0
          )
        );
      });
    </script>
  </body>
</html>

知识学习中
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cesium加载tileset_cesium入门示例-3dTiles加载
weixin_39847556的博客
12-21 1173
数据转换工具采用cesiumlab1.5.17版本，转换后的3dTiles加载显示比较简单，通过Cesium.Cesium3DTileset接口指定url即可，3dTiles文件可与js前端代码放置一起，也可是远程服务器上的地址。如下：1 //故宫2 var palaceTileset = newCesium.Cesium3DTileset({3 url: './TestData/outp...
Cesium在线加载3DTiles模型
renyuhost的博客
04-12 277
Cesium在线加载3DTiles模型，可在线预览模型，要通过配置参数调整模型的显示效果，支持的参数为：经度、纬度、高度、偏航角、俯仰角、翻转角
cesium 加载3D建筑模型（3D tiles）
最新发布
weixin_40451732的博客
05-31 1731
上面的模型都是cesium自带的，如果是自己的模型，怎么加载呢？有两种方式：通过方式[官网地址](上传到cesiumion自己的资源中，会生成一个id，然后用前面的方法学习视频参考文章。
Cesium 加载Cesium3DTileset（b3dm）
yk583443123的博客
12-13 5127
Cesium.Ion.defaultAccessToken="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMzc2ZWEzNS01MTUxLTQ4MDctYjA2OC00ZGNlNjVmZmY3MjAiLCJpZCI6MTExNjAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTgzMjg1MjV9....
Cesium入门之十：Cesium加载3DTiles数据
热门推荐
九仞山的专栏
06-13 1万+
详细介绍了3DTiles文件的数据结构及Cesium加载3DTiles数据的相关类
cesium加载3dtiles格式的倾斜摄影模型数据
05-03
该资源是3dtiles格式的倾斜摄影模型数据，可供用cesium加载模型提供该格式的数据源
cesium直接加载的3dtiles格式文件
10-16
总的来说，Cesium加载3DTiles技术是现代GIS和Web应用中处理大规模3D数据的关键工具，它的高效性和灵活性使得复杂的3D场景在Web环境中得以流畅呈现。无论是用于建筑、地形、城市规划，还是地质勘探，Cesium和3DTiles...
vue2 - SuperMap3D加载3DTileset模型切片服务地址
11-17
3DTileset是Cesium.js推出的一种高效、动态的3D地形和模型数据分发格式，它通过将大规模3D模型切割成多个小块（tiles），按需加载，以提高渲染性能和用户体验。SuperMap 3D支持这种格式，允许用户在Web环境中无缝...
cesium 可加载的倾斜摄影数据
01-10
通过Cesium加载倾斜摄影数据，用户可以在Web浏览器中实现无缝的、高分辨率的三维地球体验，同时享受高效的性能和丰富的交互功能。对于开发人员来说，掌握如何处理和加载这类数据是创建逼真三维地理应用的关键技能。
cesium跨域加载问题
02-20
在提供的压缩包文件中，`cesium加载资源目标站点跨域设置-需要的jar和详细说明`可能包含了实现上述跨域配置所需的额外Java库和更详细的步骤指南。请参照文件中的说明进行操作。如果你遇到困难，查阅Cesium和Tomcat的...
cesium 3dtiles
08-04
详细介绍了cesium与3dtiles的关系，对于入门者来说可以快速掌握3dtiles的基本概念和结构。
cesium加载tileset_cesium编程入门(六)添加 3D Tiles，并调整位置，贴地
weixin_39927214的博客
12-21 1334
添加 3D Tiles，并调整位置3D Tiles 是什么3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集，3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的，并且格式公开的数据格式。3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。3D T...
cesium在线或者本地添加地形图
群来群往的博客
11-13 3560
在线调用远程的地形图(有版本要求)： var worldTerrain = Cesium.createWorldTerrain({     requestWaterMask: true,     requestVertexNormals: true }); var viewer = new Cesium.Viewer('cesiumContainer', {     terrainProvid...
cesium本地部署、在线部署
03-09 2110
node部署cesium 官网下载cesium：https://cesium.com/downloads/ 打开cesium文件夹，执行命令：cnpm i 安装依赖 启动：npm start 访问：http://localhost:8080/
cesium入门（四）3D Tiles，模型旋转
processing
04-05 5574
旋转矩阵 设计步骤： 设置视图中模型的参数，并将其与工具条绑定 加载模型数据 相机视角设置 监控模型各个参数的变化 完成代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" ...
Cesium之3DTileset实例管理
qq_37987033的博客
08-12 4029
最近使用Cesium结合ts和react自己手动搭建了一个基本界面，需要加载3dTiles数据和geojson数据，动态控制图层的显隐。
cesium加载Cesium3DTileset到指定位置
06-07
要将Cesium3DTileset加载到指定位置，您可以使用Cesium中的`Entity`对象。以下是一个简单的示例代码： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 创建Entity对象 var tilesetEntity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), // 指定位置 model: { uri: 'path/to/tileset.json' // 指定模型路径 } }); // 加载3D模型 var tileset = new Cesium.Cesium3DTileset({ url: 'path/to/tileset.json' }); // 将模型绑定到Entity对象上 tilesetEntity.model = tileset; // 将模型添加到场景中 viewer.scene.primitives.add(tileset); ``` 在上面的代码中，`longitude`、`latitude`和`height`分别是模型的经度、纬度和高度。您可以根据需要更改这些值。`path/to/tileset.json`是3D模型的路径，您需要将其替换为您自己的路径。 需要注意的是，`Entity`对象会将模型绑定到特定的位置，并且允许您更改模型的属性（例如，颜色、透明度等）。如果您不需要这种灵活性，您也可以直接将模型添加到场景中，而不是将其绑定到`Entity`对象上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值