1、引入文件
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
2、初始化场景 new Cesium.Viewer(el,options)
<template>
<div id="cesium-scene">
</template>
<script>
export default {
methods:{
initViewer(){
let viewer = new Cesium.Viewer('cesium-scene',{
globe:false,// 球体
navigation:true, // 导航罗盘
imageryProvider:new Cesium.SingleTileImageryProvider({
url : './images/worldimage.jpg'
}),// 通过添加影像图层来设置三维球的风格
clock: new Cesium.Clock({
currentTime : Cesium.JulianDate.fromIso8601("2013-12-25") ,//设置当前时间
shadows:true,//阴影是否有太阳投射形成
let scene = viewer.scene;
</script>
3-1添加图层
a、地形图层 terrainProvider
let viewer = new Cesium.Viewer('cesiumContainer',{
terrainProvider : new Cesium.CesiumTerrainProvider({
url : 'xxxxxxx',
let viewer = new Cesium.Viewer('cesium-scene');
let terrainProvider = new Cesium.VRTheWorldTerrainProvider({
url : 'https://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/'
viewer.terrainProvider = terrainProvider;
b、 影像图层 imageryProvider
let viewer = new Cesium.Viewer('cesium-scene')
let layer = new Cesium.SuperMapImageryProvider({
url : 'xxx' //影像服务的地址
let imgLayer = viewer.imageryLayers.addImageryProvider(layer)
let viewer = new Cesium.Viewer('cesium-scene',{
imageryProvider:new Cesium.SingleTileImageryProvider({
url : './images/worldimage.jpg'
c、三维切片缓存S3M图层 scene.open \ addS3MTilesLayerByScp
// 方式一 scene.open(url)
let promise = scene.open('xxxx');
Cesium.when(promise,function(layers){
let sceneLayers = layers;
// 方式二 addS3MTilesLayerByScp(url)
var promise = scene.addS3MTilesLayerByScp('xxx');
promise.then(function(layer){
layer.visible = true;
d、mvt矢量瓦片图层 addVectorTilesMap
let viewer = new Cesium.Viewer('cesium-scene');
let scene = viewer.scene;
let mvtMap = scene.addVectorTilesMap({
url: 'xxx', //MVT的服务地址
canvasWidth: 512,
name: 'testMVT',
viewer
3-2查找图层
viewer.scene.layers.find() ;// 根据图层名称信息查找
viewer.scene.layers.findByIndex();// 根据图层的索引查找
3-3 删除一个图层
viewer.imageryLayers.remove(layer) ;// layer:要删除的图层对象
viewer.scene.layers.remove(layer);
3-4 删除所有图层
viewer.imageryLayers.removeAll()
viewer.scene.layers.removeAll();
3-5 销毁所有图层释放资源
viewer.imageryLayers.destroy()
viewer.scene.layers.removeAll(true);
4、绘制 Cesium.DrawHandler
4-1 创建绘制对象
let viewer = new Cesium.Viewer('cesium-scene')
let handler = new Cesium.DrawHandler(viewer,Cesium.DrawMode.Line,ClampMode.Ground);
Cesium.DrawMode：
Cesium.DrawMode.Point 、Cesium.DrawMode.Line、Cesium.DrawMode.Polygon、Cesium.DrawMode.Marker、Cesium.DrawMode.Box
4-2 激活绘制对象
handler.activate();
4-3绘制对象事件
handler.activeEvt.addEventListener(function(result){
// 绘制对象激活的事件监听
handler.drawEvt.addEventListener(function(result){
// 绘制完成的事件监听
handler.movingEvt.addEventListener(function(result){
// 绘制对象移动的事件监听
4-4绘制对象关闭
handler.deactivate();
4-5绘制对象清除
handler.clear()
5、测量 Cesium.MeasureHandler
5-1 创建测量对象
let handler = new Cesium.MeasureHandler(viewer, MeasureMode, clampMode);
MeasureMode：Cesium.MeasureMode.Distance、Cesium.MeasureMode.Area、
Cesium.MeasureMode.DVH
5-2 激活测量对象
handler.activate();
5-3 测量对象监听事件
handler.activeEvt.addEventListener(function (isActive) {
// 测量对象激活的事件监听
handler.measureEvt.addEventListener(function(result){
// 测量完成的事件监听
5-4 关闭测量对象
handler.deactivate()
5-5 测量对象清除
handler.clear()
6-1 添加实体
//方法一
let entity = new Entity({
id : '我是唯一标识'
viewer.entities.add(entity);
//方法一 简写
viewer.entities.add({
id : '我是唯一标识'
//方法二
let entity = viewer.entities.getOrCreateEntity('我是唯一标识');
6-2 查找实体
let entity = viewer.entities.getById('我是唯一标识');
6-3 删除指定实体
//方法一，先查后删
let entity = viewer.entities.getById('我是唯一标识');
viewer.entities.remove(entity)
//方法二，直接删除
viewer.entities.removeById('我是唯一标识')
6-4 删除所有实体
viewer.entities.removeAll()
6-5 常用实体
const point = viewer.entities.add({ // 点
position: Cesium.Cartesian3.fromDegrees(117,32,5000),
name: "point",
point: {
color:Cesium.Color.RED,
pixelSize:30
const line = viewer.entities.add({ // 线
name: "line",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
width: 5,
material: Cesium.Color.RED,
clampToGround: true,
const polygon = viewer.entities.add({ // 面
name: "polygon",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-115.0,
37.0,
-115.0,
32.0,
-107.0,
33.0,
-102.0,
31.0,
-102.0,
35.0,
material: Cesium.Color.RED,
6-6 实体属性
id : 对象的唯一标识符。如果没有提供，则生成GUID。
name : 向用户显示的可读名称，名称可不必唯一。
show : 是否显示实体对象及其子项。
description : 实体的HTML描述。
position : 实体的位置。
billboard : 与此实体关联的广告牌。
label : 与实体关联的标签对象。
point : 与实体关联的点对象。
polygon : 与实体关联的多边形对象。
polyline : 与实体关联的折线对象。
a: label属性
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.17, 39.92),
label: {
show:true,
text: "我是标签",
font: "24px Helvetica",
fillColor: Cesium.Color.SKYBLUE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
backgroundColor:Cesium.Color.PINK,
showBackground:true,
scaleByDistance:new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0),// 根据距相机位置设置放大缩小
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 20.0);//在距相机位置显示广告牌
b.billborad广告牌
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.77, 40.83),
billboard: {
show:true,
image: "https://img0.baidu.com/it/u=567782244,1695500002&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500",
width: 150,
height:80,
scale:1,
pixelOffset: new Cesium.Cartesian2(0, -50),
rotation: Cesium.Math.PI_OVER_FOUR,
verticalOrigin:Cesium.VerticalOrigin.BOTTOM,// 垂直位置上中下
horizontalOrigin:Cesium.HorizontalOrigin.LEFT,//水平位置左中右
translucencyByDistance:new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0);// 根据广告牌到相机的距离，设置广告牌的近和远半透明属性
scaleByDistance:new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0); // 根据距离设置放大缩小
c.description属性
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-75.1647, 39.9522),
name:'我是infobox的标题',
description:'我是infobox的内容',
label: {
text: "我是标签",
font: "24px Helvetica",
fillColor: Cesium.Color.SKYBLUE,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
backgroundColor:Cesium.Color.PINK,
showBackground:true,
7、常用定位
a、 flyTo
let viewer = new Cesium.Viewer('cesium-scene');
viewer.camera.flyTo({
destination:Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
b、 zoomTo
let viewer = new Cesium.Viewer('cesium-scene');
let box = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
box : {
dimensions : new Cesium.Cartesian3(length, width, heihgt),
material : Cesium.Color.RED.withAlpha(0.5),
viewer.zoomTo(box);
c、 setView
let viewer = new Cesium.Viewer('cesium-scene');
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(longitude, latitude, height),