umrcheng的博客
large picture of the cover

Cesium 创建地图

vue3+vite+ceisum 使用教程

笔记
链接

基础环境配置

1. 安装

pnpm i cesium@1.99 vite-plugin-cesium

2. 修改vite.config.js⽂件, 添加cesium

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue(),cesium()]
})

3. 使用 cesium , 如在app.vue中引⼊Cesium

import * as Cesium from 'cesium'

4. 基础创建代码

<script setup>
import { shallowRef, onMounted } from "vue";
import * as Cesium from 'cesium'

const viewer = shallowRef(null)

onMounted(async () => {
  // 设置 Token
  Cesium.Ion.defaultAccessToken = '你的Token'
  // 创建 Viewer
  viewer.value = new Cesium.Viewer('cesium', {})

})
</script>

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

5. 示例运行效果

image-prei.png

Cesium.Viewer 参数设置

设置影像图层及控件

ArcGIS影像图层地址

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer

创建代码

<script setup>
import { shallowRef, onMounted } from "vue";
import * as Cesium from 'cesium'

const viewer = shallowRef(null)

onMounted(async () => {
  // 设置 Token
  Cesium.Ion.defaultAccessToken = '你的Token'
  // 创建 Viewer
  viewer.value = new Cesium.Viewer('cesium', {
    // 默认的⾕歌地图影像 影像图层 ImageryLayer
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      enablePickFeatures: false,
    }),
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true, // 是否请求顶点法线
      requestWaterMask: true,    // 是否请求水掩
    }),
    animation: false, // 是否显示动画控件
    timeline: false,  // 是否显示时间轴
    infoBox: false,   // 是否显示信息框
    geocoder: false,  // 是否显示地名查找控件
    homeButton: false, // 是否显示Home按钮
    fullscreenButton: false,  // 是否显示全屏按钮
    baseLayerPicker: false,   // 是否显示图层选择控件
    navigationHelpButton: false,  // 是否显示帮助按钮
    sceneModePicker: false, // 是否显示投影方式控件
  })

})
</script>

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

效果预览

image-vgma.png

相机设置

1. 设置相机位置

// 设置相机位置
viewer.value.camera.setView({
  // 目标点
  destination: Cesium.Cartesian3.fromDegrees(120.5810725, 31.3016935, 100000),
  // 初始化角度
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-30),
    roll: 0
  }
})

2. 相机运动

// 移动相机
viewer.value.camera.flyTo({
  // 目标点
  destination: Cesium.Cartesian3.fromDegrees(110.5810725, 30.3016935, 450000),
  // 初始化角度
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: 0
  },
  // 动画时长
  duration: 2
})

固定相机位置, 使相机固定在某个位置, 不跟随鼠标移动, 可以缩放

// 固定相机位置, 使相机固定在某个位置, 不跟随鼠标移动, 可以缩放
const position = Cesium.Cartesian3.fromDegrees(120.5810725, 31.3016935,)
viewer.value.camera.lookAt(position, new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-90),
    1000000,//中⼼点距离地⾯的距离
))

数据转化

角度于弧度的计算

角度转弧度 π/180经纬度
弧度变⻆度 180/π弧度

Cesium 使用的是笛卡尔坐标系, 与现实世界的经纬度不一样需要转化
注意: 笛卡尔坐标系转经纬度时, 转换结果为弧度制, 只有高度不变

// 经纬度转笛卡尔坐标系, 经度, 纬度, 高度
const dkr = Cesium.Cartesian3.fromDegrees(120, 30, 130)
console.log(dkr, 'dkr')

// 笛卡尔坐标系转经纬度, 经纬度单位为弧度
const jwd = Cesium.Cartographic.fromCartesian(dkr)
console.log(jwd, 'jwd')

// 弧度制转化
const lo = Cesium.Math.toDegrees(jwd.longitude)
const la = Cesium.Math.toDegrees(jwd.latitude)
console.log(lo, la, jwd.height)

输出结果

Cartesian3 {x: -2764184.6112976633, y: 4787708.188267582, z: 3170438.7353836372} 'dkr'
Cartographic {longitude: 2.0943951023931957, latitude: 0.5235987755982987, height: 130.0000000000647} 'jwd'
120.00000000000001 29.999999999999993 130.0000000000647

