Cesium加载地图-高德影像

废话不多说,直接上代码

整体代码

<template><div id="cesiumContainer" style="height: 100vh;"></div><div id="toolbar" style="position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-item>地图示例</el-breadcrumb-item><el-breadcrumb-item>高德地图</el-breadcrumb-item></el-breadcrumb></div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesium.js";onMounted(() => {let initCesium = new InitCesium('cesiumContainer')let viewer = initCesium.initViewer({});let img_arcgis = new Cesium.UrlTemplateImageryProvider({name: 'img_arcgis',url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'});let layer = viewer.imageryLayers;layer.removeAll();layer.addImageryProvider(img_arcgis);
})
</script>
<style scoped>
#cesiumContainer {overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner {color: #ffffff !important;
}
</style>

InitCesium.js

import * as Cesium from "cesium";class InitCesium {constructor(cesiumContainer, options) {this.cesiumContainer = cesiumContainer;}initViewer(options) {Cesium.Ion.defaultAccessToken = 'token';return new Cesium.Viewer(this.cesiumContainer, options);}
}export default InitCesium

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

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

相关文章

Oracle分栏(非分页)查询

不知道Oracle怎么进行数据分栏(分栏: 因数据列过长, 部分数据作为新列显示). 在这里先记录一下粗浅的查询方法. 数据源例子: select 日用百货 as cat, 手电筒 as name, 20 as amount, 2024-01-27 as dt from dualunion allselect 餐饮美食 as cat, 鸡公煲 as name, 15.9 as amo…

Android音量调节修改

前言 今日公司&#xff0c;安卓设备的音量显示不正常&#xff0c;让我来修复这个bug&#xff0c;现在已修复&#xff0c;做个博客&#xff0c;记录一下&#xff0c;以后碰到类似一下子就好解决。 Android音量调节相关 路径 frameworks\base\services\core\java\com\android…

学校“数据结构”课程Project—扩展功能(自主设计)

目录 一、设想功能描述 想法缘起 目标功能 二、问题抽象 三、算法设计和优化 1. 易想的朴素搜索 / dp 搜索想法 动态规划&#xff08;dp&#xff09;想法 2. 思考与优化 四、算法实现 五、结果示例 附&#xff1a;使用的地图API 一、设想功能描述 想法缘起 OSM 导出…

【JavaEE进阶】 #{}和${}

文章目录 &#x1f343;前言&#x1f333;#{}和${}使⽤&#x1f6a9;Interger类型的参数&#xff08;基础数据类型&#xff09;&#x1f388;使用#{}&#x1f388;使用${} &#x1f6a9;String类型的参数使用&#x1f388;#{}使用&#x1f388;${} &#x1f38d;#{}和${}区别&a…

数据库之 基础概念、安装mysql、sql语句基础

数据库之 基础概念、安装mysql、sql语句基础 【一】存储数据的演变过程&#xff1a; 文件存储&#xff1a; 初始阶段随意存放数据到文件&#xff0c;格式任意。目录规范引入&#xff1a; 软件开发使用目录规范&#xff0c;限制数据位置&#xff0c;建立专门文件夹。本地数据存…

java版代码生成器

之前实现的JRT代码生成器是M版的&#xff0c;那么用户必须用M库才能有代码生成器的功能。为了提供给就是不用M库的用户使用&#xff0c;JRT再提供脚本版的java代码生成器&#xff0c;方便直接连关系库生成JRT的代码。 实现&#xff1a; import JRT.Core.MultiPlatform.JRTCon…

接口测试怎么测?接口测试的流程和步骤(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 一、什么是接口测试 我们要想知道接口测试怎么做&#xff0c;首先要明白接口测试是什么?一般…

<蓝桥杯软件赛>零基础备赛20周--第18周--动态规划初步

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…

HCS-华为云Stack-FusionSphere

HCS-华为云Stack-FusionSphere FusionSphere是华为面向多行业客户推出的云操作系统解决方案。 FusionSphere基于开放的OpenStack架构&#xff0c;并针对企业云计算数据中心场景进行设计和优化&#xff0c;提供了强大的虚拟化功能和资源池管理能力、丰富的云基础服务组件和工具…

栈和队列的动态实现(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

【LeetCode】112. 路径总和(简单)——代码随想录算法训练营Day18

题目链接&#xff1a;112. 路径总和 题目描述 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径&#xff0c;这条路径上所有节点值相加等于目标和 targetSum 。如果存在&#xff0c;返回 true &#xff1b;否则&…

ENVI下基于知识决策树提取地表覆盖信息

基于知识的决策树分类是基于遥感影像数据及其他空间数据,通过专家经验总结、简单的数学统计和归纳方法等,获得分类规则并进行遥感分类。分类规则易于理解,分类过程也符合人的认知过程,最大的特点是利用的多源数据。 决策树分类主要的工作是获取规则,本文介绍使用CART算法…