<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
<link href="http://www.bigemap.com/Public/common/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%
}
#control {
user-select: none;
position: absolute;
bottom: 20px;
right: 0;
width: 380px;
background: #f1f1f1;
}
#control .panel {
margin-bottom: 0;
}
#control .panel input[type=range] {
width: calc(100% - 30px);
margin-left: 10px;
}
#control .minus, #control .plus {
position: absolute;
text-align: center;
line-height: 16px;
font-size: 20px;
display: inline-block;
height: 20px;
cursor: pointer;
width: 20px;
border-radius: 100%;
border: 1px solid #29d2ff;
}
#control .minus {
left: 0;
top: -1px;
}
#control .plus {
right: 4px;
top: -1px;
}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div id="control">
<div class="panel panel-info">
<div class="panel-heading">
位置校正
</div>
<div class="panel-body">
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>缩放</span>
<span class="value">1</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="scale" type="range" value="1" min="0.01" max="3" step="0.1">
<span class="plus mi">+</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>经度</span>
<span class="value">93.946</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="longitude" type="range" value="93.946" min="93.3" max="94.2" step="0.0001">
<span class="plus mi">+</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>纬度</span>
<span class="value">36.6878</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="latitude" type="range" value="36.6878" min="36.2" max="36.9" step="0.0001">
<span class="plus mi">+</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>高度</span>
<span class="value">-380</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="height" type="range" value="-380" min="-2000" max="2000" step="1">
<span class="plus mi">+</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>X旋转</span>
<span class="value">0</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="rx" type="range" value="0" min="-360" max="360" step="1">
<span class="plus mi">+</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>Y旋转</span>
<span class="value">0</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="ry" type="range" value="0" min="-360" max="360" step="1">
<span class="plus mi">+</span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-4">
<label>
<span>Z旋转</span>
<span class="value">-4.5</span>
</label>
</div>
<div class="col-sm-8">
<span class="minus mi">-</span>
<input name="rz" type="range" value="-4.5" min="-360" max="360" step="1">
<span class="plus mi">+</span>
</div>
</div>
</div>
</div>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.zhongkexingtu',requestRenderMode:false});
var tilesets = new bmgl.BM3DTileset({url: '/bmgl/data/road2/tileset.json', maximumScreenSpaceError: 1});
var tileData;
tilesets.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset);
// var default_HeadingPitchRange = new bmgl.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0);
// viewer.zoomTo(tileset, default_HeadingPitchRange);
viewer.camera.setView({
"destination": bmgl.Cartesian3.fromDegrees(93.70850968438515, 36.678872101477836,3155.311533),
"orientation": {"heading":1.541920544673033,"roll":0.003466896409897835,"pitch":-0.3847566214148632}
});
var cartographic = bmgl.Cartographic.fromCartesian(tileset.boundingSphere.center);
var delta_lng = 0, delta_lat = 0;
console.log(bmgl.Math.toDegrees(cartographic.longitude), bmgl.Math.toDegrees(cartographic.latitude));
var surface = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng, cartographic.latitude + delta_lat, 0.0);
var offset = bmgl.Cartesian3.fromRadians(cartographic.longitude + delta_lng - bmgl.Math.toRadians(23), cartographic.latitude - bmgl.Math.toRadians(4.5), 0);
var translation = bmgl.Cartesian3.subtract(offset, surface, new bmgl.Cartesian3());
// tileset.modelMatrix = bmgl.Matrix4.fromTranslation(translation);
// tileset.modelMatrix=update3dtilesMaxtrix(params);
tileData = tileset;
tileset._root.transform = update3dtilesMaxtrix();
// console.log(tileset._root.transform);
}).otherwise(function (error) {
console.log(error);
});
$('#control').on('change', 'input[type=range]', function () {
$(this).parent().parent().find('.value').html($(this).val());
var name = $(this).prop('name');
tileModelTool[name] = parseFloat($(this).val());
tileData._root.transform = update3dtilesMaxtrix();
console.log('aaa');
});
$('#control').on('click', '.mi', function () {
var input = $(this).parent().find('input');
var name = input.prop('name');
var step = input.prop('step');
if ($(this).hasClass('minus')) {
tileModelTool[name] -= parseFloat(step);
} else {
tileModelTool[name] += parseFloat(step);
}
if (parseFloat(input.prop('min')) > tileModelTool[name]) {
tileModelTool[name] = parseFloat(input.prop('min'));
}
if (parseFloat(input.prop('max')) < tileModelTool[name]) {
tileModelTool[name] = parseFloat(input.prop('max'));
}
input.val(tileModelTool[name]);
$(this).parent().parent().find('.value').html(tileModelTool[name].toString().substr(0, 7));
tileData._root.transform = update3dtilesMaxtrix();
});
var tileModelTool = {
scale: 1,
longitude: 93.9435,
latitude: 36.6613,
height: -380, //修改高度
rx: 0,
ry: 0,
rz: -3.5, //修改旋转
alpha: 0.5
}
function update3dtilesMaxtrix() {
var mx = bmgl.Matrix3.fromRotationX(
bmgl.Math.toRadians(tileModelTool.rx)
);
var my = bmgl.Matrix3.fromRotationY(
bmgl.Math.toRadians(tileModelTool.ry)
);
var mz = bmgl.Matrix3.fromRotationZ(
bmgl.Math.toRadians(tileModelTool.rz)
);
var rotationX = bmgl.Matrix4.fromRotationTranslation(mx);
var rotationY = bmgl.Matrix4.fromRotationTranslation(my);
var rotationZ = bmgl.Matrix4.fromRotationTranslation(mz);
//平移 修改经纬度
var position = bmgl.Cartesian3.fromDegrees(
tileModelTool.longitude,
tileModelTool.latitude,
tileModelTool.height
);
var m = bmgl.Transforms.eastNorthUpToFixedFrame(position);
//旋转、平移矩阵相乘
bmgl.Matrix4.multiply(m, rotationX, m);
bmgl.Matrix4.multiply(m, rotationY, m);
bmgl.Matrix4.multiply(m, rotationZ, m);
//缩放 修改缩放比例
var scale = bmgl.Matrix4.fromUniformScale(tileModelTool.scale);
bmgl.Matrix4.multiply(m, scale, m);
return m;
}
</script>
</body>
</html>
源码