我要
提问
智能客服
首页 / 浏览问题 / 三维GIS / 问题详情
三维坡度分析作用的地形有什么特别的要求
七宿
67EXP 2020年01月20日
核心是

var slope = new Cesium.SlopeSetting();新建坡度设置对象

viewer.scene.globe.SlopeSetting = {
              slopeSetting : slope,
              analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_NONE
          };设置分层设色

结果是

如果我加载了官网给的demo中的珠峰的地形，有效果，换成另一个四川的就没有效果

1个回答

您好，您这边在生成TIN地形的时候需要勾选带法线的选项，再在前端做坡度坡向分析看看呢
华红霞
4,186EXP 2020年01月23日

能出现坡向的箭头，但是我的设置的不同坡度带的颜色变没有，只有一块阴影

var colorTable = new Cesium.ColorTable();

                colorTable.insert(0, new Cesium.Color(255 / 255, 0 / 255, 0 / 255));

                colorTable.insert(20, new Cesium.Color(221 / 255, 224 / 255, 7 / 255));

                colorTable.insert(30, new Cesium.Color(20 / 255, 187 / 255, 18 / 255));

                colorTable.insert(50, new Cesium.Color(0, 161 / 255, 1));

                colorTable.insert(80, new Cesium.Color(9 / 255, 9 / 255, 255 / 255));

                var wide;

                wide = Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION;

                _this.wide = wide;

                slope.ColorTable = colorTable;

七宿
67EXP 2020年02月10日
您将colortable得高度值设置大一点，四川地形高的区域有达到了4000米的高度的
华红霞
4,186EXP 2020年02月10日
你好，我是坡度分析嘛，照着官网设的0~90度
七宿
67EXP 2020年02月10日
您方便的话，将您的这个代码发过来我这边运行看看，精简出有问题的，我这边来调试一下
华红霞
4,186EXP 2020年02月10日 
/**
 *坡度坡向分析
 */
