SuperMapWebGL获取选择点的坐标

    科技2022-07-13  122

    <!DOCTYPE html> <html> <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> <script src="js/jquery-3.5.0.js"></script> <script src="video-js-7.7.6/video.min.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="./video-js-7.7.6/video-js.min.css" /> <link href="./SuperMapAPI/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="./SuperMapAPI/css/pretty.css" rel="stylesheet"> <script src="./SuperMapAPI/js/jquery.min.js"></script> <script src="./SuperMapAPI/js/config.js"></script> <script src="./SuperMapAPI/js/bootstrap.min.js"></script> <script src="./SuperMapAPI/js/bootstrap-select.min.js"></script> <script src="./SuperMapAPI/js/bootstrap-treeview.js"></script> <script src="./SuperMapAPI/js/spectrum.js"></script> <script type="text/javascript" src="./SuperMapAPI/js/require.min.js" data-main="./SuperMapAPI/js/main"></script> </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; var list; try { var promise = scene.open('模型地址'); Cesium.when(promise, function(layers) { scene.camera.setView({ destination: new Cesium.Cartesian3(-2226536.103064586, 4186153.489252475, 4267282.822186795), orientation: { heading: 0.18646594377489922, pitch: -0.6743434092132858, roll: 6.283185307179583 } }); }, 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) { //首先移除之前添加的点 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) })); }, 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>
    Processed: 0.010, SQL: 8