首页 > 其他分享> > 三维地球漫游实现或者沿着固定估计飞行源代码

三维地球漫游实现或者沿着固定估计飞行源代码

2021-06-08 20:54:20 作者：互联网

三维地图服务器下载地址：http://download.bigemap.com/bm3Dserver.rar （最新版）

安装以上SDK后，启动，启动面板上找到开发使用，如下图源代码：

//注释：安装地图服务器后，下列代码中的 http://bigemap.com 替换成 http://localhost ，其他不变

<!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>
<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: '选择相机功能'"></select>
</div>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite'});
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("视角变动开始");
}
});
viewer.camera.moveEnd.addEventListener(function () {
if (viewModel.checkCamera) {
viewModel.cameraEventInfo("视角变动结束");
}
});
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, one rror, 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)
});
}

//失败时
function one rror(error) {
switch (error.code) {
case 1:
alert("位置服务被拒绝");
break;
case 2:
alert("暂时获取不到位置信息");
break;
case 3:
alert("获取信息超时");
break;
case 4:
alert("未知错误");
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 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 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 flyOverLongitude = function (adjustPitch) {
losAngelesToTokyo();
};

var flyOverLongitudeWithPitch = function () {
losAngelesToTokyo(true);
};

效果图

标签：function,漫游,viewer,三维,camera,var,new,bmgl,源代码
来源： https://blog.51cto.com/u_15262562/2883417

三维地球漫游实现或者沿着固定估计飞行源代码

三维地图服务器 下载地址：http://download.bigemap.com/bm3Dserver.rar （最新版）

三维地图服务器下载地址：http://download.bigemap.com/bm3Dserver.rar （最新版）