当前位置：首页 > article >正文

vue中加载Cesium地图（天地图、高德地图）

article 2025/8/20 5:32:36

1、将下载的Cesium包移动至public下

2、首先需要将Cesium.js和widgets.css文件引入到

3、新建Cesium.js文件，方便在全局使用

4、新建cesium.vue文件，展示三维地图

1、将下载的Cesium包移动至public下

npm install cesium后

2、首先需要将Cesium.js和widgets.css文件引入到

/* widgets.css */

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

/* Cesium.js */

<script type="text/javascript" src="./Cesium/Cesium.js"></script>

3、新建Cesium.js文件，方便在全局使用

首先获取到Cesium的token；没有的话先创建

获取Cesium的tokenhttps://ion.cesium.com/

加载天地图需要获取天地图Key天地图登录https://console.tianditu.gov.cn/api/key

cesium.js文件

Cesium.Ion.defaultAccessToken = "自己的token"
// Cesium.Camera.DEFAULT_VIEW_FACTOR = 0 //摄像机视口远近参数，可设置地球大小,大于零会使它远离范围，而小于零会使它接近范围
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90,-20,110,90
); //设置默认显示中国正上方// 加载天地图需要天地图的Key
const TDTTK = "自己天地图的Key";let viewer;export function initCesiumMap(target) {// const Cartesian = Cesium.Cartesian3.fromDegrees(0, 0, 500.0)viewer = new Cesium.Viewer(target, {animation: false, // 是否显示动画控件shouldAnimate: false, // 是否初始时刻运动homeButton: false, // 是否显示Home按钮fullscreenButton: false, // 是否显示全屏按钮baseLayerPicker: false, // 是否显示图层选择控件 去掉自带的图层选择器geocoder: false, // 是否显示地名查找控件,设置为true，则无法查询timeline: false, // 是否显示时间线控件sceneModePicker: false, // 是否显示投影方式控件 三维/二维navigationHelpButton: false, // 是否显示帮助信息控件infoBox: false, // 是否显示点击要素之后显示的信息 信息框小部件baseLayerPicker: false, // 不显示底图选择器，如果你只想用默认底图的话requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneModescene3DOnly: true, // 仅显示3D场景fullscreenElement: document.body, // 全屏时渲染的HTML元素selectionIndicator: false, // 是否显示选取指示器组件});viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息const imageLayers = viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默认影像图层// 设置中心点为特定的经纬度（例如：经度116.38，纬度39.9）// viewer.camera.setView({//     destination: Cesium.Rectangle.fromDegrees(90, -20, 110, 90)// });/** 天地图*/// // 天地图影像// const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({//   url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,//   layer: "tdt",//   style: "default",//   format: "image/jpeg",//   tileMatrixSetID: "w",//   maximumLevel: 18,//   show: false,// });// viewer.imageryLayers.addImageryProvider(tdtLayer);// // 天地图注记// const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({//   url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,//   layer: "tdtAnno",//   style: "default",//   format: "image/jpeg",//   tileMatrixSetID: "w",//   maximumLevel: 18,//   show: false,// });// viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);/** 高德地图*///高德矢量图// let tdtLayer1 = new Cesium.UrlTemplateImageryProvider({// 	url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",// 	minimumLevel: 3,// 	maximumLevel: 18// })// viewer.imageryLayers.addImageryProvider(tdtLayer1)//高德影像let tdtLayer2 = new Cesium.UrlTemplateImageryProvider({url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",minimumLevel: 3,maximumLevel: 18,});viewer.imageryLayers.addImageryProvider(tdtLayer2);//高德路网中文注记let tdtLayer = 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",minimumLevel: 3,maximumLevel: 18,});viewer.imageryLayers.addImageryProvider(tdtLayer);
}export function getViewerMap() {return viewer;
}

4、新建cesium.vue文件，展示三维地图

<template><div id="cesiumContainer" class="cesiumContainer"></div>
</template><script>
// 刚才新建的Cesium.js文件
import * as viewerMap from "../components/cesium";
export default {data() {return {viewer: null,};},mounted() {this.$nextTick(() => {this.initCesium("cesiumContainer");});},methods: {initCesium() {viewerMap.initCesiumMap("cesiumContainer");// ==================== 使用 Entity API 添加点线面 ====================// 添加点// viewerMap.addEntityPoint()// 添加线// viewerMap.addEntityLine()// 添加半透明多边形// viewerMap.addEntityPolygonDiaphaneity()// 添加红色多边形（带洞）// viewerMap.addEntityPolygon()// ==================== 使用 Primitive API 添加点线面 ====================// 添加点// viewerMap.addPrimitivePoint()// 添加线// viewerMap.addPrimitiveLine()// 添加面// viewerMap.addPrimitivePolygon()//   添加图片标记点// viewerMap.addImgPoint()//   添加glb模型//   viewerMap.addGLB()// 添加使用glb模型进行实时轨迹// viewerMap.addGlbTrajectory()// 添加使用图片进行实时轨迹//   viewerMap.addImgTrajectory();this.viewer = viewerMap.getViewerMap();},clear(){viewerMap.clearIntervalEvent();}},beforeUnmount() {this.clear()},
};
</script><style lang="scss">
.cesiumContainer {width: 100%;height: 100%;background-color: black;
}
</style>

这样就可以完整展示出三维地球