<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
|
<meta name="author" content="火星科技 http://mars3d.cn " />
|
<meta name="apple-touch-fullscreen" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<meta name="format-detection" content="telephone=no" />
|
<meta name="x5-fullscreen" content="true" />
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
|
<!-- 标题及搜索关键字 -->
|
<meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
|
<meta name="description"
|
content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型 gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包 地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS" />
|
|
<link rel="shortcut icon" type="image/x-icon" href="https://muyao1987.gitee.io/cdn/marsgis.cn/favicon/favicon.ico" />
|
<title>教学楼(BIM建模) | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>
|
|
<!--第三方lib-->
|
<script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
|
include="jquery,font-awesome,bootstrap,layer,haoutil,mars3d"></script>
|
|
<link href="./css/style.css" rel="stylesheet" />
|
<style>
|
.btn-primary {
|
margin: 2px;
|
padding: auto 16px
|
}
|
|
.handle {
|
top: 30%;
|
width: 120px;
|
text-align: center
|
}
|
</style>
|
</head>
|
|
<body class="dark">
|
<!--加载前进行操作提示，优化用户体验-->
|
<div id="mask" class="signmask" onclick="removeMask()"></div>
|
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
<div class="infoview">
|
<div>
|
华能石洞口二厂视角：
|
<input type="button" class="btn btn-primary" value="厂区" onclick="centerAtDX1()" />
|
<input type="button" class="btn btn-primary" value="煤棚" onclick="centerAtDX2()" />
|
<input type="button" class="btn btn-primary" value="棚内" onclick="centerAtDX3()" />
|
</div>
|
</div>
|
|
<div class="infoview handle">
|
<button type="button" id="meipeng" class="btn btn-primary active" style="width: 100%;">煤棚整体</button>
|
<button type="button" id="meipeng_qiang_ding" class="btn btn-primary" style="width: 100%;">墙面棚顶</button>
|
<button type="button" id="meipeng_pati_madao" class="btn btn-primary" style="width: 100%;">爬梯马道</button>
|
<button type="button" id="meipeng_tiejia" class="btn btn-primary" style="width: 100%;">钢结构架</button>
|
<button type="button" id="meipeng_dimian" class="btn btn-primary" style="width: 100%;">煤棚地面</button>
|
<button type="button" id="dou_move" class="btn btn-primary" style="width: 100%;">移动</button>
|
<button type="button" id="dou_rote" class="btn btn-primary" style="width: 100%;">旋转</button>
|
<button type="button" id="dou_work" class="btn btn-primary" style="width: 100%;">挖煤</button>
|
<button type="button" id="test_btn" class="btn btn-primary" style="width: 100%;">测试</button>
|
</div>
|
<div class="infoview handle" id="time_line">
|
<button type="button" class="btn btn-primary" style="width: 100%;">time1</button>
|
<button type="button" class="btn btn-primary" style="width: 100%;">time2</button>
|
<button type="button" class="btn btn-primary" style="width: 100%;">time3</button>
|
<button type="button" class="btn btn-primary" style="width: 100%;">time4</button>
|
</div>
|
|
<script src="./js/common.js"></script>
|
<script type="text/javascript">
|
"use script"; //开发环境建议开启严格模式
|
|
var map;
|
var graphicLayer
|
var heading_ = 0
|
var work_ = true
|
var dou_work
|
var dou_data = {
|
lon: 121.406729,
|
lat: 31.467183,
|
height: 14,
|
heading: 70
|
}
|
var dou_params = []
|
var model_list = []
|
var data_url = 'http://127.0.0.1:8001/admin/business/devicegroup/getdata?bid='
|
var time_btn = $("#time_line button")
|
var model_no = 0
|
|
// 页面初始执行的方法
|
$(document).ready(function () {
|
console.log(time_btn)
|
//plan 1:点击按钮式请求数据，并对模型位置进行移动
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
async: false,//同步
|
url: `${data_url}get_dou_params`,
|
success: function (data) {
|
console.log(data)
|
dou_params = data.data
|
},
|
error: function (request, textStatus) {
|
|
}
|
})
|
|
})
|
function initMap (options) {
|
//合并属性参数，可覆盖config.json中的对应配置
|
var mapOptions = mars3d.Util.merge(options, {
|
scene: {
|
center: {
|
lat: 31.460107,
|
lng: 121.398442,
|
alt: 531.23,
|
heading: 33,
|
pitch: -23,
|
roll: 359.8,
|
},
|
globe: {
|
depthTestAgainstTerrain: false,
|
},
|
},
|
control: {
|
infoBox: false,
|
},
|
layers: [
|
{
|
id: 1,
|
name: "华能厂区",
|
type: "3dtiles",
|
url: "../model/huaneng_0218/tileset.json",
|
position: {
|
lng: 121.403676,
|
lat: 31.467225,
|
alt: -118,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,0)",
|
},
|
popup: "all",
|
show: true,
|
scale: 120,
|
},
|
{
|
id: 2,
|
name: "煤棚地面",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_dimian/tileset.json",
|
position: {
|
lng: 121.40609,
|
lat: 31.467183,
|
alt: 10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
},
|
{
|
id: 3,
|
name: "爬梯马道",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_pati_madao/tileset.json",
|
position: {
|
lng: 121.40609,
|
lat: 31.467183,
|
alt: 10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
},
|
{
|
id: 4,
|
name: "钢架构架",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_tiejia/tileset.json",
|
position: {
|
lng: 121.40613,
|
lat: 31.467183,
|
alt: -48,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
},
|
{
|
id: 5,
|
name: "墙面顶棚",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_qiang_ding/tileset.json",
|
position: {
|
lng: 121.40609,
|
lat: 31.467183,
|
alt: 10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
}
|
],
|
});
|
|
|
|
|
//创建三维地球场景
|
map = new mars3d.Map("mars3dContainer", mapOptions);
|
|
|
// 创建斗轮机图层
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
name: "斗轮机",
|
show: true
|
})
|
map.addLayer(graphicLayer)
|
// 封装斗轮机模型加载方法
|
|
|
var dou_parent = new Cesium.Entity()
|
var dou1 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
style: {
|
url: "../model/doulunji/dizuo/dizuo.gltf",
|
scale: 0.6,
|
heading: 120
|
}
|
})
|
graphicLayer.addGraphic(dou1)
|
|
var dou2 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
|
style: {
|
url: "../model/doulunji/dabi/doulunji_dabi.gltf",
|
scale: 0.6
|
},
|
})
|
graphicLayer.addGraphic(dou2)
|
|
var dou3 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
style: {
|
url: "../model/doulun_0322/doulun_0322.gltf",
|
runAnimations: true,
|
scale: 0.6
|
},
|
parent: dou_parent
|
})
|
graphicLayer.addGraphic(dou3)
|
|
|
var dou4 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
style: {
|
url: "../model/doulunji/zhuzhou/zhuzhou.gltf",
|
heading: 0,
|
scale: 0.6
|
},
|
})
|
graphicLayer.addGraphic(dou4)
|
|
|
// 通过ID获取煤棚模型
|
let other_wall_model = map.getLayer(0, "id");
|
// let changqu_model = map.getLayer(1, "id");
|
let dimian_model = map.getLayer(2, "id");
|
let pati_madao_model = map.getLayer(3, "id");
|
let tiejia_model = map.getLayer(4, "id");
|
let qiang_ding_model = map.getLayer(5, "id");
|
|
|
|
|
// 煤棚部分的显示与隐藏
|
$("#meipeng").click(function () {
|
//other_wall_model.show = true;
|
pati_madao_model.show = true;
|
dimian_model.show = true;
|
tiejia_model.show = true;
|
qiang_ding_model.show = true;
|
});
|
$("#meipeng_qiang_ding").click(function () {
|
if (qiang_ding_model.show == false) {
|
qiang_ding_model.show = true;
|
} else {
|
qiang_ding_model.show = false;
|
}
|
});
|
$("#meipeng_pati_madao").click(function () {
|
if (pati_madao_model.show == false) {
|
pati_madao_model.show = true;
|
} else {
|
pati_madao_model.show = false;
|
}
|
});
|
$("#meipeng_tiejia").click(function () {
|
if (tiejia_model.show == false) {
|
tiejia_model.show = true;
|
} else {
|
tiejia_model.show = false;
|
}
|
});
|
$("#meipeng_dimian").click(function () {
|
console.log(dimian_model);
|
if (dimian_model.show == false) {
|
dimian_model.show = true;
|
} else {
|
dimian_model.show = false;
|
}
|
});
|
|
|
|
|
|
// 请求数据库数据，对斗轮机模型进行操作
|
$("#test_btn").click(function () {
|
console.log(dou_params)
|
if (model_no < dou_params.length - 1) {
|
model_no++
|
} else {
|
model_no = 0
|
}
|
let item = dou_params[model_no]
|
dou_move(item.longitude, item.latitude, item.elevation, item.heading_angle)
|
})
|
|
|
time_btn.click(function (e) {
|
for (let i = 0; i < time_btn.length; i++) {
|
console.log(time_btn[i].text)
|
}
|
})
|
// 封装斗轮机工作移动方法
|
function dou_move (lon, lat, h, heading_angle) {
|
dou1.moveTo({
|
position: [lon, lat, h]
|
})
|
dou2.moveTo({
|
position: [lon, lat, h]
|
})
|
dou3.moveTo({
|
position: [lon, lat, h]
|
})
|
dou4.moveTo({
|
position: [lon, lat, h]
|
})
|
dou2.setStyle({
|
heading: heading_angle
|
})
|
dou3.setStyle({
|
heading: heading_angle
|
})
|
dou4.setStyle({
|
heading: heading_angle
|
})
|
}
|
|
|
// 斗轮机工作或暂停（对应斗轮机动画）
|
$("#dou_work").click(function () {
|
if (dou3.options.style.runAnimations == false) {
|
dou3.setStyle({
|
clampAnimations: false,
|
runAnimations: true,
|
direction: true,
|
time: 5
|
})
|
} else {
|
dou3.setStyle({
|
clampAnimations: false,
|
runAnimations: false,
|
direction: true,
|
time: 5
|
})
|
}
|
})
|
|
|
// 斗轮机移动
|
$("#dou_move").click(function () {
|
dou1.moveTo({
|
position: [121.406371, 31.466697, 15.3]
|
})
|
dou2.moveTo({
|
position: [121.406371, 31.466697, 15.3]
|
})
|
dou3.moveTo({
|
position: [121.406371, 31.466697, 15.3]
|
})
|
dou4.moveTo({
|
position: [121.406371, 31.466697, 15.3]
|
})
|
|
})
|
|
|
|
// 斗轮机工作
|
function douWork () {
|
console.log("工作中")
|
dou3.setStyle({
|
roll: 50
|
})
|
}
|
|
|
|
|
// 斗轮机旋转
|
$("#dou_rote").click(function () {
|
// 无动画效果的旋转
|
dou_data.heading += 20
|
dou2.setStyle({
|
heading: dou_data.heading
|
})
|
dou3.setStyle({
|
heading: dou_data.heading
|
})
|
dou4.setStyle({
|
heading: dou_data.heading
|
})
|
})
|
|
|
$(function () {
|
$(".handle > button").click(function () {
|
$("button[class='active']").removeAttr("class");
|
$(this).addClass("active");
|
});
|
});
|
//键盘漫游
|
map.keyboardRoam.setOptions({
|
moveStep: 0.1, //平移步长 (米)。
|
dirStep: 50, //相机原地旋转步长，值越大步长越小。
|
rotateStep: 0.3, //相机围绕目标点旋转速率，0.3-2.0
|
minPitch: 0.1, //最小仰角 0-1
|
maxPitch: 0.95, //最大仰角 0-1
|
});
|
map.keyboardRoam.enabled = true; //开启键盘漫游
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function centerAtDX1 () {
|
map.setCameraView({
|
lat: 31.460107,
|
lng: 121.398442,
|
alt: 531.23,
|
heading: 33,
|
pitch: -23,
|
});
|
}
|
|
function centerAtDX2 () {
|
map.setCameraView({
|
lat: 31.464903,
|
lng: 121.404337,
|
alt: 210,
|
heading: 32,
|
pitch: -20,
|
});
|
}
|
|
function centerAtDX3 () {
|
map.setCameraView({
|
lat: 31.466355,
|
lng: 121.405475,
|
alt: 159,
|
heading: 2,
|
pitch: -18,
|
});
|
}
|
</script>
|
</body>
|
|
</html>
|
