cesium 基础篇

最新推荐文章于 2024-07-03 18:54:45 发布
最新推荐文章于 2024-07-03 18:54:45 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littlewindy520/article/details/103673302
版权

文章目录

0.安装

官方网址

官方css

官方JS

中文API

token

天空盒子

1.基础

1.初始化
<div id="cesiumxin" >
var viewer = new Cesium.Viewer('cesiumContainer',{});
2.属性
animation : false,//是否创建动画小器件，左下角仪表    
baseLayerPicker : false,//地图切换控件(底图以及地形图)是否显示,默认显示true
fullscreenButton : false,//是否显示全屏按钮    
geocoder : false,//是否显示geocoder小器件，右上角查询按钮    
homeButton : false,//是否显示Home按钮    
infoBox : false,//是否显示信息框    
sceneModePicker : false,//是否显示3D/2D选择器    
selectionIndicator : false,//是否显示选取指示器组件    
timeline : false,//是否显示时间轴    
navigationHelpButton : false,//是否显示右上角的帮助按钮    
scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源    

clock : new Cesium.Clock(),//用于控制当前时间的时钟对象    
selectedImageryProviderViewModel : undefined,//当前图像图层的显示模型，仅baseLayerPicker设为true有意义    
imageryProviderViewModels : Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组    
selectedTerrainProviderViewModel : undefined,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义    
terrainProviderViewModels : Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组    
imageryProvider : new Cesium.OpenStreetMapImageryProvider( {    
    credit :'',    
    url : '//192.168.0.89:5539/planet-satellite/'    
} ),//图像图层提供者，仅baseLayerPicker设为false有意义    
terrainProvider: new Cesium.CesiumTerrainProvider({
                    url: url.dem,
                    requestVertexNormals: true,
                    requestWaterMask: true
                })//地形图层提供者，仅baseLayerPicker设为false有意义    
 skyBox: new Cesium.SkyBox({
    sources: {
        positiveX: "static/images/sky/posx.png",
        negativeX: "static/images/sky/negx.png",
        positiveY: "static/images/sky/posy.png",
        negativeY: "static/images/sky/negy.png",
        positiveZ: "static/images/sky/posz.png",
        negativeZ: "static/images/sky/negz.png"
    }
}) //用于渲染星空的SkyBox对象  
fullscreenElement : document.body,//全屏时渲染的HTML元素,    
useDefaultRenderLoop : true,//如果需要控制渲染循环，则设为true    
targetFrameRate : undefined,//使用默认render loop时的帧率    
showRenderLoopErrors : false,//如果设为true，将在一个HTML面板中显示错误信息    
automaticallyTrackDataSourceClocks : true,//自动追踪最近添加的数据源的时钟设置    
contextOptions : undefined,//传递给Scene对象的上下文参数（scene.options）    
sceneMode : Cesium.SceneMode.SCENE3D,//初始场景模式    
mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系    
dataSources : new Cesium.DataSourceCollection()    
//需要进行可视化的数据源的集合

2.加载天地图 --标注

this.viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
        url: url.tdtMark,
        layer: "tdtAnnoLayer",
        style: "default",
        format: "tiles",
        tileMatrixSetID: "GoogleMapsCompatible"
    })
)

3.加载天地图 --底图

this.viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
        url: url.tdtBg,
        layer: "tdtImg_c",
        style: "default",
        format: "tiles",
        tileMatrixLabels: ["1",
                            "2",
                            "3",
                            "4",
                            "5",
                            "6",
                            "7",
                            "8",
                            "9",
                            "10",
                            "11",
                            "12",
                            "13",
                            "14",
                            "15",
                            "16",
                            "17",
                            "18",
                            "19"],
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.GeographicTilingScheme(),
        maximumLevel: 50
    })
)

4 加载

http://123.146.225.94:9711/90dem/

 terrainProvider: new Cesium.CesiumTerrainProvider({
    url: url.dem,
    requestVertexNormals: true,
    requestWaterMask: true
})

5 加载 3dtiles数据

let bhlrgTileset = new Cesium.Cesium3DTileset({
    url: url.bhl_rg
})
    
this.viewer.scene.primitives.add(bhlrgTileset)
    
