<!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>
SuperMapWebGL获取选择点的坐标
最新推荐文章于 2024-08-12 13:45:33 发布
该博客介绍了如何在Cesium三维地球中实现点击获取坐标点,并在点击位置显示信息。通过创建ScreenSpaceEventHandler监听左键点击事件,获取笛卡尔坐标并转换为经纬度,同时在点击位置添加标记点并展示弹出框信息。
摘要由CSDN通过智能技术生成