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;”案例评选结果正式公布。中移在线服…

华纳云:组策略与注册表之间的区别和联系

组策略和注册表是在 Windows 操作系统中用于配置和管理系统行为的两种不同的管理机制。它们之间有着紧密的联系&#xff0c;但也有一些重要的区别。 区别&#xff1a; 定义和作用&#xff1a; 组策略&#xff1a; 组策略是一种集中管理和配置 Windows 系统设置的机制。通过组策…

如何在Laravel中屏蔽错误提示(两种方法)

前言 Laravel是一个非常流行的PHP框架&#xff0c;其提供的错误提示机制使得在开发过程中出现问题时可以迅速定位原因&#xff0c;从而提高了开发效率。然而&#xff0c;有时候我们在正式上线的时候&#xff0c;不希望用户看到任何错误提示&#xff0c;这时候我们可以通过屏蔽…

Java 中 Stream 流的使用方法

目录 一、Stream 的概念 二、Stream 的特点 三、Stream 的使用步骤 1、Stream 的创建 1.1、通过Collection对象的stream()或parallelStream()方法 1.1.1、stream() 和 parallelStream() 两个方法的区别 1.2、通过 Arrays 工具类的 stream() 方法 1.3、通过Stream接口的of()…

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…

在uni-app项目中,如何进行性能优化

在uni-app项目中&#xff0c;可以通过以下几种方式进行性能优化&#xff1a; 减少请求次数&#xff1a;合并请求&#xff0c;将多个请求合并成一个请求&#xff0c;减少网络请求次数&#xff0c;提高性能。优化图片加载&#xff1a;使用合适的图片格式&#xff0c;并进行压缩和…

python实现对终端信息的清屏或者部分行清除

有些时候我们看到部分工具能够在给出提示项或者下载库信息的时候&#xff0c;有点类似滚动的效果&#xff0c;其实就是清除了一些行的字符信息。虽然我总结的不是很全&#xff0c;但是就我知道的方式而言&#xff0c;总结了下面的一些方法实现工具&#xff0c;仅供参考&#xf…

【效率工具】利用python进行本地知识库(PDF和WORK文件内容)的批量模糊搜索

目录 前言 一、为什么要进行本地文档的批量搜索? 二、如何去做呢?

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

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

服务器的出口IP地址查询

在服务器中&#xff0c;IP地址是至关重要的。但是很多情况下我们看见的IP地址多数为内网IP。比如192.168.X.X。这些都是内网IP&#xff0c;也就是脱离了内网环境我们就无法再访问这些IP地址。 工作中&#xff0c;我们常常会接触到IP白名单&#xff1b;使用云服务器时需要配置安…

【华为机试】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;将内容转换成…

常用css属性

所有 CSS 背景属性 属性描述background在一条声明中设置所有背景属性的简写属性。background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。background-clip规定背景的绘制区域。background-color设置元素的背景色。background-image设置元素的背景图像。bac…

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

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

refusing to merge unrelated histories如何解决git冲突

当使用git merge命令合并分支时&#xff0c;如果Git检测到分支之间存在不相关的提交历史记录&#xff0c;它会给出refusing to merge unrelated histories错误。这种情况下&#xff0c;可以通过以下几种方法解决冲突。 强制合并&#xff1a;使用git merge命令时&#xff0c;加…

如何在uni-app项目中进行数据持久化

在uni-app项目中进行数据持久化有多种方法&#xff0c;以下是几种常用的方式&#xff1a; 使用uni-app的本地存储API&#xff08;uni.setStorageSync和uni.getStorageSync&#xff09;进行数据存取。例如&#xff1a; // 存储数据 uni.setStorageSync(key, value); // 获取数…

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

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

鸿蒙 - arkTs:网络请求封装和使用

1. module.json5文件配置网络请求 {"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET"}]} } 2. 在pages同级创建一个文件夹&#xff0c;起名为api 3. api文件夹下创建index.ts文件&#xff0c;文件内容&…

前端---css 选择器

1. css 选择器的定义 css 选择器是用来选择标签的&#xff0c;选出来以后给标签加样式。 2. css 选择器的种类 标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器 3. 标签选择器 根据标签来选择标签&#xff0c;以标签开头&#xff0c;此种选择器影响范…