<!--加载完毕模型之后 定位到模型-->
bhlqxTileset.readyPromise
.then(() => {
    this.viewer.camera.viewBoundingSphere(
        bhlqxTileset.boundingSphere,
        new Cesium.HeadingPitchRange(
            0.0,
            -0.5,
            bhlqxTileset.boundingSphere.radius
        )
    )
    this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
})
.otherwise(function(error) {
    throw error
})

7 罗盘

 var options = {}
options.defaultResetView = Cesium.Rectangle.fromDegrees(
    107.38067150115968,
    29.72045494841667,
    107.39715099334718,
    29.71234839017842
)
// Only the compass will show on the map
options.enableCompass = true
options.enableZoomControls = false
options.enableDistanceLegend = false
options.enableCompassOuterRing = true
this.viewer.extend(Cesium.viewerCesiumNavigationMixin, options)

9 划线

 this.viewer.entities.add({
    name: "内圈线",
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            107.385427435,
            29.7150415948,
            107.386278152,
            29.7174868874,
            107.388960935,
            29.7167310117,
            107.388112182,
            29.7142969822,
            107.385427435,
            29.7150415948
        ]),
        width: 3,
        clampToGround: true, //贴地
        material: new Cesium.Color.fromCssColorString("#FF00FF")
    }
})

10 遮罩

10.1 椭圆

this.viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
        url.groundSpot.x,
        url.groundSpot.y
    ),
    name: "表面红色椭圆",
    ellipse: {
        <!--半轴 m-->
        semiMinorAxis: 250000.0,
        semiMajorAxis: 400000.0,
        material: Cesium.Color.RED.withAlpha(0.5)
    }
})

10.2 矩形

var redRectangle = viewer.entities.add({
    name: 'Red translucent rectangle',
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
        	-180.0,
        	-90.0,
        	60.0, 
        	60.0
        ),
        material: Cesium.Color.RED.withAlpha(1)
    }
});
<!--定位到实体-->
viewer.zoomTo(viewer.entities);

11 定位到中国 北京 坐标

 viewer.camera.setView({
  destination: Cartesian3.fromDegrees(116.39, 39.9, 5000000.0)
});

12 渔船

  $(arr).each(function(i, item) {
    var inthtml =
        '<table style="width: 200px;">' +
        '<tr><th scope="col" colspan="4"  style="text-align:center;font-size:15px;">' +
        item.CZMC +
        "</th></tr>" +
        "<tr><td >船速：</td><td >" +
        item.CS +
        "节" +
        "</td></tr>" +
        "<tr><td >船长：</td><td >" +
        item.CC +
        "米" +
        "</td></tr>" +
        "<tr><td >船宽：</td><td >" +
        item.CK +
        "米" +
        "</td></tr>" +
        "<tr><td >船向：</td><td >" +
        item.CC +
        "度" +
        "</td></tr>" +
        "</table>"

    //添加实体
    this.viewer.entities.add({
    // var entitie = dataSource.entities.add({
        name: item.name,
        position: Cesium.Cartesian3.fromDegrees(item.JD, item.WD),
        billboard: {
            image: "../../../../static/images/icon/3d_boat.png",
            scale: 0.5, //原始大小的缩放比例
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //CLAMP_TO_GROUND
            scaleByDistance: new Cesium.NearFarScalar(
                1.5e2,
                1.5,
                8.0e6,
                0.2
            )
        },
        label: {
            text: item.CZMC,
            font: "normal 16px ",
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            fillColor: Cesium.Color.BLACK,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 2,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(50, -13), //偏移量
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                0.0,
                2000000
            )
        },
        data: item,
        popup: {
            html: inthtml,
            anchor: [0, -25]
        }
    })
})

13背景图片 地球贴图

 imageryProvider: new Cesium.SingleTileImageryProvider({
   url: '../img/worldimage.jpg'
}),

14 地球增加经纬度 线

var imageryLayers = viewer.imageryLayers;
var layer = imageryLayers.addImageryProvider(new Cesium.GridImageryProvider());
layer.alpha = Cesium.defaultValue(alpha, 0.5);
layer.show = Cesium.defaultValue(show, true);
layer.name = "Grid";

