<!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="通感一体" />
|
<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" />
|
<!-- 标题及搜索关键字 -->
|
<link rel="stylesheet" href="./css/divGraphic.css">
|
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon/favicon.ico" />
|
<title>实时动态轨迹路线 </title>
|
|
<!--第三方lib-->
|
<script type="text/javascript" src="./lib/include-lib.js" libpath="./lib/"
|
include="jquery,layer,toastr,font-awesome,bootstrap,bootstrap-table,layer,haoutil,mars3d,es5-widget"></script>
|
<link href="./css/style.css" rel="stylesheet" />
|
<style>
|
.tg_title {
|
background-color: rgba(0, 0, 0, 0.3);
|
text-align: center;
|
font-size: 26px;
|
position: absolute;
|
top: 10px;
|
left: 20px;
|
}
|
|
.fixed-table-container tbody .selected td {
|
background-color: #3f4854a9;
|
}
|
|
#companySelectContainer,
|
#companySelectContainer2 {
|
position: fixed;
|
/* 或 absolute，取决于你的布局需求 */
|
top: 10px;
|
/* 根据需要调整位置 */
|
right: 10px;
|
/* 放置在右上角作为示例，你也可以选择其他位置 */
|
z-index: 1000;
|
/* 确保下拉框显示在其他元素之上 */
|
}
|
|
/* 下拉框样式 */
|
#companySelect {
|
/* 基本的样式 */
|
width: 130px;
|
/* 根据需要调整宽度 */
|
height: 30px;
|
/* 根据需要调整高度 */
|
padding: 5px;
|
/* 内边距，使文本不会紧贴边框 */
|
font-size: 16px;
|
/* 字体大小 */
|
color: #fff;
|
/* 文本颜色，这里使用白色作为示例 */
|
background-color: rgba(0, 0, 0, 0.5);
|
/* 背景色，半透明黑色，以适应深色背景 */
|
border: none;
|
/* 去除边框 */
|
border-radius: 5px;
|
/* 圆角 */
|
/* 其他可能需要的样式，如阴影等 */
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
}
|
|
/* 下拉框选项样式 */
|
#companySelect option {
|
background-color: #333;
|
color: #fff;
|
}
|
|
/* 如果需要高亮选中的选项 */
|
#companySelect option:checked {
|
background-color: #666;
|
/* 高亮颜色 */
|
}
|
</style>
|
</head>
|
|
<body class="dark">
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
<div class="tg_title">上海电信优维建通感展示平台</div>
|
<div id="companySelectContainer">
|
<form>
|
<label for="companySelect" style="width: 90px;">选择信号源:</label>
|
<select id="companySelect" name="company" onchange="handleSelectChange(event)">
|
<option value="ZTE" selected>中兴基站</option>
|
<option value="Huawei">华为基站</option>
|
</select>
|
</form>
|
</div>
|
<div id="companySelectContainer2">
|
<p>信号源：中兴基站</p>
|
</div>
|
|
<script src="./mqtttest.js"></script>
|
<script src="./js/common.js"></script>
|
|
|
<script type="text/javascript">
|
|
window.addEventListener('message', function (event) {
|
let data_lat = event.data.lat
|
let data_lng = event.data.lng
|
let data_alt = event.data.alt
|
let data_name = event.data.name
|
var radar_graphic
|
var layer_chuan = null
|
let data_heading = event.data.heading
|
let data_peatch = event.data.pitch
|
let object_id = event.data.object_id;
|
if (data_lat && data_lng && data_alt && data_heading && data_peatch) {
|
let cameraView = map.setCameraView({
|
"lat": data_lat, "lng": data_lng, "alt": data_alt, "heading": data_heading, "pitch": data_peatch
|
});
|
cameraView.then(function(){
|
let graphic = graphicLayer.getGraphicById(object_id);
|
if (graphic) {
|
setTimeout(function () {
|
graphic.openPopup();
|
graphic.fire(mars3d.EventType.click)
|
}, 3000)
|
}
|
});
|
}
|
if (data_name == 'dy') {
|
$('#companySelectContainer2').hide()
|
$('#companySelectContainer').show()
|
|
} else if (data_name == 'df') {
|
$('#companySelectContainer').hide()
|
$('#companySelectContainer2').show()
|
} else {
|
console.log("wrong")
|
}
|
}, false);
|
"use script"; // 开发环境建议开启严格模式
|
window.currentPath = "/example/graphic/custom/route/";// 当前示例的目录
|
var send_topic_all = ['dfAddTrack', 'dfAddObj', 'dfRemoveObj', 'uavAddTrack', 'uavAddObj', 'uavRemoveObj', 'hw_uavAddTrack', 'hw_uavAddObj', 'hw_uavRemoveObj']
|
var send_topic = ['dfAddTrack', 'dfAddObj', 'dfRemoveObj', 'uavAddTrack', 'uavAddObj', 'uavRemoveObj']
|
|
var lastClickCar = null
|
|
var currentIndex = 0
|
var bot_lat
|
var bot_lon
|
var bot_h
|
var zte_wrj = ['uavAddTrack', 'uavAddObj', 'uavRemoveObj']
|
var hw_wrj = ['hw_uavAddTrack', 'hw_uavAddObj', 'hw_uavRemoveObj']
|
// var client;
|
var map // mars3d.Map三维地图对象
|
var graphicLayer // 矢量图层对象
|
var defaultSkybox
|
var mqtt_data = null
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
var mapOptions = {
|
scene: {
|
center: {
|
lat: 31.087344,
|
lng: 121.479234,
|
alt: 800.9,
|
heading: 212.9,
|
pitch: -23
|
}
|
},
|
control: {
|
"sceneModePicker": false,
|
baseLayerPicker: false,
|
animation: false,
|
"compass": {
|
"bottom": "20px",
|
"right": "5px"
|
},
|
},
|
globe: {
|
depthTestAgainstTerrain: true // 不加无法投射到地形上
|
},
|
layers: [
|
{
|
type: "geojson",
|
name: "河流(面状)",
|
url: "./js/minhangriverbig.json",
|
symbol: {
|
type: "waterC",
|
styleOptions: {
|
height: 1, // 水面高度
|
normalMap: "./img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
frequency: 8000.0, // 控制波数的数字。
|
animationSpeed: 0.02, // 控制水的动画速度的数字。
|
amplitude: 5.0, // 控制水波振幅的数字。
|
specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
opacity: 0.6, // 透明度
|
clampToGround: true// 是否贴地
|
}
|
},
|
show: true
|
},
|
{
|
type: "geojson",
|
name: "河流杜丰(面状)",
|
url: "./js/chengyuan_river.json",
|
symbol: {
|
type: "waterC",
|
styleOptions: {
|
height: 1, // 水面高度
|
normalMap: "./img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
frequency: 8000.0, // 控制波数的数字。
|
animationSpeed: 0.02, // 控制水的动画速度的数字。
|
amplitude: 5.0, // 控制水波振幅的数字。
|
specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
opacity: 0.6, // 透明度
|
clampToGround: true// 是否贴地
|
}
|
},
|
show: true
|
}
|
]
|
}
|
// var wurenji_router
|
// 天空盒
|
const lantianSkybox = new mars3d.GroundSkyBox({
|
sources: {
|
positiveX: "./img/skybox_near/skybox/right.jpg",
|
negativeX: "./img/skybox_near/skybox/left.jpg",
|
positiveY: "./img/skybox_near/skybox/front.jpg",
|
negativeY: "./img/skybox_near/skybox/back.jpg",
|
positiveZ: "./img/skybox_near/skybox/005.jpg",
|
negativeZ: "./img/skybox_near/skybox/006.jpg"
|
}
|
})
|
var eventTarget = new mars3d.BaseClass()
|
const clientId = 'mqttjs_' + Math.random().toString(16).substring(2, 8)
|
var num = 0
|
const connectUrl = 'ws://192.168.0.78:8083/mqtt' //10.7.145.32
|
//const connectUrl = 'ws://10.5.226.22:8083/mqtt'
|
//const connectUrl = 'ws://172.16.2.62:8083/mqtt'
|
//const connectUrl = 'wss://broker.emqx.io:8084/mqtt'
|
function bindPopup(dd) {
|
dd.bindPopup(
|
`<div style="width: 200px">
|
<div>编号：<span id="">1234567 </span></div>
|
<div>纬度：<span id="lblRemainTime"> </span></div>
|
<div>经度：<span id="lblStartTime"></span></div
|
<div>速度：<span id="lblRemainLen"> </span></div>
|
</div>`,
|
{ closeOnClick: false }
|
)
|
|
// 刷新局部DOM,不影响popup面板的其他控件操作
|
dd.on(mars3d.EventType.postRender, function (event) {
|
const container = event.container // popup对应的DOM
|
|
const params = dd?.options
|
if (!params) {
|
return
|
}
|
})
|
}
|
const options = {
|
keepalive: 30,
|
clientId: clientId,
|
clean: true,
|
connectTimeout: 5000,
|
username: 'eadpoint',
|
password: '321123',
|
reconnectPeriod: 100000,
|
}
|
const topic = 'dfAddTrack'
|
const topic2 = 'dfRemoveObj'
|
const topic3 = 'dfAddObj'
|
const qos = 0
|
const client = mqtt.connect(connectUrl, options)
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
map.openFlyAnimation()
|
var graphicLayer_3d = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer_3d)
|
|
function mqt() {
|
client.on('error', (err) => {
|
console.log('Connection error: ', err)
|
// client.end()
|
})
|
client.on('reconnect', () => {
|
console.log('Reconnecting...')
|
})
|
client.on('connect', () => {
|
client.subscribe(send_topic, { qos }, (error) => {
|
if (error) {
|
console.log('Subscribe error:', error)
|
return
|
}
|
})
|
})
|
client.on('message', (topic, payload) => {
|
// let time_ =
|
let res_data = JSON.parse(payload.toString())
|
// if(topic === 'hw_uavAddTrack'||topic === 'hw_uavAddObj'){
|
// console.log(res_data,topic)
|
// }
|
|
if (topic == send_topic_all[0] || topic == send_topic_all[1]) {
|
|
var tableData = []
|
var listALL = [res_data] || []
|
listALL.forEach(r => {
|
tableData.push({ speed: r.speed, id: r.object_id, lng: r.lng, lat: r.lat, height: r.height, name: r.object_id, show: true, type: 1, direction: parseFloat(r.direction) })
|
})
|
eventTarget.fire("carList", { tableData })
|
|
showCarList(tableData, getColor())
|
var list = listALL.filter((item) => {
|
item.lng = parseFloat(item.lng);
|
item.lat = parseFloat(item.lat);
|
item.lon = parseFloat(item.lng);
|
item.id = item.object_id;
|
return true;
|
})
|
// eventTarget.fire("showPath", { path })
|
// 循环车辆
|
graphicLayer.eachGraphic((car) => {
|
|
var path = list.filter((item) => {
|
return item.id === car.id || item.id == item.id + '-speed'
|
})
|
path.forEach((item) => {
|
var point = new mars3d.LngLatPoint(item.lon, item.lat, 7)
|
car.addDynamicPosition(point, item.time)
|
car.label.setStyle({
|
text: `${(parseFloat(item.speed) / 0.514444).toFixed(2)}`
|
})
|
|
if (lastClickCar?.id == car.id) {
|
var a = document.querySelector('.mars3d-popup-content');
|
if (a) {
|
a.innerHTML = `<div style="width: 200px">
|
<div>目标: <span>${item.object_id}</span></div>
|
<div>经度: <span>${item.lng}</span></div>
|
<div>纬度: <span>${item.lat}</span></div>
|
<div>方向: <span>${(item.direction > 90 && item.direction < 270) ? '上行' : '下行'}</span></div>
|
<div>速度: <span style="color:${(parseFloat(item.speed) / 0.514444) > 8 ? 'red' : 'green'}" id="speed">${(parseFloat(item.speed) / 0.514444).toFixed(2)} </span>节</div>
|
</div>`
|
}
|
}
|
lastData[car.id] = item
|
|
})
|
})
|
} if (topic == send_topic_all[3] || topic == send_topic_all[4] || topic == send_topic_all[6] || topic == send_topic_all[7]) {
|
|
var tableData = []
|
var listALL = [res_data] || []
|
listALL.forEach(r => {
|
tableData.push({ speed: r.speed, id: r.object_id, lng: r.lng, lat: r.lat, height: r.height, name: r.object_id, show: true, type: 1, direction: parseFloat(r.direction) })
|
})
|
eventTarget.fire("carList", { tableData })
|
|
showWrjList(tableData, getColor())
|
var list = listALL.filter((item) => {
|
item.lng = parseFloat(item.lng);
|
item.lat = parseFloat(item.lat);
|
item.lon = parseFloat(item.lng);
|
item.id = item.object_id;
|
return true;
|
})
|
// eventTarget.fire("showPath", { path })
|
// 循环车辆
|
graphicLayer.eachGraphic((car) => {
|
// 取出对应车辆的轨迹列表
|
var path = list.filter((item) => {
|
return item.id === car.id
|
})
|
path.forEach((item) => {
|
var point = new mars3d.LngLatPoint(item.lon, item.lat, item.height)
|
car.addDynamicPosition(point, item.time)
|
console.log("yes")
|
car.label.setStyle({
|
text: `H:${item.height.toFixed(2)}\nV:${item.speed.toFixed(2)}`,
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT
|
})
|
if (lastClickCar?.id == car.id) {
|
var a = document.querySelector('.mars3d-popup-content');
|
if (a) {
|
a.innerHTML = `<div style="width: 200px">
|
<div>目标: <span>${item.object_id}</span></div>
|
<div>经度: <span>${item.lng}</span></div>
|
<div>纬度: <span>${item.lat}</span></div>
|
<div>高度: <span>${item.height}</span>m</div>
|
<div>速度: <span style="color:${item.speed > 80 ? 'red' : 'green'}" id="speed">${item.speed} </span>m/s</div>
|
</div>`
|
}
|
}
|
lastData[car.id] = item
|
})
|
})
|
} else if (topic == send_topic_all[2] || topic == send_topic_all[5] || topic == send_topic_all[8]) {
|
|
graphicLayer.eachGraphic((car) => {
|
if (car?._id == res_data.object_id) {
|
|
graphicLayer.removeGraphic(car)
|
console.log("remove")
|
}
|
|
})
|
}
|
})
|
|
}
|
|
defaultSkybox = map.scene.skyBox
|
currSkyBox = lantianSkybox
|
|
map.on(mars3d.EventType.postRender, function () {
|
const position = map.camera.position
|
const height = Cesium.Cartographic.fromCartesian(position).height
|
if (height < 230000) {
|
if (currSkyBox) {
|
map.scene.skyBox = currSkyBox
|
}
|
map.scene.skyAtmosphere.show = false
|
} else {
|
if (defaultSkybox) {
|
map.scene.skyBox = defaultSkybox
|
}
|
map.scene.skyAtmosphere.show = true
|
}
|
})
|
// 演示数据的时间
|
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date())
|
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer({ id: 'carLayer' })
|
map.addLayer(graphicLayer)
|
|
// 单击地图空白处
|
map.on(mars3d.EventType.clickMap, function (event) {
|
if (lastClickCar) {
|
lastClickCar.circle.show = false
|
lastClickCar = null
|
}
|
})
|
|
// 绑定点击事件
|
graphicLayer.on(mars3d.EventType.click, (event, position) => {
|
var car = event.graphic
|
console.log(event)
|
if (lastClickCar) {
|
if (lastClickCar === car) {
|
return
|
} // 重复单击，跳出
|
lastClickCar = null
|
|
}
|
lastClickCar = car
|
})
|
// 点击编辑弹出框中的删除按钮时，删除表格数据
|
graphicLayer.on("removeGraphic", (e) => {
|
eventTarget.fire("removeCar", { id: e.graphic.options.id })
|
})
|
mqt()
|
addDufeng(graphicLayer_3d)
|
addDufeng2(graphicLayer_3d)
|
addJizhan(graphicLayer_3d)
|
addJizhan2(graphicLayer_3d)
|
addJizhan3(graphicLayer_3d)
|
addJizhan4(graphicLayer_3d)
|
addShanghaiSatalite3DmodelLayer(map)
|
addlonghua(map)
|
addshibozhanguan(map)
|
addRandomGraphicByCount(graphicLayer_3d)
|
addRandomGraphicByCount2(graphicLayer_3d)
|
addRadarImg2(graphicLayer_3d)
|
addDFMZ(graphicLayer_3d)
|
//addShanghai3DmodelLayer(map)
|
addwurenji(map)
|
addShu(map)
|
//addXyzLayer(map)
|
// addDemoGraphic1(graphicLayer_3d)
|
// addDemoGraphic2(graphicLayer_3d)
|
// for(let i=0;i<guiji.length;i++){
|
// addPoint(graphicLayer_3d,[guiji[i]['lng'],guiji[i]['lat'],10])
|
// }
|
var layer_chuan
|
|
setInterval(function () {
|
let trans_data = JSON.parse(JSON.stringify(graphicLayer?._graphicList._array))
|
trans_data.forEach((a) => {
|
layer_chuan?.forEach((b) => {
|
if (a.id == b.id && a.type == "route") {
|
if (a.positions.length === b.positions.length) {
|
graphicLayer?.eachGraphic((car) => {
|
if (car?._id == a.id) {
|
graphicLayer.removeGraphic(car)
|
}
|
|
})
|
}
|
}
|
})
|
})
|
layer_chuan = JSON.parse(JSON.stringify(graphicLayer?._graphicList._array))
|
}, 10000)
|
// mockData()
|
}
|
|
function handleSelectChange(event) {
|
var selectedOption = event.target.value;
|
switch (selectedOption) {
|
case 'ZTE':
|
console.log('你选择了中兴', graphicLayer, client);
|
graphicLayer.eachGraphic((car) => {
|
graphicLayer.removeGraphic(car)
|
})
|
client.unsubscribe(hw_wrj, (error) => {
|
if (error) {
|
console.log('Unsubscribe error:', error);
|
} else {
|
console.log(`Successfully unsubscribed from topic: ${hw_wrj}`);
|
}
|
});
|
client.subscribe(zte_wrj, { qos }, (error) => {
|
if (error) {
|
console.log('Subscribe error:', error);
|
} else {
|
console.log(`Successfully subscribed to topic: ${zte_wrj}`);
|
}
|
});
|
|
// 在这里添加中兴相关的代码
|
break;
|
case 'Huawei':
|
console.log('你选择了华为', graphicLayer, client);
|
graphicLayer.eachGraphic((car) => {
|
graphicLayer.removeGraphic(car)
|
})
|
client.unsubscribe(zte_wrj, (error) => {
|
if (error) {
|
console.log('Unsubscribe error:', error);
|
} else {
|
console.log(`Successfully unsubscribed from topic: ${zte_wrj}`);
|
}
|
});
|
client.subscribe(hw_wrj, { qos }, (error) => {
|
if (error) {
|
console.log('Subscribe error:', error);
|
} else {
|
console.log(`Successfully subscribed to topic: ${hw_wrj}`);
|
}
|
});
|
break;
|
default:
|
console.log('未知选项');
|
}
|
}
|
function mockData() {
|
setInterval(function () {
|
if (num < data_len) {
|
addModel(guiji[num])
|
num++
|
}
|
}, 1000)
|
}
|
|
// addModel
|
function addModel(res_data) {
|
var tableData = []
|
var listALL = [res_data] || []
|
listALL.forEach(r => {
|
tableData.push({ speed: r.speed, id: r.object_id, lng: r.lng, lat: r.lat, height: r.height, name: r.object_id, show: true, type: 1, direction: parseFloat(r.direction) })
|
})
|
// eventTarget.fire("carList", { tableData })
|
|
var cars = [];
|
|
showCarList(tableData, getColor())
|
var list = listALL.filter((item) => {
|
item.lng = parseFloat(item.lng);
|
item.lat = parseFloat(item.lat);
|
item.lon = parseFloat(item.lng);
|
item.id = item.object_id;
|
return true;
|
})
|
|
graphicLayer.eachGraphic((car) => {
|
// 取出对应车辆的轨迹列表
|
var path = list.filter((item) => {
|
return item.id === car.id
|
})
|
path.forEach((item) => {
|
var point = new mars3d.LngLatPoint(item.lon, item.lat, item.height)
|
car.addDynamicPosition(point, item.time)
|
car.label.setStyle({
|
text: `${item.speed.toFixed(2)}`
|
})
|
// car.model.setStyle({
|
// heading:item
|
// })
|
|
if (lastClickCar?.id == car.id) {
|
var a = document.querySelector('.mars3d-popup-content');
|
if (a) {
|
a.innerHTML = `<div style="width: 200px">
|
<div>目标: <span>${item.object_id}</span></div>
|
<div>经度: <span>${item.lng}</span></div>
|
<div>纬度: <span>${item.lat}</span></div>
|
<div>高度: <span>${item.height}</span>m</div>
|
<div>速度: <span style="color:${item.speed > 80 ? 'red' : 'green'}" id="speed">${item.speed} </span>m/s</div>
|
</div>`
|
}
|
}
|
lastData[car.id] = item
|
|
})
|
})
|
}
|
|
|
|
// 在图层绑定Popup弹窗
|
function bindLayerPopup() {
|
graphicLayer.bindPopup(function (event) {
|
var attr = {}
|
attr["类型"] = event.graphic.type
|
attr["目标"] = event.graphic.options.id
|
var last = lastData[event.graphic.options.id];
|
console.info(event, last)
|
if (last) {
|
attr["经度"] = last.lng
|
attr["纬度"] = last.lat
|
attr["速度"] = last.fusDevID
|
}
|
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr })
|
})
|
}
|
|
|
/**
|
* 释放当前地图业务的生命周期函数
|
* @returns {void} 无
|
*/
|
function onUnmounted() {
|
map = null
|
}
|
|
var colors = [
|
"rgb(40, 40, 255)",
|
"rgb(0, 88, 176)",
|
"rgb(0, 128, 255)",
|
"rgb(0, 217, 0)",
|
"rgb(0, 151, 0)",
|
"rgb(255, 199, 83)",
|
"rgb(255, 144, 30)",
|
"rgb(202, 101, 0)",
|
"rgb(255, 0, 0)"
|
]
|
function getColor() {
|
return `rgb(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()})`
|
}
|
|
function getRandomNumber() {
|
return Math.floor(Math.random() * 256); // 生成0-255的随机数
|
}
|
function showCarList(arr, color) {
|
arr.forEach(r => {
|
colors.push(`rgb(${getRandomNumber()}, ${getRandomNumber()}, ${getRandomNumber()})`)
|
})
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i]
|
item.show = true
|
var modelParam
|
switch (item.type) {
|
case 1:
|
modelParam = {
|
fill: true,
|
color: 'white',
|
scale: 3,
|
heading: (item.direction > 90 && item.direction < 270) ? 90 : -90,
|
url: "model/chuan_baimo/chuan_baimo.gltf"
|
}
|
break
|
case 2:
|
modelParam = {
|
scale: 1,
|
url: "model/tufangche.glb"
|
}
|
break
|
default:
|
}
|
// let layer = map.getLayerById('carLayer');
|
if (graphicLayer.getGraphicById(item.id)) {
|
continue
|
}
|
var car = new mars3d.graphic.Route({
|
id: item.id,
|
name: '船舶',
|
alt: 0,
|
maxCacheCount: -1,
|
polyline: {
|
color: color,
|
width: 1,
|
clampToGround: false
|
},
|
model: {
|
...modelParam,
|
clampToGround: false
|
},
|
label: {
|
text: `${item.speed}`,
|
font_size: 15,
|
background: true,
|
backgroundColor: '#000000',
|
backgroundOpacity: 0.5,
|
backgroundPadding: 2,
|
pixelOffsetY: -10
|
// color:`${item.speed>8?"red":"green"}`
|
},
|
|
popup: `<div style="width: 200px">
|
<div>目标: <span>${item.id}</span></div>
|
<div>经度: <span>121.45356</span></div>
|
<div>纬度: <span>31.3549</span></div>
|
<div>方向: <span></span></div>
|
<div>速度: <span id="speed" style="color:'green'">0</span>节</div>
|
</div>`,
|
circle: {
|
radius: 50,
|
materialType: mars3d.MaterialType.CircleWave,
|
materialOptions: {
|
color: "#ffff00",
|
opacity: 0.3,
|
speed: 10,
|
count: 3,
|
gradient: 0.1
|
},
|
clampToGround: false,
|
show: false
|
},
|
attr: item
|
})
|
graphicLayer.addGraphic(car)
|
car.on(mars3d.EventType.click, function (e) {
|
if (e.target.options.camera) {
|
if (e.target.options.camera.type == "") {
|
e.target.setCameraOptions({
|
type: "gs",
|
|
heading: e.target.options.model.heading == 90 ? 180 : 0
|
})
|
} else {
|
e.target.setCameraOptions({})
|
}
|
} else {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: e.target.options.model.heading == 90 ? 180 : 0
|
})
|
}
|
})
|
|
}
|
}
|
function showWrjList(arr, color) {
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i]
|
item.show = true
|
var modelParam
|
switch (item.type) {
|
case 1:
|
modelParam = {
|
scale: 70,
|
color: 'red',
|
fill: true,
|
heading: 0,
|
url: "model/wrj_white_20240417_2/wrj_white_20240417.gltf"
|
}
|
break
|
case 2:
|
modelParam = {
|
scale: 1,
|
url: "model/tufangche.glb"
|
}
|
break
|
default:
|
}
|
// let layer = map.getLayerById('carLayer');
|
if (graphicLayer.getGraphicById(item.id)) {
|
continue
|
}
|
var car = new mars3d.graphic.Route({
|
id: item.id,
|
name: '无人机',
|
alt: 0,
|
maxCacheCount: -1,
|
polyline: {
|
color: color,
|
width: 2,
|
clampToGround: false
|
},
|
model: {
|
heading: 0,
|
pitch: 0,
|
roll: 0,
|
...modelParam,
|
clampToGround: false
|
},
|
label: {
|
text: `${item.speed}`,
|
font_size: 15,
|
background: true,
|
backgroundColor: '#000000',
|
backgroundOpacity: 0.5,
|
backgroundPadding: 2,
|
pixelOffsetY: -10
|
// color:`${item.speed>8?"red":"green"}`
|
},
|
popup: `<div style="width: 200px">
|
<div>目标: <span>${item.id}</span></div>
|
<div>经度: <span>121.45356</span></div>
|
<div>纬度: <span>31.3549</span></div>
|
<div>高度: <span>30</span>m</div>
|
<div>速度: <span id="speed">0</span>m/s</div>
|
</div>`,
|
circle: {
|
radius: 50,
|
materialType: mars3d.MaterialType.CircleWave,
|
materialOptions: {
|
color: "#ffff00",
|
opacity: 0.3,
|
speed: 10,
|
count: 3,
|
gradient: 0.1
|
},
|
clampToGround: false,
|
show: false
|
},
|
attr: item
|
})
|
graphicLayer.addGraphic(car)
|
car.on(mars3d.EventType.click, function (e) {
|
if (e.target.options.camera) {
|
if (e.target.options.camera.type == "") {
|
e.target.setCameraOptions({
|
type: "gs",
|
radius: 150,
|
// heading: e.target.options.model.heading==90?180:0
|
})
|
} else {
|
e.target.setCameraOptions({})
|
}
|
} else {
|
e.target.setCameraOptions({
|
type: "gs",
|
radius: 150,
|
// followedX:20,
|
// heading: e.target.options.model.heading==90?180:0
|
})
|
}
|
})
|
|
}
|
|
|
}
|
function addSpeedLabel(res_data) {
|
var speed_grapic = new mars3d.graphic.CanvasBillboard({
|
id: `${res_data.object_id}-speed`,
|
position: [res_data.lng, res_data.lat, 10],
|
style: {
|
text: res_data.speed,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scaleByDistance: new Cesium.NearFarScalar(800, 0.4, 1200, 0.2),
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000)
|
}
|
})
|
graphicLayer.addGraphic(speed_grapic)
|
}
|
// 取轨迹数据的时间间隔（单位：秒）
|
var timeStep = 1
|
var lastTime
|
|
// 首次获取并创建轨迹
|
function createPath() {
|
var date = Cesium.JulianDate.toDate(map.clock.currentTime)
|
var endTime = mars3d.Util.formatDate(date, "yyyy-MM-dd HH:mm:ss")
|
date.setSeconds(date.getSeconds() - 60)
|
map.clock.currentTime = window.Cesium.JulianDate.fromDate(new Date())
|
date.setMinutes(date.getMinutes() - 10) // 初次取一定时间内的数据
|
var beginTime = mars3d.Util.formatDate(date, "yyyy-MM-dd HH:mm:ss")
|
lastTime = endTime
|
|
|
// 定时更新
|
setInterval(() => {
|
updatePath()
|
}, timeStep * 1000)
|
}
|
|
// 后续更新轨迹
|
function updatePath() {
|
var beginTime = lastTime
|
|
var date = new Date(beginTime)
|
date.setSeconds(date.getSeconds() + timeStep)
|
var endTime = mars3d.Util.formatDate(date, "yyyy-MM-dd HH:mm:ss")
|
|
lastTime = endTime
|
|
}
|
|
//
|
var lastData = {}
|
|
// 加载本地瓦片
|
function addXyzLayer(map) {
|
tileLayer = new mars3d.layer.XyzLayer({
|
url: 'http://10.5.226.53:8088/tggz/img/wapian/wapian/{z}/{x}/{y}.jpg',
|
})
|
map.addLayer(tileLayer)
|
}
|
|
|
// 树模型
|
function addShu(map) {
|
layer_shu = new mars3d.layer.TilesetLayer({
|
name: "上海市建筑物",
|
url: "./model/shu_20240422/tileset.json",
|
fill: true,
|
position: {
|
lat: 31.065957,
|
lng: 121.4738,
|
alt: -1500
|
},
|
scale: 1500,
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true
|
})
|
map.addLayer(layer_shu)
|
const layer_shu2 = new mars3d.layer.TilesetLayer({
|
name: "上海市建筑物",
|
url: "./model/chenyuantree/tileset.json",
|
fill: true,
|
position: {
|
lat: 31.22,
|
lng: 121.5065,
|
alt: 10
|
},
|
heading: 95,
|
scale: 0.6,
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true
|
})
|
map.addLayer(layer_shu2)
|
}
|
|
function addShanghaiSatalite3DmodelLayer(map) {
|
layer_shanghai_tiles_210 = new mars3d.layer.TilesetLayer({
|
id: 210,
|
pid: 98,
|
name: "上海市卫星公司地图",
|
url: "./model/satalite_3dtiles/tileset.json",
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true,
|
flyTo: false
|
});
|
map.addLayer(layer_shanghai_tiles_210);
|
}
|
|
function addlonghua(map) {
|
var longhua_l = new mars3d.layer.TilesetLayer({
|
id: 210,
|
pid: 98,
|
name: "上海龙华",
|
url: "./model/longhua_3dtiles_l/tileset.json",
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true,
|
flyTo: false
|
});
|
var longhua_r = new mars3d.layer.TilesetLayer({
|
id: 210,
|
pid: 98,
|
name: "上海龙华 ",
|
url: "./model/longhua_3dtiles_r/tileset.json",
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true,
|
flyTo: false
|
});
|
map.addLayer(longhua_l)
|
map.addLayer(longhua_r)
|
}
|
|
function addshibozhanguan(map) {
|
var shibozhanguan = new mars3d.layer.TilesetLayer({
|
id: 210,
|
pid: 98,
|
name: "上海龙华",
|
url: "./model/shibo_3dtiles/tileset.json",
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true,
|
flyTo: false
|
});
|
map.addLayer(shibozhanguan)
|
}
|
|
// 上海市建筑物
|
function addShanghai3DmodelLayer(map) {
|
layer_shanghai_tiles_201 = new mars3d.layer.TilesetLayer({
|
name: "上海市建筑物",
|
url: "./js/building_shanghai/tiles/tileset.json",
|
fill: true,
|
color: "#ffffff",
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
popup: [
|
{ field: "poly_id", name: "编号" },
|
{ field: "comname", name: "小区名称" },
|
{ field: "rdname", name: "道路名称" },
|
{ field: "building_h", name: "楼高", unit: "米" }
|
],
|
show: true,
|
flyTo: false
|
})
|
map.addLayer(layer_shanghai_tiles_201)
|
let fragmentShader = `
|
varying vec3 v_positionEC;
|
uniform vec4 u_baseColorFactor;
|
|
void main(void){
|
vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
|
|
// 注意shader中写浮点数是，一定要带小数点，否则会报错，比如0需要写成0.0，1要写成1.0
|
float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
|
float _heightRange = 80.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
|
float _glowRange = 100.0; // 光环的移动范围(高度)
|
|
// 建筑基础色
|
float mars_height = position.z - _baseHeight;
|
float mars_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
|
float mars_a12 = mars_height / _heightRange + sin(mars_a11) * 0.1;
|
gl_FragColor = u_baseColorFactor; // 颜色
|
gl_FragColor *= vec4(vec3(mars_a12), 1.0);// 渐变
|
|
// 动态光环
|
float time = fract(czm_frameNumber / 360.0);
|
time = abs(time - 0.5) * 2.0;
|
float mars_h = clamp(mars_height / _glowRange, 0.0, 1.0);
|
float mars_diff = step(0.005, abs(mars_h - time));
|
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - mars_diff);
|
} `
|
|
//不改动cesium源码版本的建筑物样式
|
// layer_shanghai_tiles_201.setCustomShader(fragmentShader)
|
}
|
|
// 无人机建筑
|
function addwurenji(map) {
|
layer_wurenji = new mars3d.layer.TilesetLayer({
|
name: "无人机建筑",
|
url: "./model/wurenji_20240423_2/tileset.json",
|
fill: true,
|
position: {
|
lat: 30.834,
|
lng: 121.3473,
|
alt: -30
|
},
|
color: "#ffffff",
|
// scale:21,
|
scaleX: 22,
|
scaleY: 20,
|
scaleZ: 20,
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true
|
})
|
map.addLayer(layer_wurenji)
|
}
|
// 底图
|
|
// 添加摄像头
|
function addRandomGraphicByCount2(graphicLayer) {
|
const graphicImg = new mars3d.graphic.DivPlane({
|
position: [121.505931, 31.223616, 100],
|
style: {
|
scaleByDistance: true,
|
distanceDisplayCondition: true,
|
html: ` <div class="mars3d-camera-content">
|
<img class="mars3d-camera-img" src="img/icon/sxt.png" >
|
</div>
|
`,
|
offsetX: -16,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000)
|
},
|
})
|
graphicLayer.addGraphic(graphicImg)
|
graphicImg.on('click', function () {
|
map.setCameraView({
|
"lat": 31.225974, "lng": 121.504206, "alt": 214.6, "heading": 170.6, "pitch": -12.9
|
});
|
})
|
}
|
function addRandomGraphicByCount(graphicLayer) {
|
const graphicImg = new mars3d.graphic.DivPlane({
|
position: [121.475967, 31.065615, 100],
|
style: {
|
scaleByDistance: true,
|
distanceDisplayCondition: true,
|
html: ` <div class="mars3d-camera-content">
|
<img class="mars3d-camera-img" src="img/icon/sxt.png" >
|
</div>
|
`,
|
offsetX: -16,
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000)
|
},
|
// popup:`<div style="font-size:10px;margin:0px;padding:0px;"><span>站名：杜丰</span><br>
|
// <span>经度：121.475967</span><br><span>纬度：31.065613</span><br><span>站高：33</span><br><span>方向角：300</span><br><span>下倾角：3</span><br><span>AAU型号：A9835</span></div>`,
|
// popupOptions: {
|
// offsetY: 0, // 显示Popup的偏移值，是DivGraphic本身的像素高度值
|
// template: `<div class="marsBlackPanel animation-spaceInDown">
|
// <div class="marsBlackPanel-text">{content}</div>
|
// <span class="mars3d-popup-close-button closeButton" >×</span>
|
// </div>`,
|
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
// verticalOrigin: Cesium.VerticalOrigin.CENTER
|
// }
|
})
|
graphicLayer.addGraphic(graphicImg)
|
graphicImg.on('click', function () {
|
map.setCameraView({
|
"lat": 31.063125, "lng": 121.479408, "alt": 359.8, "heading": 314.1, "pitch": -20
|
});
|
})
|
}
|
function addJizhan4(graphic) {
|
const chengyuan = new mars3d.graphic.ModelEntity({
|
position: [121.505931, 31.223616, 14], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
// popup: `<div style="font-size:10px;margin:0px;padding:0px;"><span>站名：杜丰</span><br>
|
// <span>经度：121.475967</span><br><span>纬度：31.065613</span><br><span>站高：33</span><br><span>AAU：A9835</span><br><span>方向角：300</span><br><span>下倾角：3</span></div>`,
|
allowDrillPick: false
|
})
|
graphic.addGraphic(chengyuan)
|
}
|
function addJizhan(graphic) {
|
dou3 = new mars3d.graphic.ModelEntity({
|
position: [121.475967, 31.065615, 14], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
popup: `<div style="font-size:10px;margin:0px;padding:0px;"><span>站名：杜丰</span><br>
|
<span>经度：121.475967</span><br><span>纬度：31.065613</span><br><span>站高：33</span><br><span>AAU：A9835</span><br><span>方向角：300</span><br><span>下倾角：3</span></div>`,
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dou3)
|
}
|
function addJizhan3(graphic) {
|
dou31 = new mars3d.graphic.ModelEntity({
|
position: [121.3455, 30.83734, 0], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
popup: `<div style="font-size:10px;margin:0px;padding:0px;"><span>金铁定业</span><br>
|
<span>经度：121.346</span><br><span>纬度：30.8373</span><br><span>站高：33</span></div>`,
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dou31)
|
}
|
function addJizhan2(graphic) {
|
dou2 = new mars3d.graphic.ModelEntity({
|
position: [121.3445, 30.82945, 0], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
popup: `<div style="font-size:10px;margin:0px;padding:0px;"><span>站名：金铁卫天</span><br>
|
<span>经度：121.345</span><br><span>纬度：30.8294</span><br><span>站高：33</span></div>`,
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dou2)
|
}
|
function addDufeng(graphic) {
|
var dufeng = new mars3d.graphic.ModelEntity({
|
position: [121.4634, 31.059957, 0], // 楼栋位置
|
style: {
|
url: "./model/dufeng_20240422_l/dufeng_20240422_l.gltf",
|
scale: 1500,
|
heading: 85
|
},
|
poup: "<p>我是基站</p>",
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dufeng)
|
}
|
function addDufeng2(graphic) {
|
var dufeng2 = new mars3d.graphic.ModelEntity({
|
position: [121.4634, 31.059957, 0], // 楼栋位置
|
style: {
|
url: "./model/dufeng_20240422_r/dufeng_20240422_r.gltf",
|
scale: 1500,
|
heading: 85
|
},
|
poup: "<p>我是基站</p>",
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dufeng2)
|
}
|
function addRadarImg(graphic) {
|
radar_graphic = new mars3d.graphic.RectangleEntity({
|
positions:
|
[121.475967, 31.065615, 0],
|
style: {
|
height: 100,
|
image: "img/radarimg.png",
|
// rotation: new Cesium.CallbackProperty(getRotationValue, false),
|
// stRotation: new Cesium.CallbackProperty(getRotationValue, false)
|
},
|
attr: { remark: "示例3" }
|
})
|
graphic.addGraphic(radar_graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
function addRadarImg2(graphicLayer) {
|
radar_graphic = new mars3d.graphic.PlaneEntity({
|
position: new mars3d.LngLatPoint(121.472967, 31.069615, 0),
|
|
style: {
|
// opacity:0.1,
|
dimensions_x: 3900,
|
dimensions_y: 2500,
|
plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
|
// dimensions: new Cesium.Cartesian2(1000.0, 1000.0),
|
materialType: mars3d.MaterialType.Image2,
|
materialOptions: {
|
image: "img/radarimg.png",
|
opacity: 0.2,
|
transparent: true,
|
// color:Cesium.Color.WHITE
|
}
|
},
|
attr: { remark: "示例2" }
|
})
|
graphicLayer.addGraphic(radar_graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
|
}
|
|
function addPoint(graphicLayer, position) {
|
const graphic = new mars3d.graphic.PointEntity({
|
position: position,
|
style: {
|
color: "#ff0000",
|
pixelSize: 10,
|
outlineColor: "#ffffff",
|
outlineWidth: 2,
|
// label: {
|
// text: "我是原始点",
|
// font_size: 18,
|
// color: "#ffffff",
|
// pixelOffsetY: -10,
|
// distanceDisplayCondition: true,
|
// distanceDisplayCondition_far: 500000,
|
// distanceDisplayCondition_near: 0
|
// }
|
},
|
attr: { remark: "示例1" }
|
})
|
graphicLayer.addGraphic(graphic)
|
}
|
|
|
// 无人机
|
function startFly(fixedRoute) {
|
fixedRoute.start()
|
fixedRoute.openPopup() // 显示popup
|
}
|
|
// 节流
|
function throttled(fn, delay) {
|
let timer = null
|
let starttime = Date.now()
|
return function () {
|
const curTime = Date.now() // 当前时间
|
const remaining = delay - (curTime - starttime)
|
const context = this
|
// eslint-disable-next-line prefer-rest-params
|
const args = arguments
|
clearTimeout(timer)
|
if (remaining <= 0) {
|
fn.apply(context, args)
|
starttime = Date.now()
|
} else {
|
timer = setTimeout(fn, remaining)
|
}
|
}
|
}
|
function addDemoGraphic1(graphicLayer) {
|
const graphic_water = new mars3d.graphic.Water({
|
positions: [
|
[121.473019, 31.072769, 37.68],
|
[121.485766, 31.069808, 32.98],
|
[121.485598, 31.068748, 37.91],
|
[121.475094, 31.065492, 37.04]
|
],
|
style: {
|
height: 1, // 水面高度
|
normalMap: "./img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
frequency: 8000.0, // 控制波数的数字。
|
animationSpeed: 0.02, // 控制水的动画速度的数字。
|
amplitude: 5.0, // 控制水波振幅的数字。
|
specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
opacity: 0.6, // 透明度
|
clampToGround: false // 是否贴地
|
}
|
})
|
graphicLayer.addGraphic(graphic_water) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
|
}
|
function addDemoGraphic2(graphicLayer) {
|
const graphic_water = new mars3d.graphic.Water({
|
positions: [
|
[121.466686, 31.073524, 37.68],
|
[121.462413, 31.073134, 32.98],
|
[121.463624, 31.060163, 37.91],
|
[121.470839, 31.061241, 37.04]
|
],
|
style: {
|
height: 1, // 水面高度
|
normalMap: "./img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
frequency: 8000.0, // 控制波数的数字。
|
animationSpeed: 0.02, // 控制水的动画速度的数字。
|
amplitude: 5.0, // 控制水波振幅的数字。
|
specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
opacity: 0.6, // 透明度
|
clampToGround: false // 是否贴地
|
}
|
})
|
graphicLayer.addGraphic(graphic_water) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
|
}
|
|
function addDFMZ(graphic) {
|
const graphic1 = new mars3d.graphic.ModelEntity({
|
name: "东方明珠塔",
|
popup: "东方明珠塔",
|
position: [121.49514, 31.241809, 0],
|
style: {
|
url: "./model/dongfangmingzhu/scene.gltf",
|
scale: 0.07
|
|
}
|
})
|
graphic.addGraphic(graphic1)
|
const graphic2 = new mars3d.graphic.ModelEntity({
|
name: "三件套",
|
popup: "金茂大厦",
|
position: [121.5015, 31.235489, 0],
|
style: {
|
scale: 0.7,
|
heading: 120,
|
url: "./model/chengyuan/20240530_sanjiantao_1/20240530_sjt_1.gltf"
|
}
|
})
|
graphic.addGraphic(graphic2)
|
const graphic3 = new mars3d.graphic.ModelEntity({
|
name: "三件套",
|
popup: "中心大厦",
|
position: [121.5015, 31.235489, 0],
|
style: {
|
scale: 0.7,
|
heading: 120,
|
url: "./model/chengyuan/20240530_sanjiantao_2/20240530_sjt_2.gltf"
|
}
|
})
|
graphic.addGraphic(graphic3)
|
|
const graphic4 = new mars3d.graphic.ModelEntity({
|
name: "三件套",
|
popup: "环球金融中心",
|
position: [121.5015, 31.235489, 0],
|
style: {
|
scale: 0.7,
|
heading: 120,
|
url: "./model/chengyuan/20240530_sanjiantao_3/20240530_sjt_3.gltf"
|
}
|
})
|
graphic.addGraphic(graphic4)
|
const graphic5 = new mars3d.graphic.ModelEntity({
|
name: "晟苑",
|
popup: "晟苑",
|
position: [121.506, 31.219, 10],
|
style: {
|
scale: 0.6,
|
heading: 88,
|
url: "./model/20240607_chengyuan_3/chengyuan_1.gltf"
|
}
|
})
|
graphic.addGraphic(graphic5)
|
}
|
function getQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
|
var r = window.location.search.substr(1).match(reg)
|
if (r != null) {
|
return decodeURI(r[2])
|
}
|
return null
|
}
|
</script>
|
|
<script type="text/javascript">
|
"use script" //开发环境建议开启严格模式
|
function addLog(log) {
|
var logView = $("#logView")
|
var oldhtml = logView.html()
|
|
if (oldhtml.length < 500) {
|
logView.html(oldhtml + log + "<br />")
|
} else {
|
logView.html(log + "<br />")
|
}
|
}
|
|
|
|
|
</script>
|
<script src="./js/CanvasBillboard.js"></script>
|
</body>
|
|
</html>
|
