【Cesium】vue项目加载3DTileset(.b3dm 格式)

这篇具有很好参考价值的文章主要介绍了【Cesium】vue项目加载3DTileset(.b3dm 格式)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安装vue-cli-plugin-cesium
专门为脚手架vue-cli3.0和2.0打造的针对Cesium的VueCli扩展插件,自动化包括:

        1.自动扩展 VueCLI 中 Cesium 相关的 webpack 配置

       2. 添加一个 cesium 别名,以便我们在项目中轻松的引入 Cesium 文件资源
        使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
        使 webpack 可正常打包 Cesium
        允许 webpack 友好地在 Cesium 中使用 require,解决 require 引入警告
        开发环境生成 sourcemap,生产环境取消 sourcemap
        生产环境抽取公共模块执行压缩
        生产环境 loader 切换到优化模式

        3.自动在全局 main.js 中引入Widgets.css,可选

        4.自动在 components/ 文件夹下生成示例文件,可选
 

首先安装 vue-cli-plugin-cesium 插件,推荐使用 yarn 安装,因为它更简洁
// npm
npm install --save-dev vue-cli-plugin-cesium
// yarn
yarn add vue-cli-plugin-cesium
<template>
  <div id="cesiumContainer">
   
  </div>
</template>

<script >
var Cesium =require("cesium/Cesium")
 
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)  //默认视角定位中国上空
    var viewer = new Cesium.Viewer("cesiumContainer",{
		animation: false, //是否显示动画控件
		shouldAnimate: true,
		homeButton: false, //是否显示Home按钮
		fullscreenButton: false, //是否显示全屏按钮
		baseLayerPicker: true, //是否显示图层选择控件
		geocoder: true, //是否显示地名查找控件
		timeline: false, //是否显示时间线控件
		sceneModePicker: true, //是否显示投影方式控件
		navigationHelpButton: true, //是否显示帮助信息控件
		infoBox: true, //是否显示点击要素之后显示的信息
		requestRenderMode: true, //启用请求渲染模式
		// scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
		sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
		fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处	
		 // 地形 
      	terrainProvider:new Cesium.createWorldTerrain({
			requestVertexNormals:true,
			requestWaterMask:true
		}) 
	 })
	 viewer.scene.globe.enableLighting = true;
	 viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权样式
//调用天地图瓦片
	 viewer.imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你申请的token",
          layer: "tdtBasicLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
          show: false,
          mininumLevel: 0,
          maximumLevel: 16
        })   
 
//调用影响中文注记服务
	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ 
        url: 'http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=9378d15741c526a104927f17e9438ab6', 
        layer: "tdtImg_c",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "c",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
        maximumLevel: 50,
        show: false
    }))
//加载3DTiles 
	function tilesetload(){
		console.log("11111111111111111111111111");
		var tileset =  new Cesium.Cesium3DTileset({       
			url: 'http://localhost:8085/tileset.json',
//我这里使用的本地iis代理的数据  后期会出iis如何代理瓦片数据的
			// url: 'http://localhost:8086/tileset.json',
          //控制切片视角显示的数量,可调整性能
            // maximumScreenSpaceError: 2,
            //     maximumNumberOfLoadedTiles: 100000,
			show:true,
			skipLevelOfDetail : true,
	     	baseScreenSpaceError : 1024,
      		skipScreenSpaceErrorFactor : 16,
	      	skipLevels : 1,
	     	immediatelyLoadDesiredLevelOfDetail : false,
	     	loadSiblings : false,
      		cullWithChildrenBounds : true
      })
 	    viewer.scene.primitives.add(tileset);
//定位到模型的位置
	    (async () => {
            try {
              await tileset.readyPromise;
              await viewer.zoomTo(tileset);
		    // Apply the default style if it exists
		    var extras = tileset.asset.extras;
			    if (
			    Cesium.defined(extras) &&
			    Cesium.defined(extras.ion) &&
			    Cesium.defined(extras.ion.defaultStyle)
			    ) {
			    tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
			    }
		    } catch (error) {
			    console.log(error);
		    }
	    })(); 
		  
	}
 	tilesetload()
  }, 
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
::deep .cesium-viewer-bottom {
	display: none;

}
</style>

 这是设置模型的高程

