• cesiumjs


    demos

    基本步骤

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    var viewer = new Cesium.Viewer('cesiumContainer', {
    sceneMode : Cesium.SceneMode.SCENE3D,
    baseLayerPicker:false,
    selectionIndicator:false,
    navigationHelpButton:false,
    homeButton:false,
    geocoder:false,
    vrButton:true,
    timeline : false,
    animation : false
    });

    viewer.scene.imageryLayers.removeAll(); //移除所有底图
    viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 设置图片背景颜色为黑色

    // Create an initial camera view
    var initialPosition = new Cesium.Cartesian3.fromDegrees(116.30,
    40.0368234863305,
    1631.082799425431);
    var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
    var homeCameraView = {
    destination : initialPosition,
    orientation : {
    heading : initialOrientation.heading,
    pitch : initialOrientation.pitch,
    roll : initialOrientation.roll
    }
    };
    // Set the initial view
    viewer.scene.camera.setView(homeCameraView);

    //添加geojson文件
    var dataSource1 = new Cesium.GeoJsonDataSource();
    viewer.dataSources.add(dataSource1);
    dataSource1.load('../map_static_files/hdmap_wgs84_road_keypoint.geojson').then(function() {
    var entities = dataSource1.entities.values; //获取所有图形元素的值

    for (var i = 0; i < entities.length; i++) {
    var entity = entities[i];
    setStyle(entity);

    }
    });

    api文档

    http://cesium.marsgis.cn/forcesium/Build/Documentation/

    获取鼠标点击的经纬度值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var viewer = new Cesium.Viewer('cesiumContainer');
    viewer.canvas.addEventListener('click', function(e){
    var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);
    if (cartesian) {
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
    alert(longitudeString + ', ' + latitudeString);
    } else {
    alert('Globe was not picked');
    }

    }, false);

    获取视界内经纬值

    具体见帖子

    无地平线的情况

    1
    2
    var posUL = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, 0), Cesium.Ellipsoid.WGS84); 
    var posLR = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.width, viewer.canvas.height), Cesium.Ellipsoid.WGS84);

    视线内有地平线的情况

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    var viewer = new Cesium.Viewer('cesiumContainer');
    var CC3=Cesium.Cartesian3;
    var camera = viewer.scene.camera;
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var rad = 6371000; //Earth average radius
    var entityN = viewer.entities.add({
    label : {
    show : false
    }
    });
    var entityW = viewer.entities.add({
    label : {
    show : false
    }
    });
    var entityS = viewer.entities.add({
    label : {
    show : false
    }
    });
    var entityE = viewer.entities.add({
    label : {
    show : false
    }
    });
    Sandcastle.addToolbarButton('horizon points', function() {

    //h 大专栏  cesiumjsorizon basics
    var dist=CC3.magnitude(camera.position);
    var angle=Math.asin(rad/dist);
    var toSurf=Math.sqrt(Math.pow(dist,2)-Math.pow(rad,2));

    //'horizon arm'
    var rotatee = camera.position.clone();
    rotatee = CC3.negate(rotatee,new CC3());
    CC3.normalize(rotatee,rotatee);
    var rotater = new CC3(0,0,1);
    CC3.cross(rotatee,rotater,rotater);
    var rotated = new CC3();var cartesian = new CC3();
    rotated = rotate(rotatee,rotater,angle);
    cartesian = scaleVector(toSurf,rotated);
    CC3.add(cartesian,camera.position,cartesian);

    //north
    dropOne(entityN,cartesian);

    //east
    cartesian = rotate(cartesian,rotatee,Math.PI/2); //rotatee now rotater
    dropOne(entityE,cartesian);

    //south
    cartesian = rotate(cartesian,rotatee,Math.PI/2); //rotatee now rotater
    dropOne(entityS,cartesian);

    //west
    cartesian = rotate(cartesian,rotatee,Math.PI/2); //rotatee now rotater
    dropOne(entityW,cartesian);
    });
    function dropOne(entity,cartesian)
    {
    if (cartesian) {
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

    entity.position = cartesian;
    entity.label.show = true;
    entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
    } else {
    entity.label.show = false;
    }
    }
    function rotate(rotatee,rotater,angle)
    {
    //rotater: unit vector, angle:radians
    //CCW looking from vector tip to vector base
    var CC3=Cesium.Cartesian3;var rotated=new CC3();
    var c = Math.cos(angle);var s = Math.sin(angle);
    var dotScale = CC3.dot(rotatee,rotater,new CC3());
    var rotaterScaled = scaleVector(dotScale,rotater);
    var vPerpAxis = CC3.subtract(rotatee,rotaterScaled,new CC3()); //using Pythagoras theorem
    var comp1 = scaleVector(c,vPerpAxis);
    var vPerpPerpAxis = CC3.cross(rotater,vPerpAxis,new CC3()); //perp to both of these
    var comp2 = scaleVector(s,vPerpPerpAxis);
    return addVectors([rotaterScaled,comp1,comp2]);
    }
    function scaleVector(scale,vector)
    {
    var temp = new Cesium.Cartesian3();
    temp.x=scale*vector.x;temp.y=scale*vector.y;temp.z=scale*vector.z;
    return temp;
    }
    function addVectors(vectors)
    {
    var resultant=new Cesium.Cartesian3(0,0,0);
    var i=0;while(i<vectors.length)
    {
    resultant.x+=vectors[i].x;
    resultant.y+=vectors[i].y;
    resultant.z+=vectors[i].z;
    i+=1;
    }
    return resultant;
    }

    获取当前地图中心点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    getPosition(){
    if (viewer.scene.mode == 3) {
    var windowPosition = new Cesium.Cartesian2(viewer.container.clientWidth / 2, viewer.container.clientHeight / 2);
    var pickRay = viewer.scene.camera.getPickRay(windowPosition);
    var pickPosition = viewer.scene.globe.pick(pickRay, viewer.scene);
    var pickPositionCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
    console.log(pickPositionCartographic.longitude * (180 / Math.PI));
    console.log(pickPositionCartographic.latitude * (180 / Math.PI));
    } else if (viewer.scene.mode == 2) {
    var camPos = viewer.camera.positionCartographic;
    console.log(camPos.longitude * (180 / Math.PI));
    console.log(camPos.latitude * (180 / Math.PI));
    }
    };

    显示/隐藏entities

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    var entities = viewer.entities;
    //Create Entity "folders" to allow us to turn on/off entities as a group.
    var spheres = entities.add(new Cesium.Entity());
    var boxes = entities.add(new Cesium.Entity());
    var ellipsoids = entities.add(new Cesium.Entity());
    //Create the entities and assign each entity's parent to the group to which it belongs.
    for (var i = 0; i < 5; ++i) {
    var height = 100000.0 + (200000.0 * i);
    entities.add({
    parent : boxes,
    position : Cesium.Cartesian3.fromDegrees(-106.0, 45.0, height),
    box : {
    dimensions : new Cesium.Cartesian3(90000.0, 90000.0, 90000.0),
    material : Cesium.Color.fromRandom({alpha : 1.0})
    }
    });
    entities.add({
    parent : ellipsoids,
    position : Cesium.Cartesian3.fromDegrees(-102.0, 45.0, height),
    ellipsoid : {
    radii : new Cesium.Cartesian3(45000.0, 45000.0, 90000.0),
    material : Cesium.Color.fromRandom({alpha : 1.0})
    }
    });
    entities.add({
    parent : spheres,
    position : Cesium.Cartesian3.fromDegrees(-98.0, 45.0, height),
    ellipsoid : {
    radii : new Cesium.Cartesian3(67500.0, 67500.0, 67500.0),
    material : Cesium.Color.fromRandom({alpha : 1.0})
    }
    });
    }
    spheres.show = true; //显示
    spheres.show = false; //隐藏

    info

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //设置自己的info box
    var a= 5;
    var b =6;
    var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
    '<tr><th>' + "Longitude" + '</th><td>' + a + '</td></tr>' +
    '<tr><th>' + "Latitude" + '</th><td>' + b + '</td></tr>' +
    '</tbody></table>';
    entity.description = description;

    // 关闭沙箱安全权限
    var iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
    iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
  • 相关阅读:
    【Java8】 @FunctionalInterface 函数式接口
    集合使用copy与mutableCopy的区别
    GCD中的dispatch_sync、dispatch_sync 分别与串行、并行队列组合执行小实验
    podspec文件介绍
    iOS系统app崩溃日志手动符号化
    webView文本长按显示英文
    深拷贝
    view向全屏延伸时的属性设置
    iOS 模拟器截屏快捷键
    mysql 优化常用语句
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12366487.html
Copyright © 2020-2023  润新知