SuperMapWebGL获取选择点的坐标

最新推荐文章于 2022-02-25 11:37:38 发布

黒い桜

最新推荐文章于 2022-02-25 11:37:38 发布

阅读量559

点赞数

分类专栏： SuperMap webgl 文章标签： webgl

本文链接：https://blog.csdn.net/weixin_44682948/article/details/108916428

版权

SuperMap 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

webgl

2 篇文章 0 订阅

订阅专栏

<!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>

黒い桜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SuperMapWebGL获取选择点的坐标

<!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=
复制链接

扫一扫