<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
|
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
|
<META HTTP-EQUIV="expires" CONTENT="0">
|
<title>三维底座项目</title>
|
<link href="../libs/layui/css/layui.css" rel="stylesheet">
|
<link href="../assets/css/index.css" rel="stylesheet">
|
<link href="../libs/Cesium1.75/Widgets/widgets.css" rel="stylesheet">
|
|
<link href="../libs/Cesium1.75/dist/cesium-navigation.css" rel="stylesheet">
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_2599272_671fgrsk7ev.css">
|
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../libs/layui/layui.js"></script>
|
<script type="text/javascript" src="../assets/js/config.js"></script>
|
<script type="text/javascript" src="../assets/js/indexAI.js"></script>
|
<!--引入cesuim Js-->
|
<script src="../libs/Cesium1.75/Cesium.js"></script>
|
<script>
|
Cesium.defineProperties = Object.defineProperties;
|
</script>
|
<script src="../libs/Cesium1.75/dist/CesiumNavigation.umd.js"></script>
|
<script src="../assets/map/map.min.js"></script>
|
<script src="../assets/map/map3DGltf.js"></script>
|
<script src="../assets/map/map3Dtile.js"></script>
|
<script src="../assets/map/map3D.js"></script>
|
<script src="../libs/Cesiumplus/Cesium3DTileLocationEditor.js"></script>
|
|
<script>
|
var id;
|
var pickedModel;
|
var lng, lat;
|
var center;
|
var offx,offy,offz;
|
$(function () {
|
var url = window.location.href;
|
id = getUrlParam("id");
|
$.ajax({
|
type: "get",
|
async: false,
|
url: httpConfig.webApiUrl + "landstamp/front/3dtile?tilesId=" + id,
|
contentType: "application/json;charset=utf-8",
|
success: function (data) {
|
|
lng = data.lng;
|
lat = data.lat;
|
var url = httpConfig.nginxUrl + data.tilesUrl;
|
|
var x = data.tilesX == null ? 0 : data.tilesX;
|
var y = data.tilesY == null ? 0 : data.tilesY;
|
var z = data.tilesZ == null ? 0 : data.tilesZ;
|
var head = data.camHeading == null ? 0 : data.camHeading;
|
var pitch = data.camPitch == null ? -90 : data.camPitch;
|
var range = data.camPoi == null ? 1000 : data.camPoi;
|
var offsetLat = data.offsetLat == null ? 0 : data.offsetLat;
|
$("#modelX").val(x);
|
$("#modelY").val(y);
|
$("#modelZ").val(z);
|
$("#heading").val(head);
|
$("#pitch").val(pitch);
|
$("#range").val(range);
|
$("#offsetlat").val(offsetLat);
|
var options = {
|
"id": id,
|
"url": url,
|
"lng": lng,
|
"lat": lat,
|
"x": x,
|
"y": y,
|
"z": z
|
};
|
var tileset = add3dtiles(options);
|
|
// let flyPromise = viewer.camera.flyTo({
|
// duration: 3,
|
// destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat + offsetLat), range),
|
// orientation: {
|
// heading: Cesium.Math.toRadians(head), //绕垂直于地心的轴旋转
|
// pitch: Cesium.Math.toRadians(pitch), //绕纬度线旋转
|
// roll: Cesium.Math.toRadians(0) //绕经度线旋转
|
// },
|
|
// });
|
tileset._offsetx = x;
|
tileset._offsety = y;
|
tileset._offsetz = z;
|
offx = x;
|
offy = y;
|
offz = z;
|
tileset.readyPromise.then(function (tileset) {
|
viewer.zoomTo(tileset);
|
var tilesetLocationEditor = new Cesium3dTilesetLocationEditor(viewer, tileset);
|
center = tileset.boundingSphere.center.clone();
|
}).otherwise(function (error) {
|
console.log(error);
|
});
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
console.log("ajax请求失败！");
|
}
|
});
|
|
});
|
|
function getUrlParam(name) {
|
//构造一个含有目标参数的正则表达式对象
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
if (r != null) {
|
return unescape(r[2]);
|
} else {
|
return null; //返回参数值
|
}
|
}
|
|
function updateModel() {
|
|
var x = $("#modelX").val();
|
var y = $("#modelY").val();
|
var z = $("#modelZ").val();
|
//获取更新的参数
|
var params = {
|
"x": x,
|
"y": y,
|
"z": z
|
};
|
pickedModel = getprimitiveModel(id);
|
// update3dtilesMaxtrixByXYZ(pickedModel, params);
|
var a = center.clone();
|
a.x += Number(x-offx);
|
a.y += Number(y-offy);
|
// a.z += Number(z-offz);
|
var cartographic = Cesium.Cartographic.fromCartesian(a);
|
lng = Cesium.Math.toDegrees(cartographic.longitude);//经度值
|
lat = Cesium.Math.toDegrees(cartographic.latitude);//纬度值
|
var height = parseFloat(z);
|
console.log(lng, lat, height, a);
|
const cartographic2 = Cesium.Cartographic.fromCartesian(
|
center
|
);
|
const surface = Cesium.Cartesian3.fromRadians(
|
cartographic2.longitude,
|
cartographic2.latitude,
|
0.0
|
);
|
const offset = Cesium.Cartesian3.fromRadians(
|
cartographic.longitude,
|
cartographic.latitude,
|
height
|
);
|
const translation = Cesium.Cartesian3.subtract(
|
offset,
|
surface,
|
new Cesium.Cartesian3()
|
);
|
pickedModel.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
|
}
|
|
//保存参数
|
function save() {
|
|
var x = $("#modelX").val();
|
var y = $("#modelY").val();
|
var z = $("#modelZ").val();
|
var heading = $("#heading").val();
|
var pitch = $("#pitch").val();
|
var range = $("#range").val();
|
var offsetlat = $("#offsetlat").val();
|
var data = {
|
"tilesId": id,
|
"tilesX": x,
|
"tilesY": y,
|
"tilesZ": z,
|
"camHeading": heading,
|
"camPitch": pitch,
|
"camPoi": range,
|
"offsetLat": offsetlat
|
}
|
|
$.ajax({
|
type: "POST",
|
async: false,
|
url: httpConfig.webApiUrl + "landstamp/front/update3dtile2",
|
data: JSON.stringify(data),
|
contentType: "application/json;charset=utf-8",
|
success: function (data) {
|
layer.msg(data.msg);
|
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
console.log("ajax请求失败！");
|
}
|
});
|
|
}
|
|
//预览
|
function view() {
|
var x = $("#modelX").val();
|
var y = $("#modelY").val();
|
var z = $("#modelZ").val();
|
var heading = $("#heading").val();
|
var pitch = $("#pitch").val();
|
var range = $("#range").val();
|
var offsetlat = $("#offsetlat").val();
|
//获取更新的参数
|
var params = {
|
"x": x,
|
"y": y,
|
"z": z
|
};
|
updateModel();
|
var l = Number(lat) + Number(offsetlat);
|
console.log(l);
|
let flyPromise = viewer.camera.flyTo({
|
duration: 3,
|
destination: Cesium.Cartesian3.fromDegrees(Number(lng), Number(l), range),
|
orientation: {
|
heading: Cesium.Math.toRadians(heading), //绕垂直于地心的轴旋转
|
pitch: Cesium.Math.toRadians(pitch), //绕纬度线旋转
|
roll: Cesium.Math.toRadians(0) //绕经度线旋转
|
},
|
});
|
|
}
|
|
function showTerrain() {
|
var terrain = document.getElementById('terrain');
|
terrainshow(terrain.checked);
|
}
|
|
</script>
|
|
<style>
|
.model-offset {
|
width: 300px;
|
height: 400px;
|
position: fixed;
|
margin-top: 30px;
|
margin-left: 50px;
|
background-color: white;
|
opacity: 0.8;
|
}
|
|
.txtspan {
|
font-size: 14px;
|
margin-left: 10px;
|
}
|
|
.input {
|
height: 22px;
|
}
|
</style>
|
</head>
|
|
<body style="background-color: black;" onload="changeBaseLayer(0);">
|
<div class="layui-layout layui-layout-admin">
|
<!--地球面板-->
|
<div id="medium" class="medium-item" ondrop="drop(event)" ondragover="allowDrop(event)" style="left: 0px;">
|
</div>
|
</div>
|
|
<div class="model-offset">
|
<div class="layui-row" style="margin-top: 20px;">
|
<sapn style="margin-left: 10px; font-size: 15px;">
|
偏移设置
|
</sapn>
|
<span style="margin-left: 10px; font-size: 12px; color: red;">
|
(笛卡尔坐标系向量偏移)
|
</span>
|
</div>
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4">
|
<span class="txtspan">X方向：</span>
|
</div>
|
<div class="layui-col-md8">
|
<input id="modelX" class="input" type="number" step="0.5" value="0" onchange="updateModel()">
|
</div>
|
</div>
|
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4"> <span class="txtspan">Y方向：</span></div>
|
<div class="layui-col-md8">
|
<input id="modelY" class="input" type="number" step="0.5" value="0" onchange="updateModel()">
|
</div>
|
</div>
|
|
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4"><span class="txtspan">Z方向：</span></div>
|
<div class="layui-col-md8">
|
<input id="modelZ" class="input" type="number" value="0" onchange="updateModel()">
|
</div>
|
</div>
|
<div class="layui-row" style="margin-top: 10px;">
|
<sapn style="margin-left: 10px; font-size: 15px;">
|
视角参数
|
</sapn>
|
</div>
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4"><span class="txtspan">朝向角(度)：</span></div>
|
<div class="layui-col-md8">
|
<input id="heading" class="input" type="number" value="50" onchange="updateModel()">
|
</div>
|
</div>
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4"><span class="txtspan">翻滚角(度)：</span></div>
|
<div class="layui-col-md8">
|
<input id="pitch" class="input" type="number" value="-20" onchange="updateModel()">
|
</div>
|
</div>
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4"><span class="txtspan"> 范围(米)：</span></div>
|
<div class="layui-col-md8">
|
<input id="range" class="input" type="number" value="600" onchange="updateModel()">
|
</div>
|
</div>
|
|
<div class="layui-row" style="margin-top: 10px;">
|
<div class="layui-col-md4"><span class="txtspan"> 偏移(纬度)：</span></div>
|
<div class="layui-col-md8">
|
<input id="offsetlat" class="input" type="number" step="0.005" value="0" onchange="updateModel()">
|
</div>
|
</div>
|
|
<div class="layui-row" style="margin-top: 10px;">
|
<input id="terrain" style="margin-left: 10px; " type="checkbox" name="terrain" lay-skin="primary"
|
title="显示地形" checked="true" onclick="showTerrain()" /> 显示地形
|
</div>
|
<div class="layui-row" style="margin-top: 10px;">
|
<button onclick="save();" class="layui-btn layui-btn-primary layui-border layui-btn-sm"
|
style="margin-left: 34%;">保存</button>
|
<button onclick="view();" class="layui-btn layui-btn-primary layui-border layui-btn-sm"
|
style="margin-left: 1%;">预览</button>
|
</div>
|
|
</div>
|
</div>
|
|
<script src="../assets/js/ajax.js"></script>
|
<script>
|
//JS
|
layui.use(['element', 'layer', 'util'], function () {
|
var element = layui.element
|
, layer = layui.layer
|
, util = layui.util
|
, $ = layui.$;
|
});
|
</script>
|
|
</body>
|
|
</html>
|
