<%--
|
Created by IntelliJ IDEA.
|
User: Lenovo
|
Date: 2024/9/13
|
Time: 18:21
|
To change this template use File | Settings | File Templates.
|
--%>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<!-- 2017-12-7 14:56:03 | 修改 木遥（微信: http://marsgis.cn/weixin.html ） -->
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<!-- 标题及搜索关键字 -->
|
|
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon/favicon.ico" />
|
<title>贴模型表面漫游 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>
|
|
<script
|
type="text/javascript"
|
src="/hxzkuwb/Home/demo/lib/include-lib.js"
|
libpath="/hxzkuwb/Home/demo/lib/"
|
include="jquery,layer,toastr,font-awesome,bootstrap,bootstrap-checkbox,jquery.range,layer,haoutil,mars3d"
|
></script>
|
|
<link href="/hxzkuwb/Home/demo/css/style.css" rel="stylesheet" />
|
<style>
|
.mp_table {
|
width: 100%;
|
border: #cde1de 1px solid;
|
font-size: 12px;
|
border-collapse: collapse;
|
border-spacing: 0;
|
}
|
|
.mp_table tr td {
|
padding: 5px 5px;
|
text-align: left;
|
border: #cde1de 1px solid;
|
}
|
|
.mp_table tr td:first-child {
|
border-left: none;
|
}
|
|
.nametd {
|
width: 40%;
|
}
|
|
.mp_head2 {
|
width: 100%;
|
height: 45px;
|
line-height: 45px;
|
text-align: center;
|
}
|
|
.dark .progress {
|
margin: 0;
|
background-color: #0b2931;
|
}
|
</style>
|
</head>
|
|
<body class="dark">
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
<!-- 信息 面板 -->
|
<div class="infoview rightbottom" style="min-width: 200px">
|
<table class="mp_table">
|
<tr>
|
<td class="nametd">总长度</td>
|
<td id="td_alllength"></td>
|
</tr>
|
<tr>
|
<td class="nametd">已漫游长度</td>
|
<td id="td_length"></td>
|
</tr>
|
<tr>
|
<td class="nametd">总时长</td>
|
<td id="td_alltimes"></td>
|
</tr>
|
<tr>
|
<td class="nametd">已漫游时间</td>
|
<td id="td_times"></td>
|
</tr>
|
|
<tr>
|
<td class="nametd">经度</td>
|
<td id="td_jd"></td>
|
</tr>
|
<tr>
|
<td class="nametd">经度</td>
|
<td id="td_wd"></td>
|
</tr>
|
<tr>
|
<td class="nametd">漫游高程</td>
|
<td id="td_gd"></td>
|
</tr>
|
|
<tr>
|
<td colspan="2" style="width: 100%; text-align: center">
|
<div class="progress">
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
|
<script src="/hxzkuwb/Home/demo/js/common.js"></script>
|
|
<script type="text/javascript">
|
"use script"; // 开发环境建议开启严格模式
|
window.currentPath = "/example/graphic/custom/fixedRoute-ground-tileset/";// 当前示例的目录
|
|
|
var map // mars3d.Map三维地图对象
|
var eventTarget = new mars3d.BaseClass() // 事件对象，用于抛出事件到面板中
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
var mapOptions = {
|
scene: {
|
center: { lat: 33.588405, lng: 119.031988, alt: 336, heading: 359, pitch: -37 }
|
},
|
control: {
|
clockAnimate: true, // 时钟动画控制(左下角)
|
timeline: true, // 是否显示时间线控件
|
compass: { top: "10px", left: "5px" }
|
},
|
layers: [
|
{
|
name: "文庙",
|
type: "3dtiles",
|
url: "//data.mars3d.cn/3dtiles/qx-simiao/tileset.json",
|
position: { alt: 120 },
|
maximumScreenSpaceError: 2,
|
enableCollision: true,
|
flyTo: true,
|
show: true
|
}
|
]
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
map.toolbar.style.bottom = "55px" // 修改toolbar控件的样式
|
|
map.readyPromise.then(function () {
|
addRoamLine()
|
})
|
}
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
function onUnmounted() {
|
map = null
|
}
|
|
function addRoamLine() {
|
// 创建矢量数据图层
|
var graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
// 该数据可以从 基础项目 飞行漫游功能界面操作后单个路线的 保存JSON
|
var fixedRoute = new mars3d.graphic.FixedRoute({
|
name: "贴模型表面漫游",
|
speed: 60,
|
positions: [
|
[119.030216, 33.59167, 50.9],
|
[119.032637, 33.590768, 50.8]
|
],
|
camera: {
|
type: "gs",
|
heading: 0,
|
radius: 500
|
},
|
model: {
|
show: true,
|
url: "//data.mars3d.cn/gltf/mars/qiche.gltf",
|
scale: 0.1,
|
minimumPixelSize: 20
|
},
|
polyline: {
|
color: "#ffff00",
|
width: 3,
|
clampToGround: true,
|
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE
|
}
|
})
|
graphicLayer.addGraphic(fixedRoute)
|
|
// 绑定popup
|
bindPopup(fixedRoute)
|
|
|
|
// 不贴地时，直接开始
|
// startFly(fixedRoute)
|
|
// 需要计算贴地点时，异步计算完成贴地后再启动
|
// showLoading()
|
// fixedRoute.autoSurfaceHeight({ has3dtiles: true, splitNum: 10 }).then(function (e) {
|
// hideLoading()
|
startFly(fixedRoute)
|
// })
|
}
|
|
function startFly(fixedRoute) {
|
fixedRoute.start()
|
// fixedRoute.openPopup() // 显示popup
|
}
|
|
function bindPopup(fixedRoute) {
|
fixedRoute.bindPopup(
|
`<div style="width: 200px">
|
<div>总 距 离：<span id="lblAllLen"> </span></div>
|
<div>总 时 间：<span id="lblAllTime"> </span></div>
|
<div>开始时间：<span id="lblStartTime"> </span></div>
|
<div>剩余时间：<span id="lblRemainTime"> </span></div>
|
<div>剩余距离：<span id="lblRemainLen"> </span></div>
|
</div>`,
|
{ closeOnClick: false }
|
)
|
|
// 刷新局部DOM,不影响popup面板的其他控件操作
|
fixedRoute.on(mars3d.EventType.popupRender, function (event) {
|
var container = event.container // popup对应的DOM
|
|
var params = fixedRoute?.info
|
if (!params) {
|
return
|
}
|
|
var lblAllLen = container.querySelector("#lblAllLen")
|
if (lblAllLen) {
|
lblAllLen.innerHTML = mars3d.MeasureUtil.formatDistance(params.distance_all)
|
}
|
|
var lblAllTime = container.querySelector("#lblAllTime")
|
if (lblAllTime) {
|
lblAllTime.innerHTML = mars3d.Util.formatTime(params.second_all / map.clock.multiplier)
|
}
|
|
var lblStartTime = container.querySelector("#lblStartTime")
|
if (lblStartTime) {
|
lblStartTime.innerHTML = mars3d.Util.formatDate(Cesium.JulianDate.toDate(fixedRoute.startTime), "yyyy-M-d HH:mm:ss")
|
}
|
|
var lblRemainTime = container.querySelector("#lblRemainTime")
|
if (lblRemainTime) {
|
lblRemainTime.innerHTML = mars3d.Util.formatTime((params.second_all - params.second) / map.clock.multiplier)
|
}
|
|
var lblRemainLen = container.querySelector("#lblRemainLen")
|
if (lblRemainLen) {
|
lblRemainLen.innerHTML = mars3d.MeasureUtil.formatDistance(params.distance_all - params.distance) || "完成"
|
}
|
})
|
}
|
|
|
</script>
|
<script type="text/javascript">
|
"use script" //开发环境建议开启严格模式
|
</script>
|
</body>
|
</html>
|
