首页 / 浏览问题 / 三维GIS / 问题详情
WebGL如何在场景中显示鼠标的经纬度
1EXP 2017年03月24日
在使用Supermap for webgl开发中,怎么在场景中显示鼠标的经纬度信息。

1个回答

您好,

参考一下这个:

<!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">
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="text/javascript">
function onload(Cesium) {
    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var widget = viewer.cesiumWidget;
    try {
        var treePromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_TREE,{name : 'tree'});
        var ground1Promise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND1,{name : 'ground1'});
        var ground2Promise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_GROUND2,{name : 'ground2'});
        var buildPromise = scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_CBD_BUILD,{name : 'build'});
        var promiseSet = [treePromise,ground1Promise,ground2Promise,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 = 'An error occurred while rendering.  Rendering has stopped.';
            widget.showErrorPanel(title, undefined, e);
        }
    }
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

    //设置鼠标左键单击回调事件
    handler.setInputAction(function(e) {
        //首先移除之前添加的点
        viewer.entities.removeAll();
        //获取点击位置笛卡尔坐标
        var position = scene.pickPosition(e.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(height < 0) {
            height = 0;
        }

        //创建弹出框信息
        var entity = new Cesium.Entity({
            name : "位置信息",
            description : createDescription(Cesium, [longitude, latitude, height])
        });
        viewer.selectedEntity = entity;

        //在点击位置添加对应点
        viewer.entities.add(new Cesium.Entity({
            point : new Cesium.PointGraphics({
                color : new Cesium.Color(1, 1, 0),
                pixelSize : 10,
                outlineColor : new Cesium.Color(0, 1, 1)
            }),
            position : Cesium.Cartesian3.fromDegrees(longitude, latitude , height + 0.5)
        }));
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    function createDescription(Cesium,properties){
        var simpleStyleIdentifiers = ['经度','纬度','高度'];
        var html = '';
        for ( var key in properties) {
            if (properties.hasOwnProperty(key)) {
                if (simpleStyleIdentifiers.indexOf(key) !== -1) {
                    continue;
                }
                var value = properties[key];
                if (Cesium.defined(value) && value !== '') {
                    html += '<tr><td>' + simpleStyleIdentifiers[key] + '</td><td>' + value + '</td></tr>';
                }
            }
        }
        if (html.length > 0) {
            html = '<table class="zebra"><tbody>' + html + '</tbody></table>';
        }
        return html;
    }
}
</script>
</body>
</html>

3,389EXP 2017年03月24日
你好,我使用了此方法可以显示经纬度,但是将视角垂直会出现一个绿色方框请问怎么去掉?
...