Vue+Cesium：添加高德地图/百度地图/天地图

最新推荐文章于 2025-03-18 00:00:00 发布
最新推荐文章于 2025-03-18 00:00:00 发布
阅读量5k 收藏 21
点赞数 7
分类专栏： cesium三维开发学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54937289/article/details/134654588
版权

1  Viewer查看器控件的设置

const viewer = new Cesium.Viewer('container', {
		//地形图层
		terrain: Cesium.Terrain.fromWorldTerrain(),
		//信息窗口
		infoBox: false,
		//显示查询按钮
		// geocoder: false,
		//home按钮
		// homeButton: false,
		// 控制查看器的显示模式-地球/平面
		// sceneModePicker: false,
		// 是否显示图层选择
		baseLayerPicker: false,
		//帮助按钮
		navigationHelpButton: false,
		//播放动画
		// animation: false,
		//时间线
		// timeline: false,
		//全屏模式
		// fullscreenButton: false
	})

2 高德地图的添加

  • 矢量图层

//加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
	viewer.imageryLayers.addImageryProvider(
		new Cesium.UrlTemplateImageryProvider({
			url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
			layer: 'tdtVecBasicLayer',
			style: 'default',
			format: 'image/png',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)

  •  矢量注记图层

// 如果需要叠加高德/百度注记地图则添加以下代码
	viewer.imageryLayers.addImageryProvider(
		new Cesium.UrlTemplateImageryProvider({
			url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
		})
	)

 3 天地图的添加

申请key

天地图API (tianditu.gov.cn)icon-default.png?t=N7T8http://lbs.tianditu.gov.cn/home.html

  • 加载天地图影像图层

//加载天地图
	const webKey = 'key'
	//天地图属于网络底图切片影像图层 影像底图
	//WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口，天地图是典型的WMTS服务的原型
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)

  • 加载天地图影像注记图层

//影像注记
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)

  • 加载天地图矢量图层

//矢量底图
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' +
				webKey,
			layer: 'tdtVecBasicLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)

  •  加载天地图矢量注记图层

//矢量注记
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
		})
	)

 4 完整代码

<template>
	<div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

Cesium.Ion.defaultAccessToken = key
onMounted(async () => {
	// 地球视图，底图加载
	const viewer = new Cesium.Viewer('container', {
		//地形图层
		terrain: Cesium.Terrain.fromWorldTerrain(),
		//信息窗口
		infoBox: false,
		//显示查询按钮
		// geocoder: false,
		//home按钮
		// homeButton: false,
		// 控制查看器的显示模式-地球/平面
		// sceneModePicker: false,
		// 是否显示图层选择
		baseLayerPicker: false,
		//帮助按钮
		navigationHelpButton: false,
		//播放动画
		// animation: false,
		//时间线
		// timeline: false,
		//全屏模式
		// fullscreenButton: false
	})
	//隐藏cesium Icon-logo
	viewer.cesiumWidget.creditContainer.style.display = 'none'
	// cesium的默认视角
	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
		89.5,
		20.4,
		110.4,
		61.2
	)
	//加载天地图
	const webKey = 'key'
	//天地图属于网络底图切片影像图层 影像底图
	//WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口，天地图是典型的WMTS服务的原型
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)
	//影像注记
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)
	//矢量底图
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' +
				webKey,
			layer: 'tdtVecBasicLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)
	//矢量注记
	viewer.imageryLayers.addImageryProvider(
		new Cesium.WebMapTileServiceImageryProvider({
			url:
				'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
				webKey,
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
		})
	)
	//加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
	viewer.imageryLayers.addImageryProvider(
		new Cesium.UrlTemplateImageryProvider({
			url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
			layer: 'tdtVecBasicLayer',
			style: 'default',
			format: 'image/png',
			tileMatrixSetID: 'GoogleMapsCompatible',
			show: false,
		})
	)
	// 如果需要叠加高德/百度注记地图则添加以下代码
	viewer.imageryLayers.addImageryProvider(
		new Cesium.UrlTemplateImageryProvider({
			url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
			layer: 'tdtAnnoLayer',
			style: 'default',
			format: 'image/jpeg',
			tileMatrixSetID: 'GoogleMapsCompatible',
		})
	)
	// 将三维球定位到中国
	viewer.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
		orientation: {
			heading: Cesium.Math.toRadians(348.4202942851978),
			pitch: Cesium.Math.toRadians(-89.74026687972041),
			roll: Cesium.Math.toRadians(0),
		},
		complete: function callback() {
			// 定位完成之后的回调函数
		},
	})
})
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
#container {
	height: 100%;
	width: 100%;
}
</style>