tileset.readyPromise.then(function(tileset) {
            viewer.scene.primitives.add(tileset);
            var heightOffset = 11.0;  //高度
            var boundingSphere = tileset.boundingSphere; 
            var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
            var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
            viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
        });

 【Cesium】vue项目加载3DTileset(.b3dm 格式)

 亲测有效!!!

研究了好久 头发都掉了不少 总在一下 希望可以帮助到需要帮助的家人们! 有更好的想法 疑问 可以在线交流一番文章来源地址https://www.toymoban.com/news/detail-440050.html

到了这里,关于【Cesium】vue项目加载3DTileset(.b3dm 格式)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)

    加载三维模型 视频参考地址: https://www.bilibili.com/video/BV14g411s7DX/?spm_id_from=333.1007.top_right_bar_window_history.content.clickvd_source=4716b12357fe8e4b33b293b4bbbbfcd8

    2024年01月23日
    浏览(42)
  • Cesium之3DTileset实例管理

    最近使用Cesium结合ts和react自己手动搭建了一个基本界面,加载3dTiles数据和geojson数据,动态控制图层的显隐。本来以为是非常简单的功能,但是实际操作中发现有一些地方值得注意。 搭建的效果就是这个样子,经典的顶部header+左侧布局,主视窗显示地图: 加载geojson数据源的

    2024年02月08日
    浏览(33)
  • cesium 3DTileset的平移、旋转、缩放

    加载模型 平移和修改高度 方法一:

    2024年02月12日
    浏览(38)
  • 5、加载3dtileset模型并定位到模型

          这一节使用CCesium加载3dtiles模型,3dtiles模型使用ceisum官网示例中的模型,加载3dtiles功能目前只能添加没有压缩的模型,draco或其他解压缩功能没有写。 1、在上一个例子的基础上,将鼠标事件改成右键的鼠标事件Cesium::ScreenSpaceEventType::RIGHT_CLICK 2、将ceisum的viewer赋值给

    2024年02月13日
    浏览(31)
  • CesiumForUnreal实现多边形裁剪3dTileset效果

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

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

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

    2024年02月04日
    浏览(30)
  • 3DM/PLY格式在线转换

    3D模型在线转换(https://3dconvert.nsdt.cloud/)是一个可以进行3D模型格式转换的在线工具,支持多种3D模型格式进行在线预览和互相转换。 3DM是一种常用的三维模型文件格式,具有多种几何体和材质,文件大小较小,兼容性较好,适用于工业设计、建筑设计、产品设计、数字艺术

    2024年02月04日
    浏览(40)
  • 3DM/XYZ格式在线转换

    3D模型在线转换(https://3dconvert.nsdt.cloud/)是一个可以进行3D模型格式转换的在线工具,支持多种3D模型格式进行在线预览和互相转换。 3DM是一种常用的三维模型文件格式,具有多种几何体和材质,文件大小较小,兼容性较好,适用于工业设计、建筑设计、产品设计、数字艺术

    2024年02月03日
    浏览(41)
  • 在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

    用到的区域文件、地图标记文件、路径信息文件、模型文件 提取码:99jq 使用vite创建vue3项目 cd到创建的项目文件夹中 安装Cesium 配置 vite.config.js文件:添加Cesium并设置反向代理实现跨域。 style.css(可选):修改#app样式 代码 App.vue 解读 加载token 创建查看器viewer,加载世界街道地

    2024年02月16日
    浏览(43)
  • 【卫星三维重建】卫星影像三维重建数据集-MVS3DM数据集介绍

    MVS3DM数据集是用于IARPA多视图卫星影像3D重建挑战赛的标准数据集(IARPA Multi-View Stereo 3D Mapping Challenge),该数据集由Digital Globe WorldView-3卫星影像以及机载激光雷达获取的影像覆盖范围内的点云数据作为算法真值数据组成。 卫星影像数据类型和数量 :包含50张WorldView3全色影像(

    2024年03月12日
    浏览(110)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包