cesium安装教程

安装教程

新建一个index.html，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 首先得去网站申请一个token，如果你要用cesium 自带的影像和OSM模型的话: https://cesium.com/ion/tokens.
    // 用自己的token 替代`your_access_token` .

    Cesium.Ion.defaultAccessToken = 'your_access_token';

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器，这里不传ID传DO .
    const viewer = new Cesium.Viewer('cesiumContainer', {
      
      
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // 加载OSM建筑，也就是一些城市的白膜建筑，只有形状没有纹理的模型.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // 所有的视图都在viewer中，后期的教程也基本围绕viewer展开，这里我们调用相机的fltTo函数，输入经纬度和高度，俯仰角等，需要注意的是
    // 经纬度需要我们转换成cesium的Cartesian3，同理heading，pitch也需要从角度转成弧度，否则你会看到奇奇怪怪的视角.
    viewer.camera.flyTo({
      
      
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
      
      
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

然后你就可以在浏览器打开网页，欣赏你的cesuim之旅了：

Vue使用

官网提供了npm包，但是直接在项目里使用会获取不到一些资源，如果你是用脚手架来创建的项目，需要用到插件来引入比较方便，或者自己配置webpack，本文先讲前种方式（vite和vue-cli），后者后续webpack熟悉了再试试。

vite项目引入

1、首先安装依赖插件

npm install @vitejs/plugin-vue -D

2、接着配置vite项目配置文件：vite.config.js

import {
    
     fileURLToPath, URL } from 'node:url'
import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import cesium from 'vite-plugin-cesium';

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [vue(), vueJsx(),cesium()],
  resolve: {
    
    
    alias: {
    
    
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

3、新建地图

App.vue:

<script setup lang="ts">
import { Viewer } from 'cesium';
import {onMounted} from 'vue'
// import './css/main.css';
onMounted(()=>{
  const viewer = new Viewer('cesiumContainer');

})
</script>

<template>
  <div id="cesiumContainer">

  </div>
</template>

<style>
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#cesiumContainer {
  width: 100%;
  height: 100vh;
  background-color: black;
}
</style>

vue-cli项目引入

可以参考https://github.com/isboyjc/vue-cli-plugin-cesium的插件的文档，比较麻烦，vite相比webpack也更快，可以优先考虑用vite 创建你的项目吧。

安装教程

Vue使用

vite项目引入

vue-cli项目引入

猜你喜欢