Cesium：采用自己的bingMap Key以及隐藏Cesium图标

最新推荐文章于 2025-07-04 15:19:36 发布

转载最新推荐文章于 2025-07-04 15:19:36 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1464512/blog/1626512

文章标签：

#javascript #python #ViewUI

本文介绍如何在移动端使用Cesium地图引擎，包括检查设备WebGL支持情况、配置BingMap密钥、解决常见错误提示及隐藏版权信息的方法。

2019独角兽企业重金招聘Python工程师标准>>>

Cesium是一款开源地图，一个基于javascript编写的地图引擎，支持3D 、2D、2.5D形式的地图展示。
由于cesium是基于javascript的地图引擎，代码基本都是前端代码，使用cesium做网页端的比较多，移动端感觉还是很少人做的。要在移动端使用cesium展示地图，还需要看你的手机浏览器是否支持3D及一些效果的显示。本篇博客简单记录了一下自己在开发过程中遇到的一些问题。
1、查看你的手机是否支持webgl，打开你手机浏览器，输入地址：http://webglreport.com
2、申请BingMapKey：https://www.bingmapsportal.com/
对Cesium文件夹下面的Cesium.js进行修改，通过ctrl+f 搜索“This application”找到之后将defaultKey修改为自己的key值，将下面getkey的函数返回值修改为自己的key值
这里写图片描述

3、有些应用在打开应用的时候会提示“You must host this app on a web server. See contributor’s guide for more info”
如果出现这种文字打开你引入的SandCastle文件下面的Sandcastle-header.js文件，将最后的代码注释掉就不会出现了。
这里写图片描述
4、隐藏版权文本

 viewer._cesiumWidget._creditContainer.style.display="none";

转载于:https://my.oschina.net/u/1464512/blog/1626512

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34087307

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

OpenLayers6入门，OpenLayers加载必应地图（BingMap），需要申请api key

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

03-13

528

本章讲解OpenLayers如何加载必应地图（BingMap）到地图上。需要提前到必应开发者中心申请对应的地图访问api key才可以加载地图。

043：cesium加载Bing地图（多种形式）

大剑师兰特的GIS世界

04-04

1690

第043个本示例的目的是介绍如何在vue+cesium中加载加载Bing地图。这里显示4种形式的地图，分别为：AERIAL、ROAD、CANVAS_DARK、AERIAL_WITH_LABELS。参考后面的API，还有其他几种形式。

参与评论您还未登录，请先登录后发表或查看评论

Cesium 添加必应地图无需申请key

04-26

大家都知道，Cesium通过本身的工具就提供了bing必应地图的加载，但是，需要自己申请key，如果不想那么麻烦申请key，就可以通过下面的代码实现，官方沙箱实例就可以运行啊，需要的下载，有问题联系我

Bing Maps Key

weixin_30617561的博客

10-16

1242

Application nameKey / URLUpdate Key BingMapWeb Amabn8REcQp90xASYaBuM7u7bffgNd5nkYV-VEhOCJpTgwgt_ZTLWStzrgrMI9c3 Update Trial / Public website 转载于:https://www.cnblogs.c...

cesium-map

最新发布

boringmembership的博客

07-04

810

访问的是 cesium===》My Assets 列表里面的地图数据。

在vue中打开bingmap

weixin_44293625的博客

10-06

1480

使用bingMap需要使用一个key 注册BingMapkey 下面是我注册的 At0AC5clqqASpeFYI62kMtfRYAlAWKodmuMnyQj9ZzR-F_qHEMeIQALDng0tH7ML 核心代码： import bingMap from 'ol/source/BingMaps' const bingMapKey = "At0AC5clqqASpeFYI62...

BingMap key终是开始限制严格了

jcx5083761的专栏

10-16

7840

2015年十一，BingMap终是修改了BingMap key的授权，开始进行严格的限制了，之前的有关key的文档也说过key的限制问题，不过数量上的限制始终没有真正的实施，之前的策略是申请了BingMap的Public website类型的key，只是时间上有一年的限制，实际数量上没有严格的限制，但是今年的十一之后数量上的限制严格了。目前Public website类型的key的