define([
    "require",
    "exports",
    "module",
    "text!./slopeAnalysis.html",
    "art-template",
    'less!./slopeAnalysis.less',
    "CesiumVectorTile"],
    function (require, exports, module, htmlTemp, template, CesiumVectorTile) {
        BaseObject.slopeAnalysis = BaseHelper.Class.create();
        BaseObject.slopeAnalysis.prototype = BaseHelper.Class.inherit(
            BaseObject.Component, {
            initialize: function (globalMap, configData) {
                this.top = 0;
                this.left = 1;
                this.right = 0;
                this.bottom = 0;
                if (globalMap) {
                    configData == null ? {} : configData;
                    this.init(globalMap, configData)
                }
            },
            init: function (globalMap, configData) {
                this.configData = configData;
                this.globalMap = globalMap;
                this.globalMap.addWidget(this);

                this.viewer = globalMap.mapHandler.mapObject;
                this.canvas = this.viewer.canvas;
                this.camera = this.viewer.scene.camera;
            },
            show: function () {
                var self = this;
                if ($(self.element)) {
                    $(self.element).remove();
                }
                this.getHtml();
                this.resize();
                this.bindEvent();
            },
            getHtml: function () {
                this.element = document.createElement("div");
                this.element.id = "component_" + this.getGUID();
                this.element.style.cssText =
                    "position:absolute;width:100%;top:0px;z-index:10000";
                $(this.element).append(htmlTemp);
                //这里将会将元素插入地图面板中布局
                $(this.globalMap.viewerContainer).append($(this.element));
            },
            bindEvent: function () {
                var _this = this;
                //下拉菜单变化时切换分层设色的显示模式
                //窗口关闭
                $(".clearwrapperslope").unbind().on("click", function () {
                    _this.clear();
                });
                $("#maxSlope").bind("input propertychange", function () {
                    let newmaxSlope = $("#maxSlope").val();
                    _this.slope.MaxVisibleValue = newmaxSlope;
                    _this.viewer.scene.globe.SlopeSetting = {
                        slopeSetting: _this.slope,
                        analysisMode: _this.wide
                    };
                })
                $("#minSlope").bind("input propertychange", function () {
                    let newminSlope = $("#minSlope").val();
                    _this.slope.MinVisibleValue = newminSlope;
                    _this.viewer.scene.globe.SlopeSetting = {
                        slopeSetting: _this.slope,
                        analysisMode: _this.wide
                    };
                })
                $("#exepd").unbind().on("click",function(){
                    _this.handlerPolygon.activate();
                })
                $("#clearpd").unbind().on("click", function () {
                    _this.wide = Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_NONE;
                    _this.viewer.scene.globe.SlopeSetting = {
                        slopeSetting: _this.slope,
                        analysisMode: _this.wide
                    };
                })
                _this.slopeAnalysisEvent();
            },
            slopeAnalysisEvent: function () {
                var _this = this;
                var scene = _this.viewer.scene;
                scene.globe.enableLighting = true;
                var slope = new Cesium.SlopeSetting();
                slope.DisplayMode = Cesium.SlopeSettingEnum.DisplayMode.FACE_AND_ARROW;
                slope.MaxVisibleValue = document.getElementById("maxSlope").value;;
                slope.MinVisibleValue = document.getElementById("minSlope").value;
                var colorTable = new Cesium.ColorTable();
                colorTable.insert(0, new Cesium.Color(255 / 255, 0 / 255, 0 / 255));
                colorTable.insert(20, new Cesium.Color(221 / 255, 224 / 255, 7 / 255));
                colorTable.insert(30, new Cesium.Color(20 / 255, 187 / 255, 18 / 255));
                colorTable.insert(50, new Cesium.Color(0, 161 / 255, 1));
                colorTable.insert(80, new Cesium.Color(9 / 255, 9 / 255, 255 / 255));
                var wide;
                wide = Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION;
                _this.wide = wide;
                slope.ColorTable = colorTable;
                slope.Opacity = 0.5;
                var clampMode = 0;
                var handlerPolygon = new Cesium.DrawHandler(_this.viewer, Cesium.DrawMode.Polygon, clampMode);
                handlerPolygon.activeEvt.addEventListener(function (isActive) {
                    if (isActive == true) {
                        _this.viewer.enableCursorStyle = false;
                        _this.viewer._element.style.cursor = '';
                        $('body').removeClass('drawCur').addClass('drawCur');
                    }
                    else {
                        _this.viewer.enableCursorStyle = true;
                        $('body').removeClass('drawCur');
                    }
                });
                handlerPolygon.drawEvt.addEventListener(function (result) {
                    if (!result.object.positions) {
                        // tooltip.showAt(result, '<p>请绘制正确的多边形</p>');
                        handlerPolygon.polygon.show = false;
                        handlerPolygon.polyline.show = false;
                        handlerPolygon.deactivate();
                        handlerPolygon.activate();
                        return;
                    };
                    var array = [].concat(result.object.positions);
                    var positions = [];
                    for (var i = 0, len = array.length; i < len; i++) {
                        var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
                        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                        var h = cartographic.height;
                        if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
                            positions.push(longitude);
                            positions.push(latitude);
                            positions.push(h);
                        }
                    }
                    slope.CoverageArea = positions;
                    _this.viewer.scene.globe.SlopeSetting = {
                        slopeSetting: slope,
                        analysisMode: wide
                    };
                    _this.slope = slope;
                    handlerPolygon.polygon.show = false;
                    handlerPolygon.polyline.show = false;
                    handlerPolygon.deactivate();
                    
                });
                _this.handlerPolygon = handlerPolygon;
                _this.viewer._cesiumWidget._creditContainer.style.display = "none";
            },
            clear: function () {
                var _this = this;
                $(_this.element).remove();
                _this.wide = Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_NONE;
                _this.viewer.scene.globe.SlopeSetting = {
                    slopeSetting: _this.slope,
                    analysisMode: _this.wide
                };
            },
            CLASS_NAME: "BaseObject.slopeAnalysis"
        });
        module.exports = BaseObject.slopeAnalysis;
    });