5 小提示

  • 注意检查token或key是否添加
  • 检查引入cesium样式是否正确
2.（cesium篇）cesium接入百度地图
地图之家
05-20 9402
2.（cesium篇）cesium接入百度地图
Cesium 在百度地图 GIS 中的集成
MXMIMM的博客
09-26 285
百度地图 GIS 是百度地图提供的一项服务，结合了百度地图的地理数据和功能，为开发者提供了创建个性化地图应用的平台。你可以根据需要在 Cesium 的基础上添加其他的图层、实体和功能，以创建自定义的地图应用。最后，我们将百度地图的底图图层添加到 Cesium 视图的 imageryLayers 中，这样就完成了 Cesium 在百度地图 GIS 中的集成。最后，我们将百度地图的底图图层添加到 Cesium 视图的 imageryLayers 中，这样就完成了 Cesium 在百度地图 GIS 中的集成。
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自中国的在线地图服务平台天地图，提供丰富的地理信息。代码禁用了全屏按钮、地理编码器等，隐藏了版权信息，以优化用户体验。 Vue.js 是一个流行的 JavaScript 前端框架，可以帮助开发者高效构建具有交互性的 Web 应用。在本示例中，Vue.js 的使用使代码更具模块化，便于扩展和维护。这个示例为开发者提供了一个简洁、易用的 Cesium 地图应用，展示了如何在 3D 地球视图中查看和探索地理信息，优化了用户体验，让用户专注于地图内容。这个示例可以作为开发者构建基于 Cesium 的地图应用的起点，也可以帮助了解如何使用 Vue.js 和 Cesium.js 结合开发 Web 应用。
Cesium 入门系列教程（三）：加载不同的地图底图（10多种）
最新发布
大剑师兰特的GIS世界
03-18 1143
Cesium 提供了多种类（ImageryProvider）来加载不同的地图底图。每个 `ImageryProvider` 子类代表了一种特定的地图服务或数据源，可以用来在 Cesium Viewer 中显示底图。
地图导航 Cesium+Vue2+高德地图
SEEKERJY的博客
08-28 1153
cesium + 高德地图 实现路径规划及获取鼠标当前经纬度
cesium使用环境搭建--vue中安装并引用百度地图
weixin_43989837的博客
02-22 929
1，安装，安装1.60版本最好，1.40版本兼容百度地图有问题 npm install cesium@1.60 --save 2.配置文件，在config.vue.js中配置 -----plugins const path = require('path');//引入path模块 const CopyWebpackPlugin = require('copy-webpack-plugin');//引入path模块 const webpack = require("webpack"); functio
使用Cesium接入百度影像地图GIS
KkvlCapture的博客
09-23 778
在本文中，我们将探讨如何使用Cesium接入百度影像地图GIS，以展示高质量的卫星影像数据。在开始之前，我们需要获取百度影像地图的API密钥，以便在Cesium中使用它。在这里，我们将初始位置设置为北京的经纬度坐标（116.3974, 39.9093），并将视角朝向设置为向下（pitch为-90度），以便查看地图的俯视视角。通过运行上述代码，您将能够在Cesium中接入百度影像地图GIS，并显示高质量的卫星影像数据。属性中，我们使用百度地图的自定义影像地图API URL，并将其中的。
Cesium集成百度影像地图：实现高度交互性的地图可视化
TqbcAbap的博客
09-23 340
Cesium是一款强大的地理信息系统（GIS）开源库，它提供了丰富的功能和工具，用于在Web浏览器中创建高度交互性的地图可视化。百度影像地图是百度地图平台的一部分，提供了高分辨率的卫星影像数据，结合Cesium可以实现更加真实和细致的地图展示。接下来，我们需要创建一个包含地图容器的HTML元素，并设置其样式和尺寸。通过这种集成，你可以创建交互性强、功能丰富的地图可视化应用，为用户提供更加真实和细致的地理信息体验。现在，你可以在浏览器中运行这段代码，就可以看到集成了百度影像地图的Cesium地图了。
Cesium添加百度地图
zy332719794的专栏
04-08 7542
百度地图的瓦块切片与大多数地图不同，其中心点位于地理坐标的0,0点，多数地图的切片是以地图左上角为瓦块切片的起点。Cesium中默认的切片地图（UrlTemplateImageryProvider）包括经纬度模式和投影（墨卡托）模式都是以左上角切片为基准。所以当我们加载百度地图瓦块地图时，需要自定义地图影像地图类。 BaiduImageryProvider = function(options) { this._errorEvent = new Cesium.Event(); this.
070：vue+cesium: 利用canvas设置线性渐变色材质
大剑师兰特的GIS世界
02-05 1607
本示例的目的是介绍如何在vue+cesium中设置线性渐变色的材质，这里使用canvas的辅助方法。
vue3-vite-ts-cesium-天地图 地图影像 矢量地图 矢量标注
04-02
这个模板是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 WebMapTileServiceImageryProvider 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。 此代码中使用了 TypeScript，使代码更加规范、易于维护。同时，使用了 Vue3 的新特性 setup()，提供了更加灵活的组件配置方式，避免了传统 Vue2 中使用 Options API 时可能出现的一些问题。同时，使用了 Cesium 的 API，可以很方便地实现三维地球应用的开发。
cesium加载百度地图
05-20
cesium加载百度地图方法
Cesium+Vue3教程（003）：基于Vue3的Cesium自定义地图和地图叠加
WwLK123的博客
01-18 193
在 Cesium 中，是用于加载地表影像图层的核心接口。通过它，您可以将各种地图服务（如卫星影像、街道地图、自定义瓦片等）加载到 Cesium 的地球上。Cesium 提供了多个内置的。
071：vue+cesium 实现下雨效果
大剑师兰特的GIS世界
03-01 1565
第071个本示例的目的是介绍如何在vue+cesium中实现下雨效果，这里使用着色器来实现实例特效。
Cesium--加载天地图
JessicaLi的博客
05-09 1546
背景：vue-admin-temlate + cesium +天地图。1,天地图使用方法（点击开发资源即可看到此页面）最要为了获取key （后面使用是token）步骤一：申请成为天地图开发者，创建应用。步骤二：cesium加载天地图。2,点击控制台-登录账号。
vue+cesium之加载天地图影像底图与注记
whs15193553607的博客
07-08 1383
Cesium是默认加载了微软公司的Bing地图，并提供了BingMapslmageryProvider类来加载Bing地图。也就是说，在创建Viewer时，如果不指定lmageryProvider类就默认加载Bing地图。 在示例中详细介绍如何通过lmageryProvider类加载天地图，并使用Cesium的WebMapTileServiceImageryProvider类来调用天地图底图服务。
vue3cesium加载天地图
m0_50884068的博客
02-20 1055
【代码】vue3cesium加载天地图。
vue +cesium 加载天地图
xm_w_xm的博客
09-10 2836
npm install cesium --save webpack.base.conf.js文件 const cesiumSource = '../node_modules/cesium/Source' output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build...
openlayers ol
01-12
### OpenLayers (ol) 使用指南和常见问题解决 #### 一、安装 OpenLayers 并集成到 Vue 项目中 为了在 Vue 项目中使用 OpenLayers，需先确保已正确安装并配置好环境。可以通过 npm 或 yarn 来安装 OpenLayers： ```bash npm install ol --save ``` 或者 ```bash yarn add ol ``` 完成上述操作之后，在 Vue 组件内引入 `ol` 模块即可开始构建地图应用[^1]。 #### 二、加载不同类型的底图服务 OpenLayers 支持多种在线地图服务商的数据源接入，比如天地图、百度地图、高德地图等。下面给出一段通用代码片段用于展示如何创建一个基于 OSM 的矢量瓦片层作为基础地图： ```javascript import 'ol/ol.css'; import { Map, View } from 'ol'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }); ``` 对于其他类型的地图提供商，则需要替换对应的类名以及可能存在的额外参数设置。例如，当想要添加 ArcGIS Server 地图时，应该选用 `XYZ` 类型的 Source，并指定相应的 URL 模板[^2]。 #### 三、与 Cesium 结合实现三维可视化效果 如果希望进一步增强项目的交互体验，还可以考虑将 OpenLayers 同 CesiumJS 联动起来。这不仅能够提供更加丰富的视觉呈现方式，同时也简化了开发流程中的某些复杂逻辑处理工作。具体来说就是利用名为 "OL-Cesium" 的插件来达成目的。该工具允许用户在同一界面下自由转换二维平面视图和平移缩放功能完备的球体模型之间查看地理信息[^3]。 ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值