《Cesium 基础知识点》- 项目初始化

最新推荐文章于 2025-09-25 11:47:29 发布

原创最新推荐文章于 2025-09-25 11:47:29 发布 · 840 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Cesium 基础知识点

一、新建项目

vue create webapp

版本：@vue/cli 4.5.9

二、下载 Cesium

npm install cesium

版本：cesium@1.76.0

三、引入(全局)

新建 vue.config.js 文件

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
 
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
 
module.exports = {
  // 基本路径  3.6之前的版本是 baseUrl
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8088,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};

main.js 中使用

import Vue from 'vue'
import App from './App.vue'

 
//引入cesium相关文件
var cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
 
Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
 

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

四、三维场景初始化

App.vue 文件，这里添加了天地图

<template>
    <div id="app">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script>

export default {
    name: 'App',
    mounted() {
        // 密钥
        let defaultAccessToken = '你的 ion token';
        let Cesium = this.cesium;
        // Ion token 设置
        Cesium.Ion.defaultAccessToken = defaultAccessToken;
        // 三维场景初始化
        window.viewer = new Cesium.Viewer('cesiumContainer', {
            // imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
            //     url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
            // }),
            //baseLayerPicker: false, //关闭图层选择器
            //放大镜图标，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
            //geocoder: false,
            //主图标，视角返回初始位置
            //homeButton: false,
            //经纬网图标，选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)
            //sceneModePicker: false,
            //地图图标，图层选择器，选择要显示的地图服务和地形服务,默认会用到cesium.ion
            baseLayerPicker: false,
            //问号图标，导航帮助按钮，显示默认的地图控制帮助
            navigationHelpButton: false,
            animation: false,//动画器件，显示当前时间，允许跳转特定时间
            timeline: false,//时间轴
            //全屏图标，全屏按钮
            fullscreenButton: false,
            //虚拟现实
            //vrButton: true,
            //阴影
            shadows: true,
            //点击后显示详细信息
            //infoBox: true,
            //展示数据版权属性
            CreditsDisplay: false,
            //terrainExaggeration: 3.0, //地形夸大
            shouldAnimate: true
        });
                    
        let tdtToken = '你的天地图 token';
        // vec(全球矢量地图服务)
        // img(全球影像地图服务)
        // cia(全球影像中文注记服务)
        // cva(全球矢量中文注记服务)
        let mapType = 'img';
        let tdtUrl = `http://{s}.tianditu.com/${mapType}_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=${mapType}&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tdtToken}`;
        let layerProvider = new Cesium.WebMapTileServiceImageryProvider({
                url: tdtUrl,
                layer: 'tdtBasicLayer' + mapType,
                style: "default",
                format: "tiles",
                tileMatrixSetID: "w",
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
        });
        let layer = window.viewer.imageryLayers.addImageryProvider(layerProvider);
        
    }
}
</script>

<style>
* {
    padding: 0;
    margin: 0;
}
#app, #cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

注意：Cesium.Viewer 对象不要挂载 Vue data属性上，存在效率问题。推荐放在全局 window 中。