七宿
67EXP 2020年02月10日 
 function onload(Cesium) {
		var viewer = new Cesium.Viewer('cesiumContainer',{
			terrainProvider : new Cesium.CesiumTerrainProvider({
               url :'http://localhost:8090/iserver/services/3D-test1/rest/realspace/datas/DEM_Sichuan',
                isSct : true,//地形服务源自SuperMap iServer发布时需设置isSct为true
                requestVertexNormals : true
			})
		});

        //添加SuperMap iServer发布的影像服务
        viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            url :'http://localhost:8090/iserver/services/3D-test1/rest/realspace/datas/DEM_Sichuan@DEM_25W1'
        }));

        var scene = viewer.scene;
		scene.globe.enableLighting = true;
        viewer.scene.camera.setView({
            destination : Cesium.Cartesian3.fromDegrees(87.1, 27.8,8000.0),
            orientation : {
                heading : 6.10547067016156,
                pitch : -0.8475077031996778,
                roll :6.2831853016686185
            }
        });
        var slope = new Cesium.SlopeSetting();
        slope.DisplayMode = Cesium.SlopeSettingEnum.DisplayMode.FACE_AND_ARROW;
        slope.MaxVisibleValue = document.getElementById("widemax").value;;
        slope.MinVisibleValue =  document.getElementById("widemin").value;
        var colorTable = new Cesium.ColorTable();
        colorTable.insert(0, new Cesium.Color(255/255, 0/255, 0/255));
        colorTable.insert(20, new Cesium.Color(221/255, 224/255, 7/255));
        colorTable.insert(30, new Cesium.Color(20/255, 187/255, 18/255));
        colorTable.insert(50, new Cesium.Color(0, 161/255, 1));
        colorTable.insert(80, new Cesium.Color(9/255, 9/255, 255/255));
            var wide;
            wide =  Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION;
              slope.ColorTable = colorTable;
              slope.Opacity = 0.5;
         //绘制多边形
        var handlerPolygon = new Cesium.DrawHandler(viewer,Cesium.DrawMode.Polygon,0);
        handlerPolygon.drawEvt.addEventListener(function(result){
            if(!result.object.positions){
                handlerPolygon.polygon.show = false;
                handlerPolygon.polyline.show = false;
                handlerPolygon.deactivate();
                handlerPolygon.activate();
                return;
            };
            var array = [].concat(result.object.positions);
            var positions = [];
            for(var i = 0, len = array.length; i < len; i ++){
                var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
                var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                var h=cartographic.height;
                if(positions.indexOf(longitude)==-1&&positions.indexOf(latitude)==-1){
                    positions.push(longitude);
                    positions.push(latitude);
                    positions.push(h);
                }
            }

            slope.CoverageArea = positions;
            viewer.scene.globe.SlopeSetting = {
                slopeSetting : slope,
                analysisMode : wide
            };
            handlerPolygon.polygon.show = false;
            handlerPolygon.polyline.show = true;
            handlerPolygon.deactivate();
            handlerPolygon.activate();
        });
        handlerPolygon.activate();

        if(!scene.pickPositionSupported){
            alert('不支持深度纹理,无法绘制多边形，根据多边形显示分析区域功能无法使用！');
        }
        $('#toolbar').show();
        $('#btnContainer').show();
        $('#loadingbar').remove();

     }

您看一下用这个代码，从新从官网复制，然后简化之后的代码，这个是没有问题的，并且我是自己生成的地形缓存，勾选法线之后是没有问题的，在在线的代码运行也是OK的，应该是使用的四川的那个缓存在生成的时候没有勾选法线

华红霞
4,186EXP 2020年02月11日
嗯嗯，谢谢，我换了官网的包之后可以了，非常感谢
七宿
67EXP 2020年03月03日

智能推荐

热门文章
查看更多>
关注我们
超图软件官网 SuperMap Online 地图慧 帮助中心 备案信息 技术资源中心
...