15 加载谷歌影像

imageryProvider: new Cesium.UrlTemplateImageryProvider({
url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',  
tilingScheme:new Cesium.WebMercatorTilingScheme(),            	
minimumLevel:1,            
maximumLevel:20        
}),

16 加载地形数据

 terrainProvider: new Cesium.CesiumTerrainProvider({
    url: url.dem,
    requestVertexNormals: true,
    requestWaterMask: true
}),

6 鼠标点击事件

    let handler = new Cesium.ScreenSpaceEventHandler(
        this.viewer.scene.canvas
    )

    handler.setInputAction(function(click) {
        console.log("左键单击事件：", click,this.viewer.camera)
        
        //打印出来的 heading pitch  直接用就可以 是弧度数
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

17 设置视角

定位到 实体
viewer.zoomTo(viewer.entities);
定位到 经纬度

this.viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 15000.0),
    orientation: {
        heading: Cesium.Math.toRadians(0), // 左右 - 右方向转动
        pitch: Cesium.Math.toRadians(-40), // 上下
        roll: 0.0 // default value
    }
})

8 flyTo

const obj = {
    y: 29.70977,
    x: 107.38758,
    z: 1230.74,
    heading: 358,
    pitch: -58.58,
    roll: 359.8
}

 this.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
        obj.x,
        obj.y,
        obj.z || 0
    ), //经度、纬度、高度
    orientation: {
        heading: Cesium.Math.toRadians(obj.heading || 0), //绕垂直于地心的轴旋转
        pitch: Cesium.Math.toRadians(
            obj.pitch || -Cesium.Math.PI_OVER_FOUR
        ), //绕纬度线旋转
        roll: Cesium.Math.toRadians(obj.roll || 0) //绕经度线旋转
    },
    duration: time //持续时间
})

