位置: IT常识 - 正文

【Cesium】vue项目加载3DTileset(.b3dm 格式)(vue+cesium怎么实现地图的加载)

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

推荐整理分享【Cesium】vue项目加载3DTileset(.b3dm 格式)(vue+cesium怎么实现地图的加载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:cesium+vue,vue+cesium怎么实现地图的加载,cesium.rectangle.fromdegress,cesium.viewer,cesium.viewer,vue cesium,vue+cesium怎么实现地图的加载,vue cesium,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

【Cesium】vue项目加载3DTileset(.b3dm 格式)(vue+cesium怎么实现地图的加载)

       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 安装,因为它更简洁// npmnpm install --save-dev vue-cli-plugin-cesium// yarnyarn 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.SceneModefullscreenElement: 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)); });

 

 亲测有效!!!

研究了好久 头发都掉了不少 总在一下 希望可以帮助到需要帮助的家人们! 有更好的想法 疑问 可以在线交流一番

本文链接地址:https://www.jiuchutong.com/zhishi/278732.html 转载请保留说明!

上一篇:win10待机唤醒花屏怎么办(win10待机唤醒黑屏死机)

下一篇:win10445端口关闭方法是什么(win10关闭端口号)

  • 苹果13怎么开机激活(苹果13怎么开机开不了)

    苹果13怎么开机激活(苹果13怎么开机开不了)

  • 华为nova5z需要贴镜头膜吗(华为nova5z贴膜)

    华为nova5z需要贴镜头膜吗(华为nova5z贴膜)

  • 京东拼购店和京东店有什么区别(京东拼购店和京喜店区别)

    京东拼购店和京东店有什么区别(京东拼购店和京喜店区别)

  • 拼多多退货太频繁运费险取消(拼多多退货太频繁运费险取消了怎么办)

    拼多多退货太频繁运费险取消(拼多多退货太频繁运费险取消了怎么办)

  • 抖音连着点赞会限流吗(抖音连着点赞会被限流吗)

    抖音连着点赞会限流吗(抖音连着点赞会被限流吗)

  • 晶体管计算机属于第几代计算机(晶体管计算机属于哪一类)

    晶体管计算机属于第几代计算机(晶体管计算机属于哪一类)

  • 手机设置在哪里找到(手机设置在哪里打开)

    手机设置在哪里找到(手机设置在哪里打开)

  • 拼多多限时秒杀怎样快速抢(拼多多限时秒杀活动技巧)

    拼多多限时秒杀怎样快速抢(拼多多限时秒杀活动技巧)

  • 怎么不显示快手小店(怎么不显示快手ip地址)

    怎么不显示快手小店(怎么不显示快手ip地址)

  • 耳机反磁是什么(耳机反磁是什么原理)

    耳机反磁是什么(耳机反磁是什么原理)

  • 苹果x能不能升级ios13.3(苹果x能不能升级15系统)

    苹果x能不能升级ios13.3(苹果x能不能升级15系统)

  • 移动光猫可以当路由器用吗(移动光猫可以当交换机吗)

    移动光猫可以当路由器用吗(移动光猫可以当交换机吗)

  • 京东礼品卡退货可以退吗(京东礼品卡退货剪卡)

    京东礼品卡退货可以退吗(京东礼品卡退货剪卡)

  • 怎样用手机号登录抖音(怎样用手机号登录爱奇艺会员)

    怎样用手机号登录抖音(怎样用手机号登录爱奇艺会员)

  • word添加目录方法(为word添加目录)

    word添加目录方法(为word添加目录)

  • iphonexr怎么使用nfc(iphonexr是双卡双待吗)

    iphonexr怎么使用nfc(iphonexr是双卡双待吗)

  • 抖音删除视频怎么删(抖音删除视频怎么保留赞)

    抖音删除视频怎么删(抖音删除视频怎么保留赞)

  • 苹果屏幕白斑怎么修复(苹果屏幕白斑怎么设置)

    苹果屏幕白斑怎么修复(苹果屏幕白斑怎么设置)

  • 局域网是一种通信网吗(局域网采用的通信技术)

    局域网是一种通信网吗(局域网采用的通信技术)

  • vivox27有人脸解锁吗(vivox27有人脸解锁在哪里)

    vivox27有人脸解锁吗(vivox27有人脸解锁在哪里)

  • 苹果录nfc门禁卡教程(苹果手机nfc录门禁卡)

    苹果录nfc门禁卡教程(苹果手机nfc录门禁卡)

  • vue项目:大屏自适应解决方案(两种)(vue 大屏可视化设计 开源)

    vue项目:大屏自适应解决方案(两种)(vue 大屏可视化设计 开源)

  • 圣克鲁斯河,阿根廷巴塔哥尼亚 (© Coolbiere Photograph/Getty Images)(圣克鲁斯河特点)

    圣克鲁斯河,阿根廷巴塔哥尼亚 (© Coolbiere Photograph/Getty Images)(圣克鲁斯河特点)

  • python关键字参数的多种使用(python关键字参数位置参数)

    python关键字参数的多种使用(python关键字参数位置参数)

  • 所得税费用为负数
  • 收入纳税数据是什么意思
  • 装修收入应如何确定
  • 税务师考试给个税表吗
  • 核定征收三种方式
  • 加工承揽属于劳务关系吗
  • 利息收入交所得税吗
  • 一次性发放年终奖怎么税务筹划
  • 套期会计新旧准则对比
  • 加油票抬头开错可以更换吗
  • 税控系统技术维护费可以抵扣吗
  • 小规模收的专票怎么做账
  • 公司员工社保怎么办理的
  • 报废过期产品怎么做会计分录
  • 工业企业生产成本包括哪些
  • 取得的收入含税吗
  • 公司内帐和外账的区别
  • 清算资金往来借贷方什么意思
  • 开具的发票是否为印花税的应税凭证?
  • 跨年的预付账款如何冲销
  • 应征消费税的汽车为啥不能抵扣
  • 没有用完的发票怎么退
  • 企业进项发票不够
  • 增值税发票如何红冲
  • 取得的增值税发票哪些项目必须开具事项
  • 无票费用如何做凭证分录
  • 上月开的红字发票本月可以作废吗
  • 苹果电脑安装了windows能取消吗
  • 以前年度多计提的附加税怎么调账
  • u盘中毒症状
  • 应收账款与主营业务收入的比率
  • linux tr
  • 外购货物用于职工福利进项税额可以抵扣吗
  • 动态定位
  • 出差有补贴
  • phpexcel读取excel
  • yii框架文档
  • 增量留抵税额是
  • html前端技术
  • vue的一些面试题
  • 企业注销亏损怎么处理
  • 税务稽查补税
  • 开通对公账号怎么办理
  • js中同步如何理解
  • 转出未交增值税最终怎么转平
  • 税控盘技术服务费抵扣期限
  • 费用减少利润减少的情况
  • 固定资产折旧方法和计算公式
  • 即征即退 条件
  • 出口货物预收账款分录
  • 工程违约金账务处理规定
  • 滞纳金是罚款支出吗
  • 支付宝企业账户在哪里查看
  • 研发费用加计扣除比例及计算方法
  • 交易性金融资产公允价值变动计入
  • 在建工程明细科目怎么设置
  • 仓库周转率是什么意思
  • sql必会知识
  • sqlserver 实现分组合并
  • win8系统怎么重置
  • 在幻灯片母版中
  • 解决口苦最快的方法
  • 注册表出错打不开程序
  • win10连接ubuntu20.04远程桌面
  • linux系统了解
  • win7启动发生异常i/0错误
  • linux不小心删除目录怎么恢复
  • nodejs stdin
  • node.js jquery
  • andengine学习,《android游戏开发实践指南》详解
  • perl的$1
  • checkbox1
  • vtune自动安装脚本分享
  • 在文本输入框中的输入内容是
  • [置顶]bilinovel
  • js如何修改style
  • js 严格的迭代语句
  • jqueryui dialog
  • 云南税务网上税务局
  • 房地产预缴土增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设