視角變換，跳轉(zhuǎn)，相機(jī)操作-源代碼示例 運(yùn)行 重置
<!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://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#toolbar select {
display: inline-block;
position: relative;
background: #303336;
border: 1px solid #444;
color: #edffff;
fill: #edffff;
border-radius: 4px;
padding: 5px 12px;
margin: 2px 3px;
cursor: pointer;
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bmgl-widget-credits{display:none}
</style>
<title>part_test</title>
</head>
<body>
<div id='container'></div>
<div id="toolbar">
<select data-bind="options: options, optionsText: '_text', value: selectedOption,optionsCaption: '選擇相機(jī)功能'"></select>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.zhongkexingtu'});
var viewModel, rotateEventListener, avaliableOptions,rotateTimer;
function opt(text, callback) {
this._text = text;
this._callback = callback
}
viewer.camera.moveStart.addEventListener(function () {
if (viewModel.checkCamera) {
viewModel.cameraEventInfo("視角變動(dòng)開始");
}
});
viewer.camera.moveEnd.addEventListener(function () {
if (viewModel.checkCamera) {
viewModel.cameraEventInfo("視角變動(dòng)結(jié)束");
}
});
viewer.camera.changed.addEventListener(function () {
var p=bmgl.Cartographic.fromCartesian(viewer.camera.position);
if(p.height<1200000){
if (rotateEventListener){
viewer.clock.onTick.removeEventListener(rotateEventListener);
rotateEventListener=null;
}
};
});
var flyToLocation = function () {
var options = {
enableHighAccuracy: true,
maximumAge: 1000
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(fly, onError, options); //瀏覽器支持geolocation
} else {
//瀏覽器不支持geolocation
}
// Create callback for browser's geolocation
function fly(position) {
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude, 1000.0)
});
}
//失敗時(shí)
function onError(error) {
switch (error.code) {
case 1:
alert("位置服務(wù)被拒絕");
break;
case 2:
alert("暫時(shí)獲取不到位置信息");
break;
case 3:
alert("獲取信息超時(shí)");
break;
case 4:
alert("未知錯(cuò)誤");
break;
}
}
};
var flyToSanDiego = function () {
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});
};
var flyToHeadingPitchRoll = function () {
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
orientation: {
/*弧度*/
heading: bmgl.Math.toRadians(20.0),
pitch: bmgl.Math.toRadians(-35.0),
roll: 0.0
}
});
}
var viewRectangle = function () {
var west = -77.0;
var south = 38.0;
var east = -72.0;
var north = 42.0;
var rectangle = bmgl.Rectangle.fromDegrees(west, south, east, north);
viewer.camera.setView({
destination: rectangle
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle: {
coordinates: rectangle,
fill: false,
outline: true,
outlineColor: bmgl.Color.WHITE
}
});
}
var flyToRectangle = function () {
var west = -90.0;
var south = 38.0;
var east = -87.0;
var north = 40.0;
var rectangle = bmgl.Rectangle.fromDegrees(west, south, east, north);
viewer.camera.flyTo({
destination: rectangle
});
// Show the rectangle. Not required; just for show.
viewer.entities.add({
rectangle: {
coordinates: rectangle,
fill: false,
outline: true,
outlineColor: bmgl.Color.WHITE
}
});
}
var setReferenceFrame = function () {
var center = bmgl.Cartesian3.fromDegrees(-75.59777, 40.03883);
var transform = bmgl.Transforms.eastNorthUpToFixedFrame(center);
// View in east-north-up frame
var camera = viewer.camera;
camera.constrainedAxis = bmgl.Cartesian3.UNIT_Z;
camera.lookAtTransform(transform, new bmgl.Cartesian3(-120000.0, -120000.0, 120000.0));
// Show reference frame. Not required.
viewer.scene.primitives.add(new bmgl.DebugModelMatrixPrimitive({
modelMatrix: transform,
length: 100000.0
}));
}
var setHeadingPitchRoll = function () {
viewer.camera.setView({
destination: bmgl.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
orientation: {
heading: -bmgl.Math.PI_OVER_TWO,
pitch: -bmgl.Math.PI_OVER_FOUR,
roll: 0.0
}
});
};
var icrf = function (scene, time) {
if (scene.mode !== bmgl.SceneMode.SCENE3D) {
return;
}
var icrfToFixed = bmgl.Transforms.computeIcrfToFixedMatrix(time);
if (bmgl.defined(icrfToFixed)) {
var camera = viewer.camera;
var offset = bmgl.Cartesian3.clone(camera.position);
var transform = bmgl.Matrix4.fromRotationTranslation(icrfToFixed);
camera.lookAtTransform(transform, offset);
}
};
var viewInICRF = function () {
var a = viewer.clock.currentTime.secondsOfDay;
rotateEventListener = function (e) {
var i = viewer.clock.currentTime.secondsOfDay, t = ((i - a) / 1e3) * 0.4;
a = i;
viewer.scene.camera.rotate(bmgl.Cartesian3.UNIT_Z, -1 * t)
};
viewer.camera.flyHome(0);
viewer.clock.multiplier = 200;
viewer.clock.shouldAnimate = !0;
viewer.clock.onTick.addEventListener(rotateEventListener);
};
var flyInACity = function () {
viewer.scene.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(-73.98580932617188, 40.74843406689482, 363.34038727246224),
complete: function () {
setTimeout(function () {
viewer.camera.flyTo({
destination: bmgl.Cartesian3.fromDegrees(-73.98585975679403, 40.75759944127251, 186.50838555841779),
orientation: {
heading: bmgl.Math.toRadians(200.0),
pitch: bmgl.Math.toRadians(-50.0)
},
easingFunction: bmgl.EasingFunction.LINEAR_NONE
});
}, 1000);
}
});
};
var losAngelesToTokyo = function (adjustPitch) {
var camera = viewer.scene.camera;
var tokyoOptions = {
destination: bmgl.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
orientation: {
heading: bmgl.Math.toRadians(15.0),
pitch: bmgl.Math.toRadians(-60),
roll: 0.0
},
duration: 20,
flyOverLongitude: bmgl.Math.toRadians(60.0)
};
var laOptions = {
destination: bmgl.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
duration: 5,
orientation: {
heading: bmgl.Math.toRadians(-15.0),
pitch: -bmgl.Math.PI_OVER_FOUR,
roll: 0.0
}
};
laOptions.complete = function () {
setTimeout(function () {
camera.flyTo(tokyoOptions);
}, 1000);
};
if (adjustPitch) {
tokyoOptions.pitchAdjustHeight = 1000;
laOptions.pitchAdjustHeight = 1000;
}
camera.flyTo(laOptions);
};
var flyOverLongitude = function (adjustPitch) {
losAngelesToTokyo();
};
var flyOverLongitudeWithPitch = function () {
losAngelesToTokyo(true);
};
function reset() {
viewer.entities.removeAll();
// viewer.scene.primitives.removeAll();
// viewer.scene.tweens.removeAll();
viewer.camera.lookAtTransform(bmgl.Matrix4.IDENTITY);
rotateEventListener&&viewer.clock.onTick.removeEventListener(rotateEventListener);
viewer.clock.shouldAnimate = 0;
rotateEventListener = null;
viewer.scene.preRender.removeEventListener(icrf);
viewer.scene.globe.enableLighting = false;
};
avaliableOptions = [];
avaliableOptions.push(new opt('飛到一個(gè)城市', flyInACity));
avaliableOptions.push(new opt('飛往圣地亞哥', flyToSanDiego));
avaliableOptions.push(new opt('飛到有航向、俯仰和滾轉(zhuǎn)的位置', flyToHeadingPitchRoll));
avaliableOptions.push(new opt('飛到我的位置', flyToLocation));
avaliableOptions.push(new opt('飛到矩形', flyToRectangle));
avaliableOptions.push(new opt('查看矩形', viewRectangle));
avaliableOptions.push(new opt('設(shè)置相機(jī)框架', setReferenceFrame));
avaliableOptions.push(new opt('設(shè)置相機(jī)的航向、俯仰和滾轉(zhuǎn)位置', setHeadingPitchRoll));
avaliableOptions.push(new opt('旋轉(zhuǎn)球體', viewInICRF));
avaliableOptions.push(new opt('從洛杉磯經(jīng)歐洲飛往東京', flyOverLongitude));
avaliableOptions.push(new opt('在飛行中向下看', flyOverLongitudeWithPitch));
viewModel = {
options: avaliableOptions,
selectedOption: bmgl.knockout.observable(null),
checkCamera: bmgl.knockout.observable(true),
cameraEventInfo: bmgl.knockout.observable("")
};
bmgl.knockout.applyBindings(viewModel, document.getElementById('toolbar'));
viewModel.selectedOption.subscribe(function (selected) {
reset();
selected._callback();
});
</script>
</body>
</html>
源碼