首页 / 浏览问题 / 三维GIS / 问题详情
关于使用可视域分析和量算中出现的问题
11EXP 2017年04月19日

 用倾斜摄影测量的服务地址替换demo中给的地址 发现无法使用会报错

/**
 * Created by ZHUXIANGJIAN on 2017/2/14.
 */
//格式化快捷键 ctrl+alt+l
var my3DGis;
window.onload = function (Cesium) {
    my3DGis = new My3DGisHelper();
    my3DGis.init(Cesium);
    my3DGis.initEvent(Cesium);

}

var My3DGisHelper = function () {
    var _self = this;
    var host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
    var viewer;
    var scene;
    //初始化页面
    _self.init = function (Cesium) {
        viewer = new Cesium.Viewer('cesiumContainer', {
            vrButton: true,
            navigationHelpButton: true,
            geocoder: true,
            imageryProvider: new Cesium.TiandituImageryProvider()
        });
        addImageryByTianDiMap(Cesium, viewer);
        scene = viewer.scene;
        scene.viewFlag = true;
        $("div").show();
        var infoboxContainer = document.getElementById("bubble");
        viewer.customInfobox = infoboxContainer;
        var canvas = scene.canvas;
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        var widget = viewer.cesiumWidget;
        try {
            var url = "http://localhost:8090/iserver/services/3D-osgb/rest/realspace/datas/jinjiang/config";
            var promise = scene.addS3MTilesLayerByScp(url, {
                name: 'jinjiang'
            });
            Cesium.when(promise, function (layer) {
                layer.setQueryParameter({
                    url: 'http://localhost:8090/iserver/services/data-osgb/rest/data',
                    dataSourceName: 'vector',
                    dataSetName: 'test',
                    keyWorld: 'SmID'
                });
                scene.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(118.548, 24.803, 300)
                });
            }, function (e) {
                if (widget._showRenderLoopErrors) {
                    var title = 'An error occurred while rendering.  Rendering has stopped.';
                    widget.showErrorPanel(title, undefined, e);
                }
            });
        }
        catch (e) {
            if (widget._showRenderLoopErrors) {
                var title = 'An error occurred while rendering.  Rendering has stopped.';
                widget.showErrorPanel(title, undefined, e);
            }
        }
    }

    //初始化页面元素事件绑定
    _self.initEvent = function (Cesium) {
        getQueryResult();
        addMeasureFun(Cesium,viewer);
        getViewshedResult(Cesium,viewer,scene);
    }

    //添加天地图图层
    var addImageryByTianDiMap = function (Cesium, viewer) {
        var imageryLayers = viewer.imageryLayers;
        var labelImagery = new Cesium.TiandituImageryProvider({
            mapStyle: Cesium.TiandituMapsStyle.CIA_C
        });
        imageryLayers.addImageryProvider(labelImagery);
    }

    //获取建筑相关信息并绑定单机事件
    var getQueryResult = function () {
        var title = document.getElementById("title");
        var des = document.getElementById("des");
        var myimg = document.getElementById("myimg");
        viewer.pickEvent.addEventListener(function (feature) {
            var title = Cesium.defaultValue(feature.NAME, '');
            var description = Cesium.defaultValue(feature.DES, '');
            title.innerText = title;
            des.innerText = description;
            myimg.src = "./images/" + title + ".jpg";
        });

    }

    //添加量算功能
    var addMeasureFun= function (Cesium,viewer) {
        var handler;
        Sandcastle.addToolbarButton('量算', function() {
            if(handler){
                handler.deactivate();
                handler.activate();
            }
        });
        viewer.scene.globe.depthTestAgainstTerrain = true;
        handler = new Cesium.MeasureHandler(viewer,3);
        handler.measureEvt.addEventListener(function(result){
            handler.disLabel.text = '空间距离:' + result.distance + '米';
            handler.vLabel.text = '垂直高度:' + result.verticalHeight  + '米';
            handler.hLabel.text = '水平距离:' + result.horizontalDistance  + '米';
        });
    }

    //获取可视域分析结果
    var getViewshedResult = function (Cesium,viewer,scene) {
        var pointHandler = new Cesium.PointHandler(viewer);
        //创建可视域分析对象
        var viewshed3D = new Cesium.ViewShed3D(scene);
        //创建屏幕点击对象
        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

        var viewPosition;

        //鼠标移动时间回调
        handler.setInputAction(function(e){
            //若此标记为false,则激活对可视域分析对象的操作
            if (!scene.viewFlag) {
                //获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
                var position = e.endPosition;
                var last = scene.pickPosition(position);

                //计算该点与视口位置点坐标的距离
                var distance = Cesium.Cartesian3.distance(viewPosition, last);

                if(distance > 0 ){
                    //将鼠标当前点坐标转化成经纬度
                    var cartographic = Cesium.Cartographic.fromCartesian(last);
                    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                    var height = cartographic.height;

                    //通过该点设置可视域分析对象的距离及方向
                    viewshed3D.setDistDirByPoint([longitude, latitude, height]);
                }
            }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        handler.setInputAction(function(e){
            //鼠标双击事件回调,不再执行鼠标移动事件中对可视域的操作
            scene.viewFlag = true;

        },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

        document.getElementById("chooseView").onclick = function() {
            if(pointHandler.active) {
                return;
            }
            //先清除之前的可视域分析
            viewer.entities.removeAll();
            viewshed3D.distance = 0.1;
            scene.viewFlag = true;

            //激活绘制点类
            pointHandler.activate();
        }

        pointHandler.drawCompletedEvent.addEventListener(function(point){
            var position = point.position._value;
            viewPosition = position;

            //将获取的点的位置转化成经纬度
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height;

            if(scene.viewFlag) {
                //设置视口位置
                viewshed3D.viewPosition = [longitude, latitude, height];
                viewshed3D.build();
                //将标记置为false以激活鼠标移动回调里面的设置可视域操作
                scene.viewFlag = false;
            }
        });
    }

}








1个回答

您好,正在测试,完了告诉您。
3,389EXP 2017年04月20日

测了哈,都没问题。

量算建议您参考measureHandler.html这个范例。

你的代码可以给我参考一下吗
<!DOCTYPE html>
<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>可视域分析</title>
    <link href="./css/widgets.css" rel="stylesheet">
    <link href="./css/examples.css" rel="stylesheet">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/flat-ui.css" rel="stylesheet">
	<script src="./js/config.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/flat-ui.min.js"></script>
	<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
    <script src="./js/config.js"></script>

    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>

<div style="position : absolute; left : 5%; top : 2%; display : none;" >
    <span type="button" id="chooseView" class="btn  btn-inverse">分析</span>
</div>

<script type="text/javascript">
    function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer');

        var scene = viewer.scene;
        var viewPosition;

        $("div").show();

        //先将此标记置为true,不激活鼠标移动事件中对可视域分析对象的操作
        scene.viewFlag = true;
        var pointHandler = new Cesium.PointHandler(viewer);

        //创建可视域分析对象
        var viewshed3D = new Cesium.ViewShed3D(scene);

        var widget = viewer.cesiumWidget;
        try{
            //场景添加S3M图层服务
            var promise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_JINJIANG,{
                name : 'jinjiang'
            });
            Cesium.when(promise,function(layer){
                //设置相机位置,定位至模型
                scene.camera.setView({
                    //将经度、纬度、高度的坐标转换为笛卡尔坐标
                    destination : Cesium.Cartesian3.fromDegrees(118.548,24.803,600),
                });
            },function(e){
                if (widget._showRenderLoopErrors) {
                    var title = '渲染时发生错误,已停止渲染。';
                    widget.showErrorPanel(title, undefined, e);
                }
            });
        }
        catch(e){
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误,已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }
//      try{
//          //添加S3M图层
//          var ground1Promise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1,{name : 'ground1'});
//          var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD,{name : 'build'});
//          var promiseSet = [ground1Promise,buildPromise];
//          Cesium.when.all(promiseSet,function(layer){
//              scene.camera.setView({//图层加载完成,设置相机位置
//                  destination : new Cesium.Cartesian3(-2183707.123076614,4388401.383681743,4068853.9320412213),
//                  orientation : {
//                      heading : 6.159837784028847,
//                      pitch : -0.47063592436868085,
//                      roll : 6.282728579633407
//                  }
//              });
//
//              //构建可视域分析对象
//
//          },function(e){
//              if (widget._showRenderLoopErrors) {
//                  var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
//                  widget.showErrorPanel(title, undefined, e);
//              }
//          });
//      }
//      catch(e){
//          if (widget._showRenderLoopErrors) {
//              var title = '渲染时发生错误,已停止渲染。';
//              widget.showErrorPanel(title, undefined, e);
//          }
//      }

        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

        //鼠标移动时间回调
        handler.setInputAction(function(e){
            //若此标记为false,则激活对可视域分析对象的操作
            if (!scene.viewFlag) {
                //获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
                var position = e.endPosition;
                var last = scene.pickPosition(position);

                //计算该点与视口位置点坐标的距离
                var distance = Cesium.Cartesian3.distance(viewPosition, last);

                if(distance > 0 ){
                    //将鼠标当前点坐标转化成经纬度
                    var cartographic = Cesium.Cartographic.fromCartesian(last);
                    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                    var height = cartographic.height;

                    //通过该点设置可视域分析对象的距离及方向
                    viewshed3D.setDistDirByPoint([longitude, latitude, height]);
                }
            }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        handler.setInputAction(function(e){
            //鼠标双击事件回调,不再执行鼠标移动事件中对可视域的操作
            scene.viewFlag = true;

        },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

        document.getElementById("chooseView").onclick = function() {
            if(pointHandler.active) {
                return;
            }
            //先清除之前的可视域分析
            viewer.entities.removeAll();
            viewshed3D.distance = 0.1;
            scene.viewFlag = true;

            //激活绘制点类
            pointHandler.activate();
        }

        pointHandler.drawCompletedEvent.addEventListener(function(point){
            var position = point.position._value;
            viewPosition = position;

            //将获取的点的位置转化成经纬度
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height;

            if(scene.viewFlag) {
                //设置视口位置
                viewshed3D.viewPosition = [longitude, latitude, height];
                viewshed3D.build();
                //将标记置为false以激活鼠标移动回调里面的设置可视域操作
                scene.viewFlag = false;
            }
        });
    }
    </script>
</body>
</html>

您好,用的代码多次还是无法成功,请问可以加一下我的qq吗? 1622985208
你的webgl是201704版的 官网上最新的是这一版吗
...