cesium试使用

点我打开demo

如何使用cesium.js

​ cdn引入cesium.js和关键的css即widgets.css即可在web应用，html界面中加载3D地球(注：加载3d地球的地图文件必须使用网络服务器，如tomcat)

操作说明

​ 鼠标左键按住拖动，转动地球；鼠标滚轮向上/下滚动，放大/缩小地图；鼠标滚轮按住拖动，移动视角；鼠标右键按住拖动，功能与滚轮上下滚动一致。

• demo中飞机模型所在坐标：126.55722414013186, 43.820355333246575, 1966
• demo中汽车模型所在坐标：126.55312229268337, 43.81944052155257, 0.0

​ 示意图如下：

目录结构

项目文件来自cesium的官方demo项目,仅对index.html做了改动

在webapp引入地图文件

​ cesium.js的地图文件支持TMS格式的瓦片数据，下载后以下图格式导入即可：

然后在html中写入以下代码：

       var tms = new Cesium.TileMapServiceImageryProvider({
           //地图文件所在目录
            url: '../data/virtual_data/world_sat_tms_3857',
           //地图文件中瓦片图片所在格式
            fileExtension: 'jpg',
           //地图瓦片层级
            maximumLevel: 17
        });
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: tms
        });

导入3d模型

3d模型支持glb和gltf格式，当前创建变量实例来引入两个3d模型，若要引入多个模型(如超过50个)，参考cesium的官方文档。

引入少数模型的方法核心代码如下：

        var scene = viewer.scene;
        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
            //设定模型所在坐标位置(精度，维度，高程)
            Cesium.Cartesian3.fromDegrees(126.55312229268337, 43.81944052155257, 0.0));
        var model = scene.primitives.add(Cesium.Model.fromGltf({
            //添加3d模型所在路径
            url: './Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
            modelMatrix: modelMatrix,
            //模型在地图中的大小与本身原大小之比
            scale: 1
        }));

        var modelMatrix2 = Cesium.Transforms.eastNorthUpToFixedFrame(
            Cesium.Cartesian3.fromDegrees(126.55722414013186, 43.820355333246575, 1966));
        var model2 = scene.primitives.add(Cesium.Model.fromGltf({
            url: './Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            modelMatrix: modelMatrix2,
            scale: 100
        }));

返回所在坐标

当前利用绑定鼠标移动事件控制台输出鼠标所在坐标位置，核心代码如下

//显示设置
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (movement) {
                var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
                var ellipsoid = scene.globe.ellipsoid;
                if (cartesian) { //能获取，显示坐标
                    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
                    var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude) + ', ' + '纬度' + Cesium.Math.toDegrees(cartographic.latitude) + 
                    '' + '高度' + Math.ceil(viewer.camera.positionCartographic.height); 
                    //  document.getElementByIdx_x_x('coords').innerHTML = coords; //document.getElementByIdx_x_x('coords').style.display = ''; 
                    console.log(coords);
                } else { //不能获取不显示
                    // document.getElementByIdx_x_x('coords').style.display = 'none';
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);