P2022036_ExportMap.git

			@@ -1,5 +1,6 @@
			<!DOCTYPE html>
			<html xmlns="http://www.w3.org/1999/xhtml">

			<head>
			<title>UE接口测试</title>
			<meta http-equiv="Expires" content="0" />
			@@ -8,7 +9,6 @@
			<meta http-equiv="Cache-control" content="no-cache" />
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<script src="js/jquery.1.12.4.js"></script>
			<script src="js/tumap.js"></script>
			<style>
			html,
			@@ -27,21 +27,322 @@
			height: 100%;
			position: absolute;
			}

			#container {
			position: absolute;
			top: 10px;
			left: 10px;
			padding: 5px;
			border-radius: 4px;
			border: 1px solid rgba(128, 128, 128, 0.5);
			color: #ffffff;
			}

			button {
			background: transparent;
			border: 1px solid #d0ffb8;
			color: white;
			border-radius: 2px;
			margin: 3px;
			cursor: pointer;
			}
			</style>
			<script>
			$(function () {
			window.onload = function () {
			window.map = new TUMap({
			id: 'map', // div的id
			//url: 'http://192.168.20.39:91', // UE服务地址
			url: 'http://103.85.165.99:91',
			url: 'http://192.168.20.39:91', // UE服务地址
			//url: 'http://103.85.165.99:91',
			onInit: function () { // 初始化完成事件
			console.log("初始化完成");
			}
			})
			});
			}

			// 坐标转化
			function transform() {
			var coordinate = {
			"x": 117.04046434254622,
			"y": 39.722702758997606,
			"z": 0
			}
			var Wgs84ToLocal = map.transformWGS84ToLocal(coordinate.x, coordinate.y)
			console.log('Wgs84ToLocal', Wgs84ToLocal)
			var LocalToWGS84 = map.transformLocalToWGS84(Wgs84ToLocal.x, Wgs84ToLocal.y)
			console.log('LocalToWGS84', LocalToWGS84)
			}

			// 获取镜头信息
			function getCamera() {
			var location = map.camera.location; // 位置信息
			var rotation = map.camera.rotation; // 角度信息
			var distance = map.camera.distance; // 距离信息
			console.log(location, rotation, distance);
			}

			// 飞行
			function flyTo() {
			var v = {
			z: 0,
			pitch: -8.675049781799316,
			roll: 0,
			yaw: 60.92010498046875,
			distance: 120112.3671875,
			time: 3
			};
			var x = 116.48915493897739; y = 39.81061022857503; z = 5000;
			var LocalToWGS84 = transToWGS84ToLocal(x, y)

			var roll = 0, pitch = 0, yaw = 0, distance = 1000;
			var callBack = function () { console.log("flyTo"); }
			var time = 3; // 3s

			map.flyTo(LocalToWGS84.x, LocalToWGS84.y, v.z, v.roll, v.pitch, v.yaw, v.distance, callBack, time);
			}

			function transToWGS84ToLocal(x, y) {
			return map.transformWGS84ToLocal(x, y)
			}

			// 切换镜头
			function setView() {
			var v = {
			x: -567870.625,
			y: -964962.4375,
			z: 0,
			pitch: -8.675049781799316,
			roll: 0,
			yaw: 120.92010498046875,
			distance: 120112.3671875,
			time: 3
			};
			map.setView(v.x, v.y, v.z, v.roll, v.pitch, v.yaw, v.distance);
			}

			// 时间特效
			var timeFlag = true;
			function setTime() {
			// morning-早晨,noon-中午,evening-傍晚,night-夜晚,darkWorld-暗色场景,12
			if (timeFlag) {
			map.setTime("evening");
			} else {
			map.setTime("noon");
			}
			timeFlag = !timeFlag
			}

			// 文字标签
			var labelFlag = true;
			var label_val = null;
			function createLabel() {
			var x = 116.48915493897739; y = 39.81061022857503; z = 5000;
			var LocalToWGS84 = transToWGS84ToLocal(x, y)
			if (labelFlag) {
			var options = {
			id: 1, // 唯一标识，不可重复，可不填
			x: LocalToWGS84.x, // x轴ue4坐标
			y: LocalToWGS84.y, // y轴ue4坐标
			z: 0, // z轴ue4坐标
			size: { width: 100, height: 100 }, // label的大小
			text: '测试文字', // 显示的文字
			scale: 0.5, // 缩放
			type: 'Type1', // 类型 Default,Type1,Type2
			backgroundColor: "#ffffff", // 背景色支持rgba
			fillColor: "#00ff00", // 文字颜色
			visibility: true // 默认是否显示
			};

			label_val = map.createLabel(options);
			} else {
			label_val.removeFromMap();
			label_val = null;
			}
			labelFlag = !labelFlag;
			}

			// POI点
			var poiFlag = true;
			var poi_val = null;
			function createBillboard() {
			var x = 116.48815493897739; y = 39.81061022857503; z = 5000;
			var LocalToWGS84 = transToWGS84ToLocal(x, y)
			if (poiFlag) {
			var param = {
			x: LocalToWGS84.x, // x轴ue4坐标
			y: LocalToWGS84.y, // y轴ue4坐标
			z: 0, // z轴ue4坐标
			image: "123.png", // 图片地址
			scale: 0.5, // 缩放比例
			clickedScale: 0.7, // 点击后比例
			visibility: true, // 默认是否显示
			alertWindow: { // 可选，点击弹窗
			url: "http://192.168.20.89:12306/popupThree.html", // 弹窗地址
			size: new TUVector2(180, 90), // 弹窗大小
			offset: new TUVector2(-45, -110) // 弹窗位置，右：x正，下：y正
			}
			}
			poi_val = map.createBillboard(param);
			poi_val.show(true); // 显示
			} else {
			poi_val.removeFromMap();
			poi_val = null;
			}
			poiFlag = !poiFlag;

			}

			// 3DPOI点
			var thPoiFlag = true;
			var poi_3d_val = null
			function create3DBillboard() {
			if (thPoiFlag) {
			var testPoints = [{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 }];
			var points = [];
			testPoints.forEach(function (item) {
			var LocalToWGS84 = transToWGS84ToLocal(item.x, item.y)
			points.push({
			x: LocalToWGS84.x,
			y: LocalToWGS84.y,
			z: item.z,
			image: "123.png",
			text: "",
			scale: 80,
			clickedScale: 1,
			flash: false,
			canClick: true
			});
			});

			poi_3d_val = map.create3DBillboard(points);
			poi_3d_val.forEach(function (poi) {
			poi.show(true);

			});
			} else {
			poi_3d_val.forEach(function (poi) {
			poi.removeFromMap();
			});
			poi_3d_val = null
			}
			thPoiFlag = !thPoiFlag;
			}

			// 添加区域\
			var areaFlag = true;
			var area_val = null;
			function createAreaData() {
			if (areaFlag) {
			var val = [
			{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
			{ x: 116.48505493897739, y: 39.81651022857503, z: 4000 },
			{ x: 116.48905493897739, y: 39.81851022857503, z: 4000 },
			{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 },

			{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
			]
			var data = [];
			for (var i in val) {
			var item = transToWGS84ToLocal(val[i].x, val[i].y)
			data.push(
			new TUVector3(item.x, item.y, 0)
			)
			}
			area_val = map.createAreaData({
			id: "fdfdfdfdfd",
			data: data
			});
			} else {
			area_val.removeFromMap();
			area_val = null;
			}
			areaFlag = !areaFlag;
			}

			// 围栏
			var boundflag = true;
			var bound_val = null
			function createAreaBoundary() {
			if (boundflag) {
			var val = [
			{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
			{ x: 116.48505493897739, y: 39.81651022857503, z: 4000 },
			{ x: 116.48905493897739, y: 39.81851022857503, z: 4000 },
			{ x: 116.49255493897739, y: 39.81451022857503, z: 4000 },

			{ x: 116.48855493897739, y: 39.81251022857503, z: 4000 },
			]
			var data = [];
			for (var i in val) {
			var item = transToWGS84ToLocal(val[i].x, val[i].y)
			data.push(
			new TUVector3(item.x, item.y, 0)
			)
			}
			var param = {
			type: 0, // 0上浮横格，1实色，2箭头，3三角
			height: 5000, // 默认5000
			color: "#ff0000", // 默认白色
			brightness: 10, // 默认10
			data: data
			};
			bound_val = map.createAreaBoundary(param);


			} else {
			bound_val.removeFromMap();
			bound_val = null;
			}
			boundflag = !boundflag;
			}

			// 拾取坐标
			function pickPosition() {
			var obj = map.transformLocalToWGS84(map.camera.location.x, map.camera.location.y);
			alert(JSON.stringify(obj));
			}

			// 拾取对象
			function pickObject() {
			map.pickPosition(function (e) {
			alert(JSON.stringify(e))
			});
			}

			// 清除
			function objclear() {
			map.clearAllCovering();
			map.setTime("noon");
			boundflag = true;
			bound_val = null
			areaFlag = true;
			area_val = null;
			thPoiFlag = true;
			poi_3d_val = null;
			poiFlag = true;
			poi_val = null;
			}

			</script>
			</head>

			<body>
			<div id="map"></div>

			<div id="container">
			<button onclick="transform();">坐标转换</button>
			<button onclick="getCamera();">获取镜头信息</button>
			<button onclick="flyTo();">飞行</button>
			<button onclick="setView();">切换镜头</button>
			<button onclick="setTime();">时间特效</button>
			<button onclick="createLabel();">文字标签</button>
			<button onclick="createBillboard();">POI点</button>
			<button onclick="create3DBillboard();">3DPOI点</button>
			<button onclick="createAreaData();">添加区域</button>
			<button onclick="createAreaBoundary();">围栏</button>
			<button onclick="pickPosition();">获取镜头坐标</button>
			<button onclick="pickObject();">拾取对象</button>
			<button onclick="objclear();">清除</button>
			</div>
			</body>

			</html>