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

news2025/6/7 17:44:35

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.SceneMode
    scene3DOnly: 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>

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