首页 / 浏览问题 / 三维GIS / 问题详情
webgl弹框位置怎么设置
216EXP 2019年04月03日

webgl的弹框位置总是出现在右下角:

// clickinitial(thisMapCon, viewer, tempp) {
        var Cesium = window.Cesium;
        // var _this = thisMapCon;
        var _this = nextProps.That;
        var viewer = window.CesiumViewer;
        let tempp = [];
        tempp = nextProps.Tempp;
        //todo: yjw添加数据服务
        var scene = viewer.scene;
        var widget = viewer.cesiumWidget;
        var promise = tempp[URL_CONFIG.qxsyName];

        var scenePosition = null; // 记录在场景中点击的笛卡尔坐标点
        // var mybubble = document.getElementById("bubble");
        // var mybubble = $("#bubble");
        var mybubble = $("#bubble");
        var table = document.getElementById("FeatureTable"); // 气泡内的表格


        $("#close").click(function(){ // 关闭气泡
            $("#bubble").hide();
        });

        try {
            Cesium.when(promise, function (layers) {
                if (!scene.pickPositionSupported) {
                    alert('不支持深度拾取,属性查询功能无法使用!');
                }
                // var testLayer = viewer.scene.layers;
                for (var i = 0; i < layers.length; i++) {
                    var strLayer = scene.layers.findByIndex(i).name;
                    var layer = scene.layers.find(strLayer);
                    // layer.selectEnabled=false;
                    var str_before = strLayer.split("@")[0];
                    //设置属性查询参数
                    layer.setQueryParameter({
                        url: URL_CONFIG.dataSerUrl,
                        dataSourceName: URL_CONFIG.dataSourceName,
                        dataSetName: str_before,
                        keyWord: 'SmID'
                    });
                }

            }, function (e) {
                if (widget._showRenderLoopErrors) {
                    var title = '渲染时发生错误,已停止渲染。';
                    widget.showErrorPanel(title, undefined, e);
                }
            });
        } catch (e) {
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误,已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }
        //设置监听事件
        var url = URL_CONFIG.queryApiUrl + '/cjpl/getCjPlById?';
        viewer.pickEvent.addEventListener(
            function (feature) {
                var entity = viewer.selectedEntity;

                if (feature.PLPTNO !== undefined) {
                    axios.get(url + 'plptno=' + feature.PLPTNO + '&mntpcd=' + feature.MNTPCD)
                        .then(function (response) {
                            let res = response.data.data;
                            showBubble(res, entity);
                        })
                        .catch(function (error) {
                            alert(error + url + "服务未启动!");
                        })
                        .then(function () {
                            // always executed
                        });
                } else {
                    axios.get(url + 'plid=' + feature.PLID + '&mntpcd=' + feature.MNTPCD)
                        .then(function (response) {
                            let res = response.data.data;
                            showBubble(res, entity);
                        })
                        .catch(function (error) {
                            alert(error + url + "服务未启动!");
                        })
                        .then(function () {
                            // always executed
                        });
                }
                // _this.viewer.scene.layers.getSelectedLayer().refresh();
            }
        );

        function showBubble(pfeature, entity) {
            if (table != null) {
                // var x=parseFloat(pfeature["X坐标"]);
                // var y=parseFloat(pfeature["Y坐标"]);
                // var z=parseFloat(pfeature["地面高程"]);
                // //飞行到指定的点
                // let tempurl = URL_CONFIG.projectToGeo + 'arg0=' + x + '&arg1=' + y + '&arg2=' + URL_CONFIG.epsgCode;
                // axios.get(tempurl).then(function (response2) {
                //     let res = response2.data;
                //     var ellipsoid=viewer.scene.globe.ellipsoid;
                //     var cartographic=Cesium.Cartographic.fromDegrees(res[0],res[1],z);
                //     var cartesian3=ellipsoid.cartographicToCartesian(cartographic);
                //
                //     _this.setscenePosition(cartesian3);
                //
                // }).catch(function (error) {
                //     alert(tempurl + "服务未启动!");
                // })

                // var position = Cesium.Cartesian3.fromDegrees(entity.scenePos.x, entity.scenePos.y, entity.scenePos.z);
                // var position = Cesium.Cartesian3.fromDegrees(x, y, z);

                // var mybubble = $("#bubble");
                // mybubble.show();

                mybubble.show();

                _this.setscenePosition(entity.scenePos);
                // _this.setscenePosition(position);

                for (var i = table.rows.length - 1; i > -1; i--) {
                    table.deleteRow(i);
                }
                for (var key in pfeature) {
                    var newRow = table.insertRow();
                    var cell1 = newRow.insertCell();
                    var cell2 = newRow.insertCell();
                    cell1.innerHTML = key;
                    cell2.innerHTML = pfeature[key];
                }
            } else {
                alert("没有获取到要素表!");
            }
        }

setScenePostion函数为:

 setscenePosition = (position) => {
        infoPosition = position;
    }

然后在componentDidMount周期函数中中调用了test函数test(this, this.viewer.scene);

function test(that, scene) {
    var Cesium = window.Cesium;
    scene.postRender.addEventListener(function () { // 每一帧都去计算气泡的正确位置
        if (infoPosition) {
            var canvasHeight = scene.canvas.height;
            var windowPosition = new Cesium.Cartesian2();
            Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, infoPosition, windowPosition);
            that.mapModal.movePosition({
                bottom: (canvasHeight - windowPosition.y + 8) + 'px',
                left: (windowPosition.x - 70) + 'px',
                visibility: 'visible'
            });
        }
    });
}

1个回答

可以参考这个示例:http://support.supermap.com.cn:8090/webgl/examples/editor.html#individualInformation

源码中搜索“气泡相关”

5,560EXP 2019年04月04日
...