<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel='stylesheet'/>
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#control{
background-color: #f1f1f1;
position: absolute;
z-index: 99;
top:20px;
right: 20px;
}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div id="control">
<label>
<input checked type="checkbox" name="enableRotate">
旋轉
</label>
<label>
<input checked type="checkbox" name="enableTranslate">
平移
</label>
<label>
<input checked type="checkbox" name="enableZoom">
縮放
</label>
<label>
<input checked type="checkbox" name="enableTilt">
傾斜
</label>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer('container', {
selectionIndicator:false,
mapId: 'bigemap.dc-satellite',
infoBox:false,
});
$('#control').on('click','input',function (){
var name=$(this).prop('name');
viewer.scene.screenSpaceCameraController[name]=$(this).prop('checked');
});
</script>
</body>
</html>