<!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>
|
<button type="button" id="point_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
|
var distance_half = 111319.5;
|
// 页面初始执行的方法
|
$(document).ready(function () {
|
console.log(time_btn)
|
//plan 1:点击按钮式请求数据，并对模型位置进行移动
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
async: false,//同步
|
headers: {
|
"Access-Control-Allow-Origin": "*"
|
// "Accept": "application/json"
|
},
|
url: `${data_url}get_dou_params`,
|
success: function (data) {
|
console.log(data, "ajax_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,
|
}
|
],
|
});
|
|
addCustomLayers()
|
|
|
//创建三维地球场景
|
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: "http://112.74.77.127:9100/hn/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: "http://112.74.77.127:9100/hn/doulunji/dabi/doulunji_dabi.gltf",
|
// url: "https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf",
|
scale: 0.6
|
},
|
})
|
graphicLayer.addGraphic(dou2)
|
|
var dou3 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
style: {
|
url: "http://112.74.77.127:9100/hn/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: "http://112.74.77.127:9100/hn/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]
|
console.log(item)
|
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");
|
});
|
});
|
|
|
|
// group方法可以将一个数组按照指定长度进行分组
|
function group (array, subGroupLength) {
|
let index = 0;
|
let newArray = [];
|
while (index < array.length) {
|
newArray.push(array.slice(index, index += subGroupLength));
|
}
|
return newArray;
|
}
|
|
|
// 试加载TXT点云文件
|
|
|
// 读取TXT文件并将TXT内容转换为数组
|
|
// $.ajax({
|
// url: 'http://112.74.77.127:9100/hn/pointcloud/hn4.txt',
|
// dataType: 'text',
|
// success: function (data) {
|
// addPointCloud(data)
|
// }
|
// });
|
|
|
$("#point_btn").click(function () {
|
var data_path = 'http://112.74.77.127:9100/hn/pointcloud/hn4.txt'
|
console.log("我点击了")
|
$.ajax({
|
url: data_path,
|
dataType: 'text',
|
success: function (data) {
|
addPointCloud(data)
|
}
|
});
|
})
|
|
function addPointCloud (data) {
|
var pointPrimitives = null;// 申明点渲染集合
|
pointPrimitives = map.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
|
datas = data.split(/\s|[\r\n]/)//将txt每行内容根据空格和换行进行切割
|
data_list = datas.map(Number)//将切割后的xyz左边转换为数字格式
|
list = group(data_list, 3)//将转换后的数据每六个分为一组
|
// 循环数组，加载点云
|
for (var i = 0; i < list.length; i++) {
|
var hn_lon = Number(list[i][0]) / distance_half + 121.398442;
|
var hn_lat = Number(list[i][1]) / distance_half + 31.460107;
|
var hn_h = 300 - Number(list[i][2]);
|
var color_b = Math.floor(hn_h)
|
if (hn_h <= 50) {
|
color = Cesium.Color.fromCssColorString(`rgba(0, ${color_b}, ${color_b}, 1)`)
|
} else if (hn_h <= 80) {
|
color = Cesium.Color.fromCssColorString(`rgba(${color_b}, 0, ${color_b}, 1)`)
|
} else {
|
color = Cesium.Color.fromCssColorString(`rgba(${color_b}, ${color_b}, 0, 1)`)
|
}
|
var position = Cesium.Cartesian3.fromDegrees(hn_lon, hn_lat, hn_h);
|
pointPrimitives.add({
|
pixelSize: 1,
|
color: color,
|
// outlineColor: Cesium.Color.BLUE,
|
outlineWidth: 0,
|
position: position
|
});
|
}
|
}
|
|
|
|
|
|
|
|
//键盘漫游
|
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; //开启键盘漫游
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 试加载TXT点云文件
|
function addPrimitivesPointFromJSONTest () {
|
console.log(map, "map")
|
}
|
|
|
|
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,
|
});
|
}
|
|
function addCustomLayers () {
|
addPrimitivesPointFromJSONTest()
|
}
|
</script>
|
</body>
|
|
</html>
|
