位置: 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关闭端口号)

  • iqoo8pro是什么系统(iqoo8pro是旗舰机吗)

    iqoo8pro是什么系统(iqoo8pro是旗舰机吗)

  • 网络状态是一条线(网络状态是一条虚线加实线)

    网络状态是一条线(网络状态是一条虚线加实线)

  • 50mm镜头拍人像要几米(50mm镜头拍人像距离)

    50mm镜头拍人像要几米(50mm镜头拍人像距离)

  • 华为荣耀手机右上角出现无障碍怎么取消(华为荣耀手机右上角有一个圆圆的像眼镜怎么关)

    华为荣耀手机右上角出现无障碍怎么取消(华为荣耀手机右上角有一个圆圆的像眼镜怎么关)

  • ctrl+q是什么快捷键

    ctrl+q是什么快捷键

  • 华为手机冲不去电怎么办(华为冲不上电怎么回事)

    华为手机冲不去电怎么办(华为冲不上电怎么回事)

  • 打印机显示ch是什么意思(打印机出现!)

    打印机显示ch是什么意思(打印机出现!)

  • 钉钉未激活是为什么(钉钉未激活怎么办)

    钉钉未激活是为什么(钉钉未激活怎么办)

  • oppoa11处理器是什么(oppoa11n的处理器)

    oppoa11处理器是什么(oppoa11n的处理器)

  • 为什么华为手机保密柜的视频看不了(为什么华为手机没有5G)

    为什么华为手机保密柜的视频看不了(为什么华为手机没有5G)

  • qq什么情况下会显示正在输入(qq什么情况下会推荐可能认识的人)

    qq什么情况下会显示正在输入(qq什么情况下会推荐可能认识的人)

  • 微机是什么(微机是什么语言)

    微机是什么(微机是什么语言)

  • 淘宝pc页面是什么意思(淘宝pc端叫什么)

    淘宝pc页面是什么意思(淘宝pc端叫什么)

  • 华为nova5pro分屏手势在哪里(华为nova5pro分屏怎么调大小)

    华为nova5pro分屏手势在哪里(华为nova5pro分屏怎么调大小)

  • 快手每天评论多少上限(快手每天评论有限制吗?)

    快手每天评论多少上限(快手每天评论有限制吗?)

  • 京东评价买家怎么删除(京东 写评价)

    京东评价买家怎么删除(京东 写评价)

  • 金立手机故事锁屏怎么关闭(金立手机故事锁屏关不掉)

    金立手机故事锁屏怎么关闭(金立手机故事锁屏关不掉)

  • 苹果xr和11屏幕一样吗(苹果xr和11屏幕哪个好)

    苹果xr和11屏幕一样吗(苹果xr和11屏幕哪个好)

  • 抖音不推送作品怎么办(抖音不推送作品给好友)

    抖音不推送作品怎么办(抖音不推送作品给好友)

  • vivos1左边的按键是什么(vivos1pro左边的按键)

    vivos1左边的按键是什么(vivos1pro左边的按键)

  • 安卓勿扰模式怎么取消(安卓勿扰模式怎么开)

    安卓勿扰模式怎么取消(安卓勿扰模式怎么开)

  • 花呗宝是什么(支付宝花呗是啥东西)

    花呗宝是什么(支付宝花呗是啥东西)

  • 相册恢复照片在哪里找(相册恢复照片在哪)

    相册恢复照片在哪里找(相册恢复照片在哪)

  • OpenPCDet 训练自己的数据集详细教程!(opencv制作训练数据集)

    OpenPCDet 训练自己的数据集详细教程!(opencv制作训练数据集)

  • 还有人用帝国CMS吗(帝国cms怎么用)

    还有人用帝国CMS吗(帝国cms怎么用)

  • 财税2019 21号第二条
  • 税务定税按什么标准
  • 营业外收入影响所有者权益吗
  • 怎么控制酒店的设备
  • 事业单位补提折旧怎么处理
  • 删除申报记录什么意思
  • 个税网络申报
  • 利润表中的其他业务利润包括哪些
  • 培训学校教具记在什么费用
  • 企业所得税费用税率
  • 车辆购置税完税证明网上打印
  • 出口报关单上的运费和保费和实际不一致
  • 支付员工提成奖金怎么做会计分录?
  • 借差旅费退回现金怎么办
  • 通讯费要计入应付账款吗
  • 商品房房产税征收标准
  • 应付和预付账款的区别
  • 个体工商户生产经营所得税税率表2021
  • 票开了但是没有发票
  • 预付租金是什么
  • 职工餐厅账务处理
  • 申请银行汇票手续费记账凭证
  • 审计报告与汇缴报告
  • 税务师入会与不入会冲突
  • 企业购入用于捐赠的物品
  • qq助手有什么用处
  • 如何解决win10系统安装不兼容驱动的问题
  • 常见内存大小
  • 房东不开发票违法吗
  • 税前扣除税后扣除
  • 腾讯电脑管家中蓝牙在哪
  • mcdlc.exe - mcdlc是什么进程文件 有何作用
  • 没按时报税罚款多少
  • 哪些费用可以计入开办费
  • 注册造价师挂靠费怎么缴纳个税
  • 暂估入账的固定资产可以计提折旧吗
  • 阿里云onedata
  • 以固定资产投资的会计处理
  • unbutun系统
  • 未注册未认证
  • vue框架是什么样子的
  • ps橡皮擦怎么擦的跟背景色一样
  • 用pullout造句
  • 出口货物退货会退税吗
  • 工程发票预缴是什么意思
  • 超出python用什么
  • 已经抵扣的进项税额转出会计分录
  • 研发增值税税率怎么算
  • 制造费用分配后总账月末余额在哪方?
  • 外购商品发放给员工 进项税额能不能抵扣
  • 暂估入库价格是否含税
  • 差额征税问题
  • 开出商业承兑汇票怎么做分录
  • 股东 退股
  • 发生额大额标准怎么确定
  • 领购发票的方式有哪些
  • 营改增挂靠工程项目的账务如何处理?
  • 确认收入一定要交增值税吗
  • sql去除指定数据
  • mysql 元数据管理
  • windowsxp桌面文件在哪个文件夹
  • win2008r2下载
  • freebsd怎么安装软件
  • wdcp的/www目录大小调整或增加分区/硬盘的方法
  • ubuntu14.04升级
  • 磁盘限制
  • 电脑如何将win10设置为win7
  • win10registry
  • 特效添加
  • css div内容自动换行
  • 插入排序_Python与PHP的实现版(推荐)
  • nodejs使用视频教程
  • 八大排序算法的时间空间复杂度
  • Android通知栏点击打开安装
  • java项目怎么变成web项目
  • python内建函数 代码
  • jquery1.11.3
  • 税控发票开票软件密码怎么修改?
  • 税法 农产品增值税题目及答案
  • 企业资质怎么报审
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设