360SDN.COM

首页/GIS/列表

Cesium 概述 (一)

来源:  2018-08-06 17:26:22    评论:0点击:

Cesium是一个基于JavaScript的开源框架,可用于在浏览器中绘制3D的地球,并在其上绘制地图(支持多种格式的瓦片服务),该框架不需要任何插件支持,但是浏览器必须支持WebGL。 Cesium支持多种数据可视化方式,可以绘制各种几何图形、导入图片,甚至3D模型。同时,Cesium还支持基于时间轴的动态数据展示,例如,我们可以用它绘制卫星运行轨迹。 Cesium HelloWorld
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium Example</title>
<script src="Cesium-1.7.1/Build/CesiumUnminified/Cesium.js"></script>
<link rel="stylesheet" type="text/css" href="Cesium-1.7.1/Build/CesiumUnminified/Widgets/widgets.css"></link>
<style>
html,body,#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
var viewer = new Cesium.Viewer( 'cesiumContainer', {
    animation : false,//是否创建动画小器件,左下角仪表
    baseLayerPicker : false,//是否显示图层选择器
    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.EllipsoidTerrainProvider(),//地形图层提供者,仅baseLayerPicker设为false有意义
    skyBox : new Cesium.SkyBox({
        sources : {
          positiveX : 'Cesium-1.7.1/Skybox/px.jpg',
          negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',
          positiveY : 'Cesium-1.7.1/Skybox/py.jpg',
          negativeY : 'Cesium-1.7.1/Skybox/my.jpg',
          positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',
          negativeZ : 'Cesium-1.7.1/Skybox/mz.jpg'
        }
    }),//用于渲染星空的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()
    //需要进行可视化的数据源的集合
} );
var scene = viewer.scene;
var canvas = viewer.canvas;
var clock = viewer.clock;
var camera = viewer.scene.camera;
var entities = viewer.entities;
可以加快时间的运行,并且模拟日光照射效果:
//加快时钟的运行
clock.multiplier = 0.1 * 60 * 60;
//阳光照射区域高亮
scene.globe.enableLighting = true;
通过以下代码,可以设置镜头位置与指向,Cesium的Camera对象提供了多种操控镜头的方法:
index.js
//设置镜头位置与方向
camera.setView( {
    //镜头的经纬度、高度。镜头默认情况下,在指定经纬高度俯视(pitch=-90)地球
    position : Cesium.Cartesian3.fromDegrees( 116.3, 39.9, 100000000 ),//北京100000公里上空
    //下面的几个方向正好反映默认值
    heading : Cesium.Math.toRadians( 0 ),
    pitch : Cesium.Math.toRadians( -90 ),
    roll : Cesium.Math.toRadians( 0 )
} );
//让镜头飞行(动画)到某个地点和方向
setTimeout( function()
{
    camera.flyTo( {
        destination : Cesium.Cartesian3.fromDegrees( 116, 15, 6000000 ),
        orientation : {
            heading : Cesium.Math.toRadians( -15 ),
            pitch : Cesium.Math.toRadians( -65 ),
            roll : Cesium.Math.toRadians( 0 )
        },
        duration : 3,//动画持续时间
        complete : function()//飞行完毕后执行的动作
        {
            addEntities();
        }
    } );
}, 1000 );
 
//监听键盘事件,用于平移或者旋转镜头
var ellipsoid = scene.globe.ellipsoid;
canvas.onclick = function()
{
    canvas.focus();
};
var flags = {
    looking : false,
    rotateLeft : false,
    rotateRight : false,
    moveUp : false,
    moveDown : false,
    moveLeft : false,
    moveRight : false
};
var handler = new Cesium.ScreenSpaceEventHandler( canvas );
function getFlagForKeyCode( keyCode )
{
    switch ( keyCode )
    {
        case 'W'.charCodeAt( 0 ) : //向下平移镜头
            return 'moveDown';
        case 'S'.charCodeAt( 0 ) : //向上平移镜头
            return 'moveUp';
        case 'A'.charCodeAt( 0 ) : //向右平移镜头
            return 'moveRight';
        case 'D'.charCodeAt( 0 ) : //向左平移镜头
            return 'moveLeft';
        case 'Q'.charCodeAt( 0 ) : //向右旋转镜头
            return 'rotateRight';
        case 'E'.charCodeAt( 0 ) : //向左旋转镜头
            return 'rotateLeft';
        default :
            return undefined;
    }
}
document.addEventListener( 'keydown', function( e )
{
    var flagName = getFlagForKeyCode( e.keyCode );
    if ( typeof flagName !== 'undefined' )
    {
        flags[flagName] = true;
    }
}, false );
document.addEventListener( 'keyup', function( e )
{
    var flagName = getFlagForKeyCode( e.keyCode );
    if ( typeof flagName !== 'undefined' )
    {
        flags[flagName] = false;
    }
}, false );
viewer.clock.onTick.addEventListener( function( clock )
{
    var cameraHeight = ellipsoid.cartesianToCartographic( camera.position ).height;
    var moveRate = cameraHeight / 100.0;
 
    if ( flags.rotateLeft )
    {
        camera.rotateLeft( 0.01 );
    }
    if ( flags.rotateRight )
    {
        camera.rotateRight( 0.01 );
    }
    if ( flags.moveUp )
    {
        camera.moveUp( moveRate );
    }
    if ( flags.moveDown )
    {
        camera.moveDown( moveRate );
    }
    if ( flags.moveLeft )
    {
        camera.moveLeft( moveRate );
    }
    if ( flags.moveRight )
    {
        camera.moveRight( moveRate );
    }
} );
可以添加若干实体,实体可以用于组织多个可视化对象,下面的例子模拟了卫星波束的覆盖范围: index.js