实体

1. 画点

实体中都是笛卡尔坐标
entity是基于primitive封装的

// 写法⼆(推荐)
const point = new Cesium.Entity({
  // 笛卡尔坐标
  position: Cesium.Cartesian3.fromDegrees(
      114.0,
      30.0,
  ),
  point: {
    color: Cesium.Color.RED,  // 点的颜色
    pixelSize: 10.0,  // 点的大小
    outlineColor: Cesium.Color.WHITE, // 点的外线颜色
    outlineWidth: 2.0,  // 点的外线宽度
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,  // 点的基准高度
  },
  label: {
    text: '点1', // 标签的文字
    fillColor: Cesium.Color.YELLOWGREEN,  // 标签的文字颜色
    showBackground: true, // 标签的背景颜色
    backgroundColor: new Cesium.Color(255, 255, 0,) // 标签的背景颜色
  }
})
viewer.value.entities.add(point)  // 添加实体


// 写法⼀
const point = new Cesium.Entity({
  position: Cesium.Cartesian3.fromDegrees(
      114.0,
      30.0,
  ),
  point: {
    color: Cesium.Color.RED,
    pixelSize: 10.0,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 2.0,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  },
  label: {
    text: '点1',
    fillColor: Cesium.Color.YELLOWGREEN,
    showBackground: true,
    backgroundColor: new Cesium.Color(255, 255, 0,)
  }
})
viewer.value.entities.add(point)

viewer.value.zoomTo(point2) // 缩放移动至实体

Cesium 创建地图

<script setup>
import { shallowRef, onMounted } from "vue";
import * as Cesium from 'cesium'

const viewer = shallowRef(null)

onMounted(async () => {

  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
  })

  //其中Rectangle是矩形范围，指定为经度和纬度坐标的二维区域
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
      73.5,//西经
      4,//南纬
      135.4,//东经
      53.5//北纬
  )

  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1OWY4MDdmNS1kYzU3LTQ0YTMtOTFlNC1lMTRiZjJmMmQ1ODkiLCJpZCI6MjgyNTQ3LCJpYXQiOjE3NDE0OTY4NDF9.5IPfvsFL9FrVdUJVFRyLqBE_uo01sFzznqZy7nr3rKg'
  viewer.value = new Cesium.Viewer('cesium', {
    imageryProvider: esri,
    terrainProvider: Cesium.createWorldTerrain({
      requestVertexNormals: true, // 是否请求顶点法线
      requestWaterMask: true,    // 是否请求水掩
    }),
    animation: false, // 是否显示动画控件
    timeline: false,  // 是否显示时间轴
    infoBox: false,   // 是否显示信息框
    geocoder: false,  // 是否显示地名查找控件
    // homeButton: false, // 是否显示Home按钮
    fullscreenButton: false,  // 是否显示全屏按钮
    baseLayerPicker: false,   // 是否显示图层选择控件
    navigationHelpButton: false,  // 是否显示帮助按钮
    sceneModePicker: false, // 是否显示投影方式控件
  })

  // 经纬度转笛卡尔坐标系
  const dkr = Cesium.Cartesian3.fromDegrees(120, 30, 130)
  console.log(dkr, 'dkr')

  // 笛卡尔坐标系转经纬度, 经纬度单位为弧度
  const jwd = Cesium.Cartographic.fromCartesian(dkr)
  console.log(jwd, 'jwd')

  // 弧度制转化
  const lo = Cesium.Math.toDegrees(jwd.longitude)
  const la = Cesium.Math.toDegrees(jwd.latitude)
  console.log(lo, la, jwd.height)

  // 设置相机位置
  viewer.value.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(120.5810725, 31.3016935, 100000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-30),
      roll: 0
    }
  })

  // 移动相机
  viewer.value.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(110.5810725, 30.3016935, 450000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0
    },
    duration: 2
  })
})
</script>

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

<style scoped>

:deep(.cesium-viewer-bottom) {
  display: none;
}

</style>

WKID列表

常用的地理和投影坐标系的WKID
ArcGIS中我国常用的坐标系统WKID列表

GIS新人必知的内容

https://juejin.cn/post/7402079591718436898

四下皆无人

site logo

Hi,Friend

© 2025 umrcheng的博客