标签：鼠标 scene var Cesium coords 使用 cesium

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);

标签：鼠标,scene,var,Cesium,coords,使用,cesium
来源： https://www.cnblogs.com/yibener18/p/15818466.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。