cesium冷知识——bing底图的key是哪里来的？

wzwxwc1987的专栏

11-30

411

bing底图的key是哪里来的？

BingMap

weixin_30493321的博客

11-27

161

Application nameKey details BngMapTest Key:25nTPiuDe0kxITMR1ymE~j5IlskEImiwGsGmAnsCftQ~Ap0HigfJujLqYts8v6L75GnW5eanTPrMILHKLQPhzr_MefVpc62i8yfYC2h_ql1lApplication Url:Key type:Bas...

Cesium 问题：GET https://api.cesium.com/v1/assets/2/endpoint?access_token=eyJh.....403 如何避免 endpoint 请求

虎康的博客

05-12

496

在加载Cesium场景时，遇到场景漆黑一片的问题，控制台报错显示GET请求返回403（Forbidden）。分析发现，问题源于endpoint接口无法加载，导致access_token验证失败，进而无法调用Cesium服务。为避免该接口被调用，需避免使用默认的Cesium底图和地形服务。解决方案包括：1. 隐藏默认底图选择控件（baseLayerPicker: false）；2. 设置自定义底图（如ArcGIS或天地图等）。此外，若有离线部署需求，可将地图替换为离线瓦片。通过以上调整，可有效避免endpoi

cesium从入门到进阶（一）：Viewer、Scene、Camera、加载第三方影像、地形服务

happy81997的博客

01-04

2510

与 twist 有关的方法就是在相机位置不变的情况下，调整相机视角向左（逆时针）或向右（顺时针）扭转，这类方法不会改变相机的位置，只会改变相机的朝向；，与 look 有关的方法就是在相机位置不变的情况下，调整相机镜头的上下左右四个方向朝向，这类方法不会改变相机的位置，只会改变相机的朝向；，与 rotate 有关的方法会根据提供的角度参数旋转相机视角，这类方法会改变相机的位置，也会改变相机的朝向；是高程为 0 的地形，若初始化时不指定地形，那么默认的就是使用的该地形服务，加载。

cesium---图加载

最爱松露巧克力

10-28

1532

//矢量就是边框图，影像就是真实的图片效果，地形图就是初中地理书上的那种 window.viewer = this.viewer = new Cesium.Viewer("cesium", { //离线或者不是WebMapTileServiceImageryProvider这种的都可以写在这里 imageryProvider: new Cesium.BingMapsImageryProvider({ url: "https://dev.virtualearth.net", key:.

《Cesium 基础知识点》- 申请 Cesium Ion 密钥

前端技术

01-04

2181

一、访问 https://cesium.com/ion/signin/tokens 二、登录/注册三、申请四、使用 // 密钥 let defaultAccessToken = 'your token string'; // 设置 Cesium.Ion.defaultAccessToken = defaultAccessToken; // 初始化 let viewer = new Cesium.Viewer('cesiumContainer', {}); ...

Cesium无需KEY调用Bing地图

ONEGISER的博客

11-10

2881