/**
 * 根据偏移量计算目标点经纬度
 * @param {} start  起始点经纬度数组,单位度
 * @param {} offset 东北方向的偏移量,单位米
 * @param {} 目标点经纬度数组,单位度
 */
function offsetToLongLat( start, offset )
{
    var er = 6378137;
    var lat = parseFloat( start[1] );
    var lon = parseFloat( start[0] );
    var dn = parseFloat( offset[1] );
    var de = parseFloat( offset[0] );
 
    dLat = dn / er;
    var pi = Math.PI;
    var dLon = de / ( er * Math.cos( pi * lat / 180 ) )
    return [
        lon + dLon * 180 / pi, lat + dLat * 180 / pi
    ];
}
/**
 * 通过绘制三角形模拟卫星光束效果
 * @param {} entities 实体集
 * @param {} stltPos 卫星三维坐标数组
 * @param {} points 地面点
 * @param {} color CSS颜色代码,例如#FF0000
 */
function lightShinePolygon( entities, stltPos, points, color )
{
    for ( var i = 0; i < points.length; i += 2 )
    {
        var array = [
            stltPos[0], stltPos[1], stltPos[2], points[i], points[i + 1], 0
        ];
        if ( i + 2 == points.length )
        {
            array.push( points[0] );
            array.push( points[1] );
        }
        else
        {
            array.push( points[i + 2] );
            array.push( points[i + 3] );
        }
        array.push( 0 );
        entities.add( {
            polygon : {
                hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights( array ),
                perPositionHeight : true,
                outline : false,
                material : Cesium.Color.fromAlpha( Cesium.Color.fromCssColorString( color ), .1 )
            }
        } );
    }
}
/**
 * 添加实体
 */
function addEntities()
{
    //卫星一
    {
        var stltPos = [
            110.0, 40.0, 2500000
        ];
        entities.add( {
            position : Cesium.Cartesian3.fromDegrees.apply( this, stltPos ),
            billboard : {
                image : 'images/satellite-1.png',
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM, //垂直方向位置计算基准设为底部,默认中心
                width : 92,
                height : 36
            }
        } );
        //一个多边形覆盖范围
        {
            var color = '#FF0000';
            //模拟光照效果的若干多边形
            var points = [
                100, 48, 110, 40, 115, 40, 120, 43, 120, 55
            ];
            lightShinePolygon( entities, stltPos, points, color );
            //地面多边形
            entities.add( {
                polygon : {
                    hierarchy : Cesium.Cartesian3.fromDegreesArray( points ),
                    outline : true,
                    outlineColor : Cesium.Color.fromAlpha( Cesium.Color.fromCssColorString( color ), .4 ),
                    material : Cesium.Color.fromAlpha( Cesium.Color.fromCssColorString( color ), .3 )
                }
            } );
        }
 
        //一个圆形覆盖范围
        {
            var r = 600000;//半径
            var color = '#0000FF';
            //圆心
            var ecLong = 110.0;
            var ecLat = 30.0;
            var ec = Cesium.Cartesian3.fromDegrees( ecLong, ecLat, 0 );
            //模拟光照效果的若干多边形
            var points = [];
            for ( var i = 0; i < 360; i += 30 )
            {
                var coord = offsetToLongLat( [
                    ecLong, ecLat
                ], [
                    Math.cos( Math.PI * i / 180 ) * r, Math.sin( Math.PI * i / 180 ) * r
                ] );
                points.push( coord[0] );
                points.push( coord[1] );
            }
            lightShinePolygon( entities, stltPos, points, color );
            //圆
            viewer.entities.add( {
                position : ec,
                ellipse : {
                    semiMinorAxis : r,
                    semiMajorAxis : r,
                    height : 0.0,
                    outline : true,
                    outlineColor : Cesium.Color.fromAlpha( Cesium.Color.fromCssColorString( color ), .4 ),
                    material : Cesium.Color.fromAlpha( Cesium.Color.fromCssColorString( color ), .3 )
                }
            } );
        }
    }
}


来源: https://blog.csdn.net/happyduoduo1/article/details/51865758
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权