jjzjj

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

搞前端的小刘 2024-02-23 原文

安装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 格式)的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  3. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  4. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  5. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  6. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目? 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做,或者如果你需要避免为前N个元素构建中间数组,你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  7. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  8. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  10. ruby - 如何在 Ruby 字符串中插入项目符号字符? - 2

    我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是,当我输入它时,我收到有关非ASCII字符的语法错误。我该怎么做? 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1195

随机推荐