cesium 方向
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lwLIAXDa-1577105909697)(http://qq.littlewindy.com/up_img_1576674530000.png)]

小风儿
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cesium基础知识点
qdxlbj的博客
08-01 568
文件要求 1.创建文件夹,把cesium中的Build文件夹下的Cesium文件复制到该文件夹中 2.在文件中引入Cesium/Widgets/widgets.css和Cesium/Cesium.js这两个文件 编写代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
Cesium基础使用介绍
weixin_30535843的博客
12-07 1356
既然给我发了参与方式，不参加似乎有点不给人面子，反正也没多少人看我的博客，那我就试试吧，也欢迎大家自己参与：2017年度全网原创IT博主评选活动投票：http://www.itbang.me/goVote/215 前言 最近折腾了一下三维地球，本文简单为大家介绍一款开源的三维地球软件——Cesium，以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示，这只是数据可视化的一小部分，重要...
Cesium论文Cesium论文Cesium论文
04-05
Cesium论文
cesium添加下雨效果
敲之的博客
04-12 323
cesium添加下雨效果
浅析基于Cesium实现的风场开源库cesium-wind
最新发布
liubangbo的专栏
07-03 673
代码中这一行通过随机生成的经纬度根据双线性插值获取到离这个经纬度坐标点最近的网格点数据，如果找到则把这个粒子移动到下一个经纬度坐标点（经纬度坐标点+uv方向），如果没有找到，说明此粒子经纬度坐标点落在了无效数据的网格点中，此时则把此粒子的生命周期设置为最大，也就是让这个粒子消失再重新生成。粒子位置是随机的，在canvas画布上随机取屏幕坐标点，然后利用Cesium接口转换为经纬度坐标点，具体转换过程在unproject函数中。相当于用鼠标在屏幕上点击，然后获取经纬度坐标点一样。
cesium巡逻获取对象实时信息并实现切换第一人称视角
m0_45305745的博客
03-21 1646
viewer.clock.onTick.addEventListener对clock增加监听事件；完成思路：飞行巡逻时，监听此对象的实时坐标经纬度等数据，由此数据进行视角的优化调整。viewer.clock.shouldAnimate =true 启动时钟开始转动。
Cesium-相机视角锁定（针对模型）
haitunxiaomo的专栏
05-26 7140
Cesium加载模型的方式一般分为两种： 1、加载Entity类型模型。 var entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lon,lat), model: { uri:"../mapdatas/model.glb", color: Cesium.Color.GAINSBORO, colorBlendAmount: 0.4 } })
Cesium参数调优
u010303609的博客
02-15 3362
{ animation: false, //是否开启动画 baseLayerPicker: false, // 底图选择框是否显示 fullscreenButton: false, //是否加载全屏 geocoder: false, //是否启用搜索 homeButton: false, // 主页按钮 requestRenderMode: true, //启用请求渲染模式 useBrowserRecommendedResolution: false, // 是否选择浏览器...
cesium基础介绍第一篇
02-23
cesium基础介绍第一篇
63.（cesium篇）cesium河流流水.zip
12-03
1. **地形数据**：Cesium支持多种地形数据格式，如DEM（数字高程模型），可以用来描绘地形的起伏，为河流提供基础地形。 2. **材质与纹理**：河流的流动感可以通过动态纹理来表现，比如使用流线纹理并随着时间改变...
43.（cesium篇）cesium加载gif图片.zip
09-10
首先，我们需要了解Cesium的基础知识。Cesium基于WebGL，能够实现在浏览器中直接进行三维渲染。它提供了一套完整的API，用于创建地图、添加标记、加载地形、管理时间序列数据等。然而，由于WebGL并不直接支持GIF格式...
54.（cesium篇）cesium叠加动态流线(着色器).zip
11-23
你可以使用`Cesium.Material.fromType`方法创建基础材质，然后用`Cesium.Material.uniformMap`来传递自定义的着色器属性，如时间戳。 5. **创建和添加实体**：使用`Cesium.Entity`来创建可视化的流线，并将其添加到...
58.（cesium篇）cesium叠加动态立体墙(着色器)(上下方向).zip
11-26
它提供了丰富的几何形状和模型加载能力，以及自定义着色器的支持，这些是构建动态立体墙的基础。 1. **Cesium着色器**： 着色器是WebGL编程中的关键部分，它们控制了像素的显示方式。在Cesium中，你可以编写自己的...
cesiumjs开发实践(三) 地图图层介绍
weixin_34240520的博客
07-10 969
2019独角兽企业重金招聘Python工程师标准>>> ...
Cesium中图元Primitive详细介绍及案例
纸飞机的旅行的博客
03-07 3996
Cesium中图元Primitive详细介绍及案例
倾斜摄影模型压平，裁剪，遮罩，水面倒影，大雪覆盖，地下管线，智慧乡村
qq_32037427的博客
05-13 2385
**倾斜摄影模型压平 关于倾斜摄影模型压平，裁剪，遮罩，有需要的私聊联系 1.倾斜摄影模型裁剪 2.倾斜摄影模型遮罩 3.倾斜摄影模型压平
Cesium圆形波纹效果
weixin_43245952的博客
03-11 1039
学习交流群：973849006 扩展实现类CircleWaveMaterialProperty import Cesium from “cesium/Cesium”; export class CircleWaveMaterialProperty { constructor(options) { options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT); this._definitionChanged =
Cesium对实体的操作
总柴的博客
06-04 1383
Cesium对实体的操作 // 创建实体 this.entity = this.viewer.entities.add({ id: id, name: name, position: SampledPosition, // 与此对象关联的可用性（如果有）。如果未定义可用性，则假定此对象的其他属性将在任何提供的时间内返回有效数据。如果可用性存在，则其他属性的对象将仅在给定间隔内查询时提供有效数据。 avaliability: new Cesium.TimeInterva
[cesium] 三维空间分析模块，基础的通视分析，坡度分析，淹没分析，视域分析等
热门推荐
啊嘞嘞的博客
10-22 1万+
/** * 通视分析 */ import Analyser from '../analyser.js'; export default class Visibility extends Analyser{ /** * 初始化 * @param {*} supers * @param {*} opt */ constructor(supers,o...
Cesium1.87+ 建筑物泛光特效实现源码分享
"这篇资源提供了一段Cesium代码，用于实现建筑物轮廓的三维模型泛光特效。源代码适用于Cesium版本1.87及以上，并且提供了详细的实现方式。作者参考了相关博客文章来完成这个效果，并给出了一个示例的3D切片URL，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值