前言虽然Cesium默认已经实现了Bing地图的调用，但需要申请key。如何不用key就可调用？抱着好奇的心态去看了下他的源代码。通过分析源代码，最终完成了调用，记录如下：关键源码 BingMapsImageryProvider.tileXYToQuadKey = function (x, y, level) { var quadkey = ""; for (var i = level; i >= 0; --i) { var bitmask = 1 << i;

【bing】bing网站密钥如何获取

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

12-27

7129

解决流程 1.进入bing网站页面后，点击网站右上角的小齿轮 2.点击api访问 3.查看api密钥访问

创建bing API key

qq_40713201的博客

11-25

4246

我们返回home点击bing resources，就会看见新增一条。点击新创建的名字，黄色框内是endpoint地址以及key。填写相关内容，名字随便起，价格选择F开头（free）点击链接可以看到有两条key。核对一下没问题点击创建。登录账号之后新创资源。

八、openlayers官网示例Bing Maps解析——加载Bing地图

aaa_div的博客

05-11

846

this.styles装了几个样式，这里循环把每个样式的图层都加载到地图上了，都设置了图层不显示visible: false，并且给每一个图层设置了一个name，方便后面切换。接下来来看一下如何加载BingMaps，首先需要去申请一个key，我申请了一下，流程不难，这里贴一个别人写的申请流程。如果在加载地图时设置placeholderTiles为false那地图就会拉伸图片来替代默认图片。加一个下拉框绑定事件，选择某一个样式时把其他图层隐藏，只显示当前这一个。Bing Maps地图使用。

Cesium——天地图服务调用流程&文档&申请Key、token&代码

weixin_46127993的博客

01-05

7292

天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供了包括地图数据、地理编码、路径规划、地理搜索等多项地理信息服务。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案，支持政府决策、城市规划、资源管理、环境保护、交通导航、物流配送等领域的应用。天地图在国内广泛应用于政府机构、企事业单位以及个人用户的地理信息查询与分析工作中。

cesium引入地图

03-23

### 如何在 Cesium 中加载和引入地图 #### 使用 OpenStreetMap 地图 Cesium 支持通过 `OpenStreetMapImageryProvider` 来加载 OpenStreetMap 的瓦片地图数据。这使得开发者可以轻松地将全球范围内的开放街景地图集成到自己的应用中[^2]。以下是加载 OpenStreetMap 地图的代码示例： ```javascript // 初始化 Cesium Viewer var viewer = new Cesium.Viewer('cesiumContainer'); // 添加 OpenStreetMap 图层 viewer.imageryLayers.addImageryProvider(new Cesium.OpenStreetMapImageryProvider({ url : 'https://a.tile.openstreetmap.org/' })); ``` 上述代码会初始化一个 Cesium 查看器，并添加基于 OpenStreetMap 提供的地图瓦片服务作为底图[^1]。 --- #### 在 Vue+Cesium 中加载 Bing 地图如果需要在 Vue 和 Cesium 结合的项目中加载 Bing 地图，则可以通过 `BingMapsApi Imagery Provider` 实现。支持多种类型的地图样式，例如 AERIAL、ROAD 等[^3]。下面是一个简单的例子来说明如何配置并加载 Bing 地图： ```javascript // 假设已安装 cesium 并设置好 vue 组件环境 import { Viewer } from "cesium"; export default { mounted() { const viewer = new Viewer("cesiumContainer"); // 设置 Bing Maps API 密钥 (需自行申请) Cesium.Ion.defaultAccessToken = "<your_bing_maps_api_key>"; // 添加 Bing 地图图层 viewer.imageryLayers.addImageryProvider( new Cesium.BingMapsImageryProvider({ url: "https://dev.virtualearth.net", key: "<your_bing_maps_api_key>", mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS, // 可选样式 }) ); }, }; ``` 注意：此方法依赖于有效的 Bing Maps API Key，因此需要先注册获取密钥。 --- #### 加载本地 3D Tiles 数据对于更复杂的数据可视化需求，比如建筑物模型或者地形高程数据，通常采用 3D Tiles 技术。Cesium 对这种格式有原生的支持，允许用户加载自定义生成的三维场景文件[^4]。下面是加载本地存储的 3DTiles 文件夹路径的一个实例： ```javascript // 创建一个新的 Cesium Viewer 实例 const viewer = new Cesium.Viewer("cesiumContainer", {}); // 定义要加载的 tileset URL 或者目录地址 const tilesetUrl = "./path/to/local/tileset.json"; // 将 TileSet 添加至场景中 viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: tilesetUrl, }) ); ``` 以上脚本展示了怎样指定本地磁盘上的 `.json` 配置文件位置从而渲染对应的三维对象集合。 --- #### 总结无论是在线资源还是离线包，Cesium 都提供了灵活多样的接口帮助我们快速接入各种类型的空间地理信息素材。从基础二维平面影像直到高级别的立体结构表达均能胜任处理任务。