cesium 显示经纬度

最新推荐文章于 2024-05-16 20:38:45 发布

铭keny

最新推荐文章于 2024-05-16 20:38:45 发布

阅读量1.2k

点赞数

分类专栏： cesium gis

本文链接：https://blog.csdn.net/qq_34200979/article/details/112887332

版权

cesium 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

gis

9 篇文章 0 订阅

订阅专栏

1、效果图

2、代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Use correct character set. -->
		<meta charset="utf-8">
		<!-- Tell IE to use the latest, best version. -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>Hello World!</title>
		<script src="../Build/CesiumUnminified/Cesium.js"></script>
		<style>
			@import url(../Build/CesiumUnminified/Widgets/widgets.css);
		</style>
	</head>
	<body>
		<div id="cesiumContainer">
		</div>
		<script>
			var viewer = new Cesium.Viewer('cesiumContainer', {
				imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
					url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
				}),
				animation: true, //是否显示动画控件
				/* shouldAnimate : true,
				 homeButton: false, //是否显示Home按钮
				 fullscreenButton: false, //是否显示全屏按钮
				 baseLayerPicker: false, //是否显示图层选择控件
				 geocoder: false, //是否显示地名查找控件
				 timeline: false, //是否显示时间线控件
				 sceneModePicker: true, //是否显示投影方式控件
				 navigationHelpButton: false, //是否显示帮助信息控件
				 infoBox: false, //是否显示点击要素之后显示的信息
				 requestRenderMode: true, //启用请求渲染模式
				 scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
				 sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
				 fullscreenElement: document.body, //全屏时渲染的HTML元素 */
			});

			//显示经纬度start
			var scene = viewer.scene;
			if (!scene.pickPositionSupported) {
				window.alert("This browser does not support pickPosition.");
			}
			var entity = viewer.entities.add({
				label: {
					show: false,
					showBackground: true,
					font: "14px monospace",
					horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
					verticalOrigin: Cesium.VerticalOrigin.TOP,
					pixelOffset: new Cesium.Cartesian2(30, 0),
				},
			});
			// Mouse over the globe to see the cartographic position
			var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
			handler.setInputAction(function(movement) {
				var cartesian = viewer.camera.pickEllipsoid(
					movement.endPosition,
					scene.globe.ellipsoid
				);
				if (cartesian) {
					var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
					var longitudeString = Cesium.Math.toDegrees(
						cartographic.longitude
					).toFixed(6);
					var latitudeString = Cesium.Math.toDegrees(
						cartographic.latitude
					).toFixed(6);
					entity.position = cartesian;
					entity.label.show = true;
					entity.label.text =
						"Lon: " +
						("   " + longitudeString).slice(-10) +
						"\u00B0" +
						"\nLat: " +
						("   " + latitudeString).slice(-10) +
						"\u00B0";
				} else {
					entity.label.show = false;
				}
			}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
			//显示经纬度end

			viewer.camera.flyTo({
				destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0),
				duration: 8
			});
		</script>
	</body>

</html>

铭keny

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
cesium 显示经纬度

1、效果图2、代码<!DOCTYPE html><html lang="en"> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content.
复制链接

扫一扫

专栏目录