// import * as mars3d from "mars3d"
|
var array = []
|
ship3.slice(0,10).forEach(r => {
|
var d = JSON.parse(r.msgdata);
|
// var object = d.object;
|
d.forEach(o => {
|
// o.title = o.object_id + ', ' + o.speed + ', ' + new Date(o.ts * 1000).format('yyyy-MM-dd hh:mm:ss');
|
o.height = 0
|
array.push(o)
|
})
|
})
|
console.log(array)
|
$(document).ready(function () {
|
|
// console.log(ship1,"ship1")
|
// let ship_ = ship1.slice().reverse();
|
// console.log(ship_)
|
|
// // 处理你的数据
|
// });
|
// $.ajax({
|
// type:'get',
|
// dataType:'json',
|
// async:true,
|
// url:"/dataapi/get_radar_data",
|
// success:function(data){
|
// console.log(data.data.result[0].msgdata,"datadata")
|
// }})
|
})
|
|
|
var routeGraphic
|
var boat_arr = []
|
var boat_data = [{id:47244860072,name:"chuan1"},{id:22345,name:"chuan2"}]
|
var boatRoute
|
var car
|
var map // mars3d.Map三维地图对象
|
var wrj
|
let currSkyBox // 当前生效的Skybox
|
let defaultSkybox // cesium自带的Skybox
|
var eventTarget = new mars3d.BaseClass()
|
var fixedRoute
|
var fixedRoute_bot
|
var wurenji_router
|
var pointLight
|
let i = 0
|
var layer_shanghai_tiles_201
|
var layer_shanghai_tiles_202
|
var layer_shanghai_tiles_210
|
var tileLayer
|
var layer_ditu_tiles_202
|
var arr_arr = [121.467373, 31.064653, 20.1]
|
var bot_data = [
|
[121.5834958, 31.197868, 51.33],
|
[121.5835005, 31.19786088, 51.44],
|
[121.5835055, 31.19785332, 51.56],
|
[121.5835108, 31.19784543, 51.64],
|
[121.5835157, 31.19783796, 51.72],
|
[121.5835205, 31.1978302, 51.8],
|
[121.583525, 31.19782282, 51.92],
|
[121.5835294, 31.19781566, 52.03],
|
[121.5835342, 31.197808, 52.11],
|
[121.5835392, 31.19780004, 52.19],
|
[121.5835436, 31.19779238, 52.31],
|
[121.5835485, 31.19778475, 52.43],
|
[121.5835536, 31.19777683, 52.56],
|
[121.5835582, 31.19776916, 52.63],
|
[121.5835633, 31.19776132, 52.71],
|
[121.5835678, 31.19775377, 52.83],
|
[121.583573, 31.19774599, 52.91],
|
[121.5835778, 31.19773864, 53.03],
|
[121.5835826, 31.19773154, 53.14],
|
[121.5835875, 31.19772418, 53.22],
|
[121.5835926, 31.19771647, 53.34],
|
[121.5835975, 31.19770914, 53.45],
|
[121.5836023, 31.19770203, 53.52],
|
[121.5836073, 31.1976945, 53.64],
|
[121.5836128, 31.19768701, 53.72],
|
[121.5836177, 31.19767972, 53.84],
|
[121.5836229, 31.19767205, 53.95],
|
[121.5836282, 31.19766409, 54.03],
|
[121.5836328, 31.19765723, 54.14],
|
[121.5836374, 31.19765047, 54.25],
|
[121.583648, 31.19763398, 54.52]
|
]
|
var layer_wurenji
|
var bot_data2 = [
|
[121.5835633, 31.19776132, 52.71],
|
[121.5835678, 31.19775377, 52.83],
|
[121.583573, 31.19774599, 52.91],
|
[121.5835778, 31.19773864, 53.03],
|
[121.5835826, 31.19773154, 53.14],
|
[121.5834958, 31.197868, 51.33],
|
[121.5835005, 31.19786088, 51.44],
|
[121.5835055, 31.19785332, 51.56],
|
[121.5835108, 31.19784543, 51.64],
|
[121.5835157, 31.19783796, 51.72],
|
[121.5835205, 31.1978302, 51.8],
|
[121.583525, 31.19782282, 51.92],
|
[121.5835294, 31.19781566, 52.03],
|
[121.5835342, 31.197808, 52.11],
|
[121.5835392, 31.19780004, 52.19],
|
[121.5835436, 31.19779238, 52.31],
|
[121.5835485, 31.19778475, 52.43],
|
[121.5835536, 31.19777683, 52.56],
|
[121.5835582, 31.19776916, 52.63],
|
[121.5835875, 31.19772418, 53.22],
|
[121.5835926, 31.19771647, 53.34],
|
[121.5835975, 31.19770914, 53.45],
|
[121.5836023, 31.19770203, 53.52],
|
[121.5836073, 31.1976945, 53.64],
|
[121.5836128, 31.19768701, 53.72],
|
[121.5836177, 31.19767972, 53.84],
|
[121.5836229, 31.19767205, 53.95],
|
[121.5836282, 31.19766409, 54.03],
|
[121.5836328, 31.19765723, 54.14],
|
[121.5836374, 31.19765047, 54.25],
|
[121.583648, 31.19763398, 54.52]
|
]
|
// {"lat":30.77664,"lng":121.373504,"alt":3107.4,"heading":337.4,"pitch":-23}
|
var bot_lat
|
var bot_lon
|
var bot_h
|
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"
|
}
|
})
|
window.addEventListener('message', function(event) {
|
// fixedRoute.setCameraOptions()
|
// fixedRoute_bot.setCameraOptions()
|
wurenji_router.setCameraOptions()
|
let data_lat = event.data.lat
|
let data_lng = event.data.lng
|
let data_alt = event.data.alt
|
let data_heading = event.data.heading
|
let data_peatch = event.data.pitch
|
if(data_lat&&data_lng&&data_alt&&data_heading&&data_peatch){
|
console.log(map,"mapmapmapmap")
|
map.setCameraView({
|
"lat":data_lat,"lng":data_lng,"alt":data_alt,"heading":data_heading,"pitch":data_peatch
|
});
|
}
|
}, false);
|
function bindPopup(dd,data) {
|
dd.bindPopup(
|
`<div style="width: 200px">
|
<div>目标物<span id="lblAllTime">${data.object_id}</span></div>
|
<div>经度：<span id="lblStartTime">${data.lat}</span></div>
|
<div>纬度：<span id="lblRemainTime">${data.lng}</span></div>
|
<div style="color:red">速度<span id="speed"> </span></div>
|
</div>`,
|
{ closeOnClick: false }
|
)
|
}
|
// 每秒更换两次船舶位置
|
// 初始化索引
|
var currentIndex = 0
|
|
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
|
var mapOptions = {
|
scene: {
|
center: {
|
lat: 31.087344,
|
lng: 121.479234,
|
alt: 800.9,
|
heading: 212.9,
|
pitch: -23
|
}
|
},
|
control:{
|
baseLayerPicker:true,
|
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: false // 是否贴地
|
}
|
},
|
show: true
|
}
|
]
|
}
|
|
/**
|
* 初始化地图业务，生命周期钩子函数（必须）
|
* 框架在地图初始化完成后自动调用该函数
|
* @param {mars3d.Map} mapInstance 地图对象
|
* @returns {void} 无
|
*/
|
function onMounted(mapInstance) {
|
map = mapInstance // 记录map
|
//开场动画
|
map.openFlyAnimation()
|
|
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
|
}
|
})
|
// 创建矢量数据图层
|
var graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
var routeGraphic = new mars3d.layer.GraphicLayer()
|
map.addLayer(routeGraphic)
|
|
// 加一些演示数据
|
// addChengshi(graphicLayer)
|
// addDemoGraphic3(graphicLayer)
|
addJizhan(graphicLayer)
|
addJizhan2(graphicLayer)
|
addJizhan3(graphicLayer)
|
// addGraphicLayer(graphicLayer)
|
// addGraphicLayerBot(graphicLayer)
|
addGPwurenji(graphicLayer)
|
|
// addDemoGraphic2(graphicLayer)
|
// bindPopup(fixedRoute)
|
// bindPopup(fixedRoute_bot)
|
// bindPopup(wurenji_router,item)
|
addShanghai3DmodelLayer(map)
|
addShanghai3DmodelLayer2(map)
|
addShanghai3DmodelLayer3(map)
|
addXyzLayer(map)
|
addwurenji(map)
|
// graphicLayer.eachGraphic((car) => {
|
// console.log(car,"graphiclayer")
|
// })
|
// addDemoGraphic4(graphicLayer)
|
// 模拟请求数据的函数
|
function fetchData(array, chunkSize) {
|
const chunks = [];
|
for (let i = 0; i < array.length; i += chunkSize) {
|
chunks.push(array.slice(i, i + chunkSize));
|
}
|
return chunks.map((chunk, index) => {
|
// 使用Promise模拟异步请求
|
return new Promise(resolve => {
|
setTimeout(() => {
|
chunk.forEach((item) => {
|
|
if(boat_arr.indexOf(item.object_id)==-1){
|
addRoute_(routeGraphic,item)
|
// bindPopup(car,item)
|
boat_arr.push(item.object_id)
|
}else{
|
routeGraphic.eachGraphic((car) => {
|
// console.log(car,"carcarcar")
|
if(item.object_id == car._id){
|
const point = new mars3d.LngLatPoint(item.lng, item.lat, 0)
|
car.addDynamicPosition(point, item.time)
|
bindPopup(car,item)
|
var a = document.querySelector('.mars3d-popup-content');
|
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 style="color:red" id="speed">${(item.speed/0.514444).toFixed(2)} </span>节</div>
|
</div>`)
|
}
|
})
|
}
|
})
|
resolve(chunk);
|
}, 500 * (index + 1)); // 模拟每次请求之间的延迟
|
});
|
})
|
}
|
|
// 使用函数并每次请求100条数据
|
const fetchPromises = fetchData(array, 1);
|
|
// 执行所有请求并处理结果
|
Promise.all(fetchPromises).then(chunks => {
|
console.log('All data fetched!');
|
// chunks现在是一个数组，包含了所有的数据块，每个数据块有100条数据
|
// 你可以在这里处理这些数据块
|
}).catch(error => {
|
console.error('An error occurred:', error);
|
});
|
}
|
|
// 加载本地瓦片
|
function addXyzLayer(map){
|
tileLayer = new mars3d.layer.XyzLayer({
|
url: 'img/wapian/wapian/{z}/{x}/{y}.jpg',
|
})
|
map.addLayer(tileLayer)
|
}
|
|
|
function centerAtDX3() {
|
map.setCameraView({
|
"lat":30.77664,"lng":121.373504,"alt":3107.4,"heading":337.4,"pitch":-23
|
});
|
}
|
function centerAtDX2() {
|
map.setCameraView({
|
lat: 31.087344,
|
lng: 121.479234,
|
alt: 800.9,
|
heading: 212.9,
|
pitch: -23
|
});
|
}
|
// 水面
|
function addDemoGraphic3(graphicLayer) {
|
const graphic = new mars3d.graphic.PolygonEntity({
|
positions: [
|
[121.463966, 31.090312, 24],
|
[121.468902, 31.089871, 16.2],
|
[121.468098, 31.089934, 24],
|
[121.477469, 31.057309, 24],
|
[121.473565, 31.055879, 24],
|
[121.468623, 31.066841, 24]
|
],
|
style: {
|
materialType: mars3d.MaterialType.Water,
|
materialOptions: {
|
height: 47, // 水面高度
|
normalMap: "./img/textures/waterNormals.jpg", // 水正常扰动的法线图
|
frequency: 8000.0, // 控制波数的数字。
|
animationSpeed: 0.2, // 控制水的动画速度的数字。
|
amplitude: 5.0, // 控制水波振幅的数字。
|
specularIntensity: 0.8, // 控制镜面反射强度的数字。
|
baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
|
blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
|
opacity: 1 // 透明度
|
},
|
clampToGround: true
|
},
|
attr: { remark: "示例3" }
|
})
|
graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
// 基站
|
function addJizhan(graphic) {
|
var dou3 = new mars3d.graphic.ModelEntity({
|
position: [121.475967, 31.065615, 14], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
poup: "<p>我是基站</p>",
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dou3)
|
}
|
function addJizhan3(graphic) {
|
var dou31 = new mars3d.graphic.ModelEntity({
|
position: [121.35552869711414, 30.833344373033466,40], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
poup: "<p>我是基站</p>",
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dou31)
|
}
|
function addJizhan2(graphic) {
|
var dou2 = new mars3d.graphic.ModelEntity({
|
position: [121.3565434886248, 30.84122335627239,40], // 楼栋位置
|
style: {
|
url: "./model/Jizhan2/Jizhan2.gltf",
|
scale: 5
|
},
|
poup: "<p>我是基站</p>",
|
allowDrillPick: false
|
})
|
graphic.addGraphic(dou2)
|
}
|
// 城市模型
|
function addChengshi(graphic) {
|
var chengshi = new mars3d.graphic.ModelEntity({
|
position: [121.462767, 31.060615, 8], // 楼栋位置
|
style: {
|
url: "./model/dimian_zhiwu/dimian_zhiwu.gltf",
|
scale: 1500,
|
heading: 87
|
},
|
fill: true,
|
poup: "<p>我是城市</p>",
|
allowDrillPick: false
|
})
|
graphic.addGraphic(chengshi)
|
}
|
// 上海市建筑物
|
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 addShanghai3DmodelLayer2(map) {
|
layer_shanghai_tiles_202 = new mars3d.layer.TilesetLayer({
|
name: "上海市建筑物",
|
url: "./model/3dtl7/tileset.json",
|
fill: true,
|
color: "#ffffff",
|
position: {
|
lng: 121.470805,
|
lat: 31.065857,
|
alt: 10
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true
|
})
|
map.addLayer(layer_shanghai_tiles_202)
|
}
|
// 无人机建筑
|
function addwurenji(map) {
|
layer_wurenji = new mars3d.layer.TilesetLayer({
|
name: "上海市建筑物",
|
url: "./model/wurenji_240412/tileset.json",
|
fill: true,
|
position: {
|
lat:30.829984,
|
lng:121.348925,
|
},
|
color: "#ffffff",
|
scale:70,
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: { type: "click", color: "#FFFF00" },
|
show: true
|
})
|
map.addLayer(layer_wurenji)
|
}
|
// 底图
|
function addShanghai3DmodelLayer3(map) {
|
layer_ditu_tiles_202 = new mars3d.layer.TilesetLayer({
|
name: "地面",
|
url: "./model/hedao_240411_1/tileset.json",
|
scale: 1500,
|
// fill: true,
|
// color: "#ffffff",
|
rotation: {
|
z: 352
|
},
|
position: {
|
lng: 121.474505,
|
lat: 31.065857,
|
alt: -1500
|
},
|
show: true
|
})
|
map.addLayer(layer_ditu_tiles_202)
|
}
|
// 船舶漫游
|
function addGraphicLayer(graphicLayer) {
|
fixedRoute = new mars3d.graphic.FixedRoute({
|
name: "贴地表表面漫游",
|
speed: 60,
|
positions: [
|
[121.469206, 31.078069, 20],
|
[121.474091, 31.060808, 20],
|
[121.469206, 31.078069, 20]
|
],
|
clockLoop: true, // 是否循环播放
|
model: {
|
url: "./model/chuan_baimo/chuan_baimo.gltf",
|
// heading: 90,
|
scale: 5,
|
heading: 5,
|
fill: true,
|
mergeOrientation: true // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值
|
// minimumPixelSize: 50
|
},
|
highlight: { type: "click", color: "#FFFF00" }
|
})
|
graphicLayer.addGraphic(fixedRoute)
|
|
fixedRoute.on(mars3d.EventType.start, function (event) {
|
console.log("漫游开始start")
|
})
|
fixedRoute.on(mars3d.EventType.end, function (event) {
|
console.log("漫游结束end")
|
})
|
// ui面板信息展示
|
fixedRoute.on(mars3d.EventType.change, (event) => {
|
// const popup = event.graphic.getPopup()
|
// const container = popup?.container // popup对应的DOM
|
|
// console.log("漫游change", event)
|
throttled(eventTarget.fire("roamLineChange", event), 500)
|
})
|
// 刷新局部DOM,不影响popup面板的其他控件操作
|
fixedRoute.on(mars3d.EventType.postRender, function (event) {
|
// 设置定时器，每秒执行一次
|
var intervalId = setInterval(() => {
|
// 输出当前元素
|
bot_h = bot_data[currentIndex][2]
|
bot_lon = bot_data[currentIndex][0]
|
bot_lat = bot_data[currentIndex][1]
|
// 索引加2，如果超出数组长度，则回到开头
|
currentIndex = (currentIndex + 2) % bot_data.length
|
}, 1000) // 1000毫秒 = 1秒
|
var container = event.container // popup对应的DOM
|
var lblAllTime = container.querySelector("#lblAllTime")
|
var lblRemainLen = container.querySelector("#lblRemainLen")
|
var lblRemainTime = container.querySelector("#lblRemainTime")
|
var lblStartTime = container.querySelector("#lblStartTime")
|
lblStartTime.innerHTML = bot_lon
|
lblRemainTime.innerHTML = bot_lat
|
lblRemainLen.innerHTML = bot_h
|
})
|
fixedRoute.on("click", function (e) {
|
if (e.target.options.camera) {
|
if (e.target.options.camera.type == "") {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
} else {
|
e.target.setCameraOptions({})
|
}
|
} else {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
}
|
})
|
|
map.on(mars3d.EventType.keydown, function (event) {
|
// 空格 切换暂停/继续
|
if (event.keyCode === 32) {
|
if (fixedRoute.isPause) {
|
fixedRoute.proceed()
|
} else {
|
fixedRoute.pause()
|
}
|
}
|
})
|
// 不贴地时，直接开始
|
startFly(fixedRoute)
|
|
// 需要计算贴地点时，异步计算完成贴地后再启动
|
// showLoading()
|
// fixedRoute.autoSurfaceHeight().then(function (e) {
|
// hideLoading()
|
// startFly(fixedRoute)
|
// })
|
}
|
function addGraphicLayerBot(graphicLayer) {
|
fixedRoute_bot = new mars3d.graphic.FixedRoute({
|
name: "贴地表表面漫游",
|
speed: 60,
|
positions: [
|
[121.474091, 31.060808, 20],
|
[121.469206, 31.078069, 20],
|
[121.469206, 31.078069, 20]
|
],
|
clockLoop: true, // 是否循环播放
|
model: {
|
url: "./model/chuan_baimo/chuan_baimo.gltf",
|
// heading: 90,
|
scale: 5,
|
heading: 15,
|
fill: true,
|
color:'#000000',
|
mergeOrientation: true // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值
|
// minimumPixelSize: 50
|
},
|
highlight: { type: "click", color: "#FFFF00" }
|
})
|
graphicLayer.addGraphic(fixedRoute_bot)
|
|
fixedRoute_bot.on(mars3d.EventType.start, function (event) {
|
console.log("漫游开始start")
|
})
|
fixedRoute_bot.on(mars3d.EventType.end, function (event) {
|
console.log("漫游结束end")
|
})
|
// ui面板信息展示
|
fixedRoute_bot.on(mars3d.EventType.change, (event) => {
|
// const popup = event.graphic.getPopup()
|
// const container = popup?.container // popup对应的DOM
|
|
// console.log("漫游change", event)
|
throttled(eventTarget.fire("roamLineChange", event), 500)
|
})
|
// 刷新局部DOM,不影响popup面板的其他控件操作
|
fixedRoute_bot.on(mars3d.EventType.postRender, function (event) {
|
// 设置定时器，每秒执行一次
|
var intervalId = setInterval(() => {
|
// 输出当前元素
|
bot_h = bot_data2[currentIndex][2]
|
bot_lon = bot_data2[currentIndex][0]
|
bot_lat = bot_data2[currentIndex][1]
|
// 索引加2，如果超出数组长度，则回到开头
|
currentIndex = (currentIndex + 2) % bot_data2.length
|
}, 1000) // 1000毫秒 = 1秒
|
var container = event.container // popup对应的DOM
|
var lblAllTime = container.querySelector("#lblAllTime")
|
var lblRemainLen = container.querySelector("#lblRemainLen")
|
var lblRemainTime = container.querySelector("#lblRemainTime")
|
var lblStartTime = container.querySelector("#lblStartTime")
|
lblStartTime.innerHTML = bot_lon
|
lblRemainTime.innerHTML = bot_lat
|
lblRemainLen.innerHTML = bot_h
|
})
|
fixedRoute_bot.on("click", function (e) {
|
if (e.target.options.camera) {
|
if (e.target.options.camera.type == "") {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
} else {
|
e.target.setCameraOptions({})
|
}
|
} else {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
}
|
})
|
|
map.on(mars3d.EventType.keydown, function (event) {
|
// 空格 切换暂停/继续
|
if (event.keyCode === 32) {
|
if (fixedRoute_bot.isPause) {
|
fixedRoute_bot.proceed()
|
} else {
|
fixedRoute_bot.pause()
|
}
|
}
|
})
|
// 不贴地时，直接开始
|
startFly(fixedRoute_bot)
|
|
// 需要计算贴地点时，异步计算完成贴地后再启动
|
// showLoading()
|
// fixedRoute_bot.autoSurfaceHeight().then(function (e) {
|
// hideLoading()
|
// startFly(fixedRoute_bot)
|
// })
|
}
|
|
// 增加路径图层
|
|
function addRoute_(graphicLayer,data){
|
car = new mars3d.graphic.Route({
|
id: data.object_id,
|
name: 'chuan',
|
// maxCacheCount: -1,
|
polyline: {
|
color: "red",
|
width: 2,
|
clampToGround: true,
|
maxDistance: 500
|
},
|
model: {
|
url: "./model/chuan_baimo/chuan_baimo.gltf",
|
heading: 90,
|
scale: 5,
|
clampToGround: true
|
},
|
// poup: `<div style="width: 200px">
|
// <div>目标：<span id="lblAllTime">${data.object_id}</span></div>
|
// <div>经度：<span id="lblStartTime">${data.lat}</span></div>
|
// <div>纬度：<span id="lblRemainTime">${data.lng}</span></div>
|
// <div style="color:red">速度<span id="speed"> </span></div>
|
// </div>`,
|
circle: {
|
radius: 50,
|
materialType: mars3d.MaterialType.CircleWave,
|
materialOptions: {
|
color: "#ffff00",
|
opacity: 0.3,
|
speed: 0.3,
|
count: 3,
|
gradient: 0.1
|
},
|
clampToGround: true,
|
show: false
|
},
|
// attr: data
|
})
|
graphicLayer.addGraphic(car)
|
car.on("click", function (e) {
|
|
console.log(e)
|
if (e.target.options.camera) {
|
if (e.target.options.camera.type == "") {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
} else {
|
e.target.setCameraOptions({})
|
}
|
} else {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
}
|
})
|
|
// car.on(mars3d.EventType.change,function(event){
|
// bindPopup(car)
|
// })
|
}
|
// 无人机
|
function addGPwurenji(graphicLayer) {
|
wurenji_router = new mars3d.graphic.FixedRoute({
|
name: "贴地表表面漫游",
|
speed: 60,
|
positions: [
|
[121.368995,30.8469,184.3],
|
[121.371365,30.835295,168.2],
|
[121.353728,30.833205,167.8],
|
],
|
clockLoop: true, // 是否循环播放
|
model: {
|
url: "./model/wrj_white_20240417_2/wrj_white_20240417.gltf",
|
|
scale: 200,
|
heading: 5,
|
color:'red',
|
fill:true,
|
shadows:Cesium.ShadowMode.ENABLED,
|
colorBlendMode:Cesium.ColorBlendMode.HIGHLIGHT,
|
colorBlendAmountEnabled : true ,
|
colorBlendAmount:0.8,
|
mergeOrientation: true // 用于设置模型不是标准的方向时的纠偏处理,在orientation基础的方式值上加上设置是heading值
|
// minimumPixelSize: 50
|
},
|
highlight: { type: "click", color: "#FFFF00" }
|
})
|
graphicLayer.addGraphic(wurenji_router)
|
|
wurenji_router.on(mars3d.EventType.start, function (event) {
|
console.log("漫游开始start")
|
})
|
wurenji_router.on(mars3d.EventType.end, function (event) {
|
console.log("漫游结束end")
|
})
|
// ui面板信息展示
|
wurenji_router.on(mars3d.EventType.change, (event) => {
|
// const popup = event.graphic.getPopup()
|
// const container = popup?.container // popup对应的DOM
|
|
// console.log("漫游change", event)
|
throttled(eventTarget.fire("roamLineChange", event), 500)
|
})
|
// 刷新局部DOM,不影响popup面板的其他控件操作
|
wurenji_router.on(mars3d.EventType.postRender, function (event) {
|
// 设置定时器，每秒执行一次
|
var intervalId = setInterval(() => {
|
// 输出当前元素
|
bot_h = bot_data[currentIndex][2]
|
bot_lon = bot_data[currentIndex][0]
|
bot_lat = bot_data[currentIndex][1]
|
// 索引加2，如果超出数组长度，则回到开头
|
currentIndex = (currentIndex + 2) % bot_data.length
|
}, 1000) // 1000毫秒 = 1秒
|
var container = event.container // popup对应的DOM
|
var lblAllTime = container.querySelector("#lblAllTime")
|
var lblRemainLen = container.querySelector("#lblRemainLen")
|
var lblRemainTime = container.querySelector("#lblRemainTime")
|
var lblStartTime = container.querySelector("#lblStartTime")
|
lblStartTime.innerHTML = bot_lon
|
lblRemainTime.innerHTML = bot_lat
|
lblRemainLen.innerHTML = bot_h
|
})
|
wurenji_router.on("click", function (e) {
|
console.log(e)
|
if (e.target.options.camera) {
|
if (e.target.options.camera.type == "") {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
} else {
|
e.target.setCameraOptions({})
|
}
|
} else {
|
e.target.setCameraOptions({
|
type: "gs",
|
heading: 170
|
})
|
}
|
})
|
|
map.on(mars3d.EventType.keydown, function (event) {
|
// 空格 切换暂停/继续
|
if (event.keyCode === 32) {
|
if (fixedRoute.isPause) {
|
fixedRoute.proceed()
|
} else {
|
fixedRoute.pause()
|
}
|
}
|
})
|
// 不贴地时，直接开始
|
startFly(wurenji_router)
|
|
|
}
|
|
|
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 addDemoGraphic2(graphicLayer) {
|
pointLight = new mars3d.graphic.PointLight({
|
position: [121.460797, 31.050615, 58],
|
style: {
|
color: "#ffffff",
|
intensity: 300000,
|
radius: 20000
|
}
|
})
|
graphicLayer.addGraphic(pointLight)
|
}
|
|
function addDemoGraphic4(graphicLayer) {
|
pointLight = new mars3d.graphic.PointLight({
|
position: [121.460787, 31.055615, 58],
|
style: {
|
color: "#ffffff",
|
intensity: 30000,
|
radius: 2000
|
}
|
})
|
graphicLayer.addGraphic(pointLight)
|
}
|
|
|
|
// 读取车辆gps坐标路径的接口
|
function getPathList(array) {
|
|
// 循环车辆
|
routeGraphic.eachGraphic((car) => {
|
// 取出对应车辆的轨迹列表
|
const path = array.filter((item) => {
|
return item.id === car.id
|
})
|
|
path.forEach((item) => {
|
console.log(item)
|
const point = new mars3d.LngLatPoint(item.lon, item.lat, 0)
|
car.addDynamicPosition(point, item.time)
|
})
|
})
|
}
|
