Cesium.js三维地图的实现(依托天地图CDN文件)

零、技术选型:

Vue2、VueCli5、天地图、Cesium.js

一、通过天地图官网案例实现

需要引入天地图官方提供的CDN链接访问Cesium.js相关文件

相关文件:

https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js

https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js

https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Widgets/widgets.css


public/index.html

// 引入相关文件
<script src="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Cesium.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/Cesium_ext_min.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/long.min.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/bytebuffer.min.js" type="text/javascript" cesium="true" ></script>
<script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/protobuf.min.js" type="text/javascript" cesium="true" ></script>
<link href="https://api.tianditu.gov.cn/cdn/demo/sanwei/static/cesium/Widgets/widgets.css" rel="stylesheet" cesium="true" >

接下来在展示页加载Cesium三维地图

<template><div id="cesiumContainer"></div>
</template><script>
export default {data() {return { viewer: null, };},mounted() {this.initializeCesium();},methods: {initializeCesium() {// 使用Cesium.Map()方法创建实例this.viewer = new Cesium.Map("cesiumContainer", {});},},
};
</script>
<style scoped> #cesiumContainer { width: 100%; height: 100vh; /* 调整高度以适应您的布局 */ } </style>

效果图:

此时的三维地图,因为没有叠加影像服务,所以只是初始化一个球体,无法具体查看地图细节。

原本尝试将这些文件保存在vueCli脚手架本地的public的文件夹里,在index.html中引入这些本地文件,
不巧的是,这些CDN链接的文件夹中有一些线上CDN文件需要引用的文件,
也就是该CDN链接的文件中的代码引用了服务器中文件夹中的其他文件,
直接下载引用CDN链接的文件,将会报错,找不到某某对应文件

二、使用 npm/yarn 管理依赖

官网提供了相关文档,指南涵盖了两种设置 CesiumJS 的方法:

从 CDN 导入、使用 NPM 安装

(后续尝试更新......)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【WPF.NET开发】数据绑定应用场景

目录 1、实现属性更改通知 示例 2、双向绑定​​​更新源 示例 3、对分层数据使用主-从模式 示例 4、对分层 XML 数据使用主-从模式 示例 5、绑定两个控件的属性 示例 6、创建和绑定到 ObservableCollection 示例 7、使用 XMLDataProvider 和 XPath 查询绑定到 XML…

喜报!酷克数据携手中移在线入选2023大数据“星河”数据库优秀案例

12月20日-21日&#xff0c;由中国信通院、中国通信标准化协会主办&#xff0c;中国通信标准化协会大数据技术标准推进委员会承办的“2023数据资产管理大会”在京召开。 在会上&#xff0c;第七届大数据“星河&#xff08;Galaxy&#xff09;”案例评选结果正式公布。中移在线服…

Local Binary Convolutional Neural Networks (LBCNN)

论文&#xff1a;https://arxiv.org/abs/1608.06049 代码&#xff1a;GitHub - juefeix/lbcnn.torch: Torch implementation of CVPR17 - Local Binary Convolutional Neural Networks http://xujuefei.com/lbcnn.html 摘要&#xff1a; 我们提出了局部二值卷积(LBC)&#x…

【ScienceAI Weekly】DeepMind最新研究再登Nature;我国首个自研地球系统模型开源;谷歌推出医疗保健模型

AI for Science 的新成果、新动态、新视角抢先看—— * DeepMind 最新研究 FunSearch 登 Nature * 谷歌推出医疗保健行业模型 MedLM * 晶泰科技冲刺港交所&#xff0c;AI机器人赋能 AI for Science * GHDDI 与微软研究院科学智能中心达成合作 * 用于地震学处理分析的 AI 工…

【华为机试】2023年真题B卷(python)-分月饼

一、题目 题目描述&#xff1a; 中秋节公司分月饼&#xff0c;m个员工&#xff0c;买了n个月饼&#xff0c;m<n&#xff0c;每个员工至少分1个月饼&#xff0c;但可以分多个&#xff0c;单人份到最多月饼的个数为Max1&#xff0c;单人分到第二多月饼的个数是Max2&#xff0c…

python(上半部分)

第一部分 1、input()语句默认结果是字符串 2、type()可以判断变量的类型 3、input()输出语句 &#xff08;默认为字符串类型&#xff09; 4、命名规则&#xff1a;中文、英文、数字、_&#xff0c;数字不可开头&#xff0c;大小写敏感。 5、 %s&#xff1a;将内容转换成…

Java并发(二十一)----wait notify介绍

1、小故事 - 为什么需要 wait 由于条件不满足&#xff08;没烟干不了活啊&#xff0c;等小M把烟送过来&#xff09;&#xff0c;小南不能继续进行计算 但小南如果一直占用着锁&#xff0c;其它人就得一直阻塞&#xff0c;效率太低 于是老王单开了一间休息室&#xff08;调…

vue场景 无分页列表条件过滤,子组件多选来自父组件的列表

日常开发中&#xff0c;经常会遇到下面场景&#xff1a; 页面加载一个无分页列表&#xff0c;同时工具栏设置多个条件可对列表过滤的场景(典型的就是关键字模糊查询)父组件传给子组件列表&#xff0c;子组件中需要多选列表多选&#xff0c;选择结果返回父组件 1 无分页列表过…

行业首台7英寸彩屏,掌阅iReader Color 7 发布

12月22日消息&#xff0c;掌阅iReader 继2021年发布 C6 Pro 后&#xff0c;时隔2年再次推出彩屏系列新产品 Color 7&#xff0c;该产品为彩色电子纸智能阅读本&#xff0c;采用 Kaleido3 新一代彩色电子纸技术&#xff0c;黑白像素密度为 300PPI &#xff0c;彩色像素密度为 15…

并发程序设计--D1进程的创建和回收

进程和程序内容区别 进程包含的内容&#xff1a; BSS段&#xff1a;存放程序中未初始化的全局变量 数据段&#xff1a;已初始化的全局变量 代码段&#xff1a;程序执行代码 堆&#xff08;heap&#xff09;&#xff1a;malloc等函数分配内存 栈(stack)&#xff1a;局部变量…

让学习成为一种生活方式:数字化助力终身学习

12月以来,“让学习成为一种生活方法”全民终身学习活动在北京、安徽、湖北、湖南、云南等地密集启动,而依托数字化赋能终身学习成为共同关键词。 近年来,随着教育现代化体系的不断深入推进,数字化转型成为建设高质量终身学习体系的重要“推动力”,数字技术与大数据的应用汇聚了…

2023新能源汽车,吵得越凶,卖得越多

作者 | 辰纹 来源 | 洞见新研社 2023年的汽车行业很残酷&#xff0c;合资大败退&#xff0c;市场份额被自主品牌大幅渗透&#xff0c;三菱退出中国市场&#xff0c;成为真实写照。 新能源车企&#xff0c;威马领头&#xff0c;天际、自游家NIUTRON、恒驰、爱驰、雷丁等造车新…

如何学习VBA_3.2.10:人机对话的实现

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的劳动效率&#xff0c;而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册&#xff0c;现在已经全部完成&#xff0c;希望大家利用、学习。 如果…

智能优化算法应用:基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于斑马算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.斑马算法4.实验参数设定5.算法结果6.参考文献7.MA…

算法导论复习(三)

这一次我们主要复习的是递归式求解 递归式求解主要有的是三种方法&#xff1a; 代换法递归树法主方法 我们进行处理的时候要 代换法 方法讲解 主要就是猜测答案的形式 我们只在乎 n 在无穷大的时候成立就行 关于答案的形式&#xff0c;我发现最后能够是 n log n 的形式的…

SUS-Chat-34B领先一步:高效双语AI模型的突破

引言 在人工智能领域&#xff0c;模型的规模和效能一直是衡量其先进性的关键指标。南方科技大学联合IDEA研究院CCNL团队最新开源的SUS-Chat-34B模型&#xff0c;以其340亿参数的庞大规模和卓越的双语处理能力&#xff0c;在AI界引起了广泛关注。 模型概述 SUS-Chat-34B是基于…

在VSCode中使用Git教程

文章目录 提交代码操作分支提交远程库拉取代码参考 介绍一下如何在VSCode中使用Git 首先在VSCode中打开一个项目 打开项目后, 点击下图按钮, 可以引入Git 提交代码 点击 &#xff1b;相当于git add. 下面两张图, 第一张表示改文件后的号, 只会add本文件. 第二张图表示这段时…

linux系统和网络(四):网络

本文主要探讨linux网络相关知识,详细介绍看本博客其他博文。 网络基础(参考本博客其他文章&#xff1a;基础网络知识&#xff0c;socket网络编程&#xff0c;基于socket的聊天室和简易ftp) 路由器是局域网和外部网络通信出入口 DNS实现域名和IP地址之间转换 …

Ai画板原理

在创建时画板可以选择数量和排列方式 也可以采用这个图片左上的画板工具&#xff0c;选择画板在其他地方画框即可生成&#xff0c;同时可以在属性框中可以修改尺寸大小 选择全部重新排列可以进行创建时的布局

uniapp创建/运行/发布项目

1、产生背景----跨平台应用框架 在移动端各大App盛行的时代&#xff0c;App之间的竞争也更加激烈&#xff0c;他们执着于让一个应用可以做多个事情 所以就应运而生了小程序&#xff0c;微信小程序、支付宝小程序、抖音小程序等等基于App本身的内嵌类程序。 但是各大App他不可…