dingjun.hu
/
marker3d


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>测试Marker-ByData</title>
		<!-- <script src="./libs/three.js"></script> -->
		<script src="../libs/axios.min.js"></script>
		<script src="../app/renderByData.js"></script>
		<script src="../configByData.js"></script>
		<link rel="stylesheet" href="../app/index.css">
	</head>
	<style>
		html,
		body,
		#render-container {
			width: 100% !important;
			height: 100% !important;

		}
/* 		#render-container{
			transform: scale(1.5);
		} */
	</style>
	<body id="body">
		<div>Header <span id="info"></span></div>
		<div id="render-container" style="width: 800px; height: 540px"></div>
		<!-- <div id="render-container" style="width: 960px; height: 540px"></div> -->
		<script>
			function init() {
				// var temp = document.getElementById('render-container');
				// console.log(temp)
				// document.getElementById('body').removeChild(temp);
				// const divEl = document.createElement('div')
				// // divEl.className = 'marker-anmi'
				// divEl.setAttribute('id', 'render-container')

				// document.body.appendChild(divEl)

				const infoEl = document.getElementById('info')
				const container = document.getElementById('render-container')
				const markerRender = new MarkerRenderByData({
					container: container,
					config: config,
					// 是否裁剪
					// isClip: false,
					isClip: true
				})

				markerRender.on('imagesDownloaded', (timing) => {
					console.log('imagesDownloaded,', timing)
				})

				markerRender.on('trackChanged', (trackId) => {
					infoEl.textContent = `track: ${trackId}`
				})

				markerRender.on('markerClicked', (markerId) => {
					console.log('click marker:', markerId)
				})
			}
			init()
			window.addEventListener('resize', () => {
				
				const container = document.getElementById('render-container')
				init()
			})
		</script>
	</body>
</html>