<template>
|
<view>
|
<u-search v-show="show" class="searchbg" shape="true" bg-color="rgba(255, 255, 255, 0.5)" placeholder="请输入名称"
|
:show-action="false" v-model="keyword" @search="searchxinxi"
|
:style="{top: topheight+'px',position: 'absolute',width: '50%',left: '25%'}"></u-search>
|
<!-- #ifdef APP-PLUS || H5 -->
|
<u-button @click="guiji" icon="../../static/guiji.png"
|
style=" border-color: #5b5b5b;background-color: rgba(115, 115, 115, 0.5); width: 31px;height: 31px; position:absolute;top: 65%; left:15px;z-index: 999999999999999;"></u-button>
|
|
<u-button @click="zoom" icon="../../static/zoom.png"
|
style=" border-color: #5b5b5b;background-color: rgba(115, 115, 115, 0.5); width: 31px;height: 31px; position:absolute;top: 70%; left:15px;z-index: 999999999999999;"></u-button>
|
|
<u-modal style="position: absolute;z-index: 99999999999999;" buttonReverse confirmText="开始" :cancelText="cancelText" :show="guijishow" @cancel="stopguiji"
|
@confirm="startguiji" ref="uModal" :showCancelButton="true" :closeOnClickOverlay="true">
|
<u-icon name="close" style="position: absolute;right: 10px;top:10px" @click="closemodal"></u-icon>
|
<u--form style="" labelPosition="left" :model="model" :rules="rules2" ref="uForm">
|
<u-form-item required label="设备名称:" prop="name" borderBottom ref="item1" labelWidth="80px">
|
<u--input v-model="model.name" border="none" placeholder="请输入设备名称"></u--input>
|
</u-form-item>
|
<u-form-item required label="播放速度:" prop="sudu" borderBottom ref="item1" labelWidth="80px">
|
<uni-data-select style="height: 40px;" placeholder="选择速度" v-model="model.sudu"
|
:localdata="range"></uni-data-select>
|
|
</u-form-item>
|
<u-form-item required label="快速选择:" prop="time" borderBottom ref="item1" labelWidth="80px">
|
<u-radio-group v-model="model.time" placement="row">
|
<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in radiolist1" :key="index"
|
:label="item.name" :name="item.name" @change="radioChange">
|
</u-radio>
|
</u-radio-group>
|
</u-form-item>
|
|
<u-form-item required label="开始时间:" prop="start" borderBottom ref="item1" labelWidth="80px">
|
<uni-datetime-picker type="datetime" v-model="model.start" />
|
</u-form-item>
|
<u-form-item required label="结束时间:" prop="stop" borderBottom ref="item1" labelWidth="80px">
|
<uni-datetime-picker type="datetime" v-model="model.stop" />
|
</u-form-item>
|
</u--form>
|
</u-modal>
|
<div id="mars3dContainer" class="mars3d-container" :amapPoints='amapPoints' :change:amapPoints="mars3d.getData"
|
:threeortwo='threeortwo' :change:threeortwo="mars3d.get3wei" :amapBasePoints='amapBasePoints'
|
:change:amapBasePoints="mars3d.getBaseData" :amapFencePoints='amapFencePoints'
|
:change:amapFencePoints="mars3d.getFenceData" :amapPersonPoints='amapPersonPoints'
|
:change:amapPersonPoints="mars3d.getPersonData" :amapendGuijiPoints='amapendGuijiPoints'
|
:change:amapendGuijiPoints="mars3d.getendGuijiData" :amapsuduPoints='amapsuduPoints'
|
:change:amapsuduPoints="mars3d.getSuduData" :amapGuijiPoints='amapGuijiPoints'
|
:change:amapGuijiPoints="mars3d.getGuijiData" :amapGPSPoints='amapGPSPoints'
|
:change:amapGPSPoints="mars3d.getgpsData" :marsset='marsset' :change:marsset="mars3d.getmarsData"
|
:point='point' :change:point="mars3d.getmarsPoint"></div>
|
<!-- #endif -->
|
<!-- #ifndef APP-PLUS || H5 -->
|
<web-view :src="url"></web-view>
|
<!-- #endif -->
|
<successCom ref="refSuccess"></successCom>
|
</view>
|
</template>
|
<script>
|
import successCom from '@/components/success.vue'
|
import {
|
findtagIdPerson,
|
findBaiDuGuiJi,
|
findAllFence,
|
getBaseGPSCesium,
|
findPerson,
|
MarsHome,
|
getGPSCesium,
|
getGPS
|
} from '@/config/api.js';
|
|
// 逻辑层
|
export default {
|
components: {
|
successCom
|
},
|
data() {
|
return {
|
shownotify: true,
|
cancelText: '暂停',
|
isRunning: true,
|
plackControl: '',
|
countNum: 0,
|
LocusData: '',
|
// isPlack: false,
|
value: '',
|
range: [{
|
value: '1000',
|
text: "x1"
|
},
|
{
|
value: '500',
|
text: "x2"
|
},
|
{
|
value: '200',
|
text: "x5"
|
},
|
{
|
value: '100',
|
text: "x10"
|
},
|
{
|
value: '50',
|
text: "x20"
|
},
|
{
|
value: '10',
|
text: "x50"
|
},
|
{
|
value: '1',
|
text: "x100"
|
},
|
],
|
startdatetime: '',
|
stopdatetime: '',
|
rules2: {
|
|
'name': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请填写设备名称',
|
trigger: ['blur', 'change']
|
},
|
'time': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请选择时长',
|
trigger: ['blur', 'change']
|
},
|
'sudu': {
|
type: 'string',
|
// max: 1,
|
required: true,
|
message: '请选择时长',
|
trigger: ['blur', 'change']
|
},
|
|
},
|
radiolist1: [{
|
name: '1小时',
|
disabled: false
|
},
|
{
|
name: '2小时',
|
disabled: false
|
},
|
{
|
name: '5小时',
|
disabled: false
|
}
|
],
|
boStart: 0,
|
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
radiovalue1: '',
|
model: {
|
// userInfo: {
|
sudu: '1000',
|
name: '',
|
stop: '',
|
time: '',
|
start: '',
|
// },
|
},
|
checked: false,
|
guijishow: false,
|
show: false,
|
amapsuduPoints: 0,
|
amapPersonPoints: [],
|
amapendGuijiPoints: '',
|
amapGuijiPoints: [],
|
amapFencePoints: [],
|
keyword: '',
|
topheight: 55,
|
threeortwo: [],
|
amapPoints: [], // 这就是我们需要向视图层传递的数据
|
amapBasePoints: [], // 这就是我们需要向视图层传递的数据
|
amapGPSPoints: [],
|
marsset: {},
|
point: {},
|
}
|
},
|
mounted() {
|
this.threeortwo.push(this.is3wei)
|
this.amapPoints = []
|
this.amapBasePoints = []
|
this.amapFencePoints = []
|
// this.amapGuijiPoints = []
|
// this.amapPersonPoints = []
|
this.amapendGuijiPoints = ''
|
this.topheight = this.vuex_custom_bar_height + 15
|
this.initMap();
|
this.fetchPersonsList();
|
this.fetchBasesList();
|
this.fetchFenceList();
|
|
},
|
methods: {
|
closemodal(){
|
this.guijishow=false
|
},
|
stopguiji() {
|
this.guijishow = false
|
if (this.amapGuijiPoints[0].length > 0) {
|
this.amapendGuijiPoints = this.cancelText
|
if (this.cancelText == '暂停') {
|
this.$refs.refSuccess.showBox({
|
type: 'success',
|
txt: '暂停成功'
|
});
|
// uni.showToast({
|
// title: '暂停成功',
|
// icon: 'success'
|
// });
|
this.cancelText = '取消暂停'
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'success',
|
txt: '取消暂停,开始回放'
|
});
|
// uni.showToast({
|
// title: '开始回放',
|
// icon: 'success'
|
// });
|
|
this.cancelText = '暂停'
|
}
|
}
|
},
|
|
formatDate(date) {
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
},
|
startguiji() {
|
this.amapPersonPoints = []
|
this.$refs.uForm.validate().then(res => {
|
// uni.$u.toast('校验通过')
|
// let tagid = $("#tagid").val();
|
this.guijishow = false
|
// if (this.amapPersonPoints.length>0) {
|
// location.reload()
|
// }
|
|
if (this.model.name == "") {
|
// notify.error("请输入设备编号或名称")
|
// uni.showToast({
|
// title: '请输入设备编号或名称',
|
// icon: 'error'
|
// });
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请输入设备编号或名称'
|
});
|
return false
|
}
|
if (this.model.start == "" || this.model.start == undefined) {
|
// uni.showToast({
|
// title: '请选择开始时间',
|
// icon: 'error'
|
// });
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请选择开始时间'
|
});
|
// notify.error("请选择开始时间")
|
return false
|
}
|
if (this.model.stop == "" || this.model.stop == undefined) {
|
// uni.showToast({
|
// title: '请选择结束时间',
|
// icon: 'error'
|
// });
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请选择结束时间'
|
});
|
// notify.error("请选择结束时间")
|
return false
|
}
|
|
// if (this.modelstart == "" || this.modelstart == undefined) {
|
|
// notify.error("请选择开始时间");
|
// return false;
|
// }
|
// if (this.modelend == "" || this.modelend == undefined) {
|
// notify.error("请选择结束时间");
|
// return false;
|
// }
|
// if (!this.isPlack) {
|
// // plackControl.shutDown()
|
// graphicLayer.getGraphics().forEach(graphic => {
|
// graphicLayer.removeGraphic(graphic);
|
// });
|
|
// }
|
// 将 start 和 end 转换为日期对象
|
var startTime = new Date(this.model.start);
|
var endTime = new Date(this.model.end);
|
|
// 计算时间差（以毫秒为单位）
|
var timeDifference = endTime - startTime;
|
|
// 将毫秒转换为小时
|
var hoursDifference = timeDifference / (1000 * 60 * 60);
|
|
// 检查时间差是否大于20小时
|
if (hoursDifference > 18) {
|
// notify.error("");
|
// uni.showToast({
|
// title: '时间间隔不能超过18小时',
|
// icon: 'error'
|
// });
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '时间间隔不能超过'
|
});
|
return false;
|
}
|
this.$refs.refSuccess.showBox({
|
type: 'success',
|
txt: '轨迹正在查询中.....'
|
});
|
// uni.showToast({
|
// title: '轨迹正在查询中.....',
|
// icon: 'success'
|
// });
|
// notify.success("轨迹正在查询中.....")
|
// var layer = $("#maps").val();
|
var params = {
|
tagid: this.model.name,
|
start: this.model.start,
|
end: this.model.stop,
|
layer: '默认地图'
|
}
|
// setTimeout(function() {
|
findBaiDuGuiJi(params).then((res) => {
|
if (res.code == 0) {
|
if (Object.keys(res.data).length === 0) {
|
// uni.showToast({
|
// title: '该时间段不存在此设备轨迹信息',
|
// icon: 'error'
|
// });
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '该时间段不存在此设备轨迹信息'
|
});
|
// notify.error("该时间段不存在此设备轨迹信息")
|
return false;
|
} else {
|
this.amapGuijiPoints = res.data
|
this.amapsuduPoints = this.model.sudu
|
const params1 = {
|
id: res.data[0][0].tagid,
|
// company: this.company,
|
}
|
findtagIdPerson(params1).then((res) => {
|
if (res.code == 0) {
|
this.amapPersonPoints = res.data.pimage.split(',')
|
}
|
|
})
|
}
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: "该设备不存在！"
|
});
|
}
|
})
|
|
// }, 500)
|
|
}).catch(errors => {
|
uni.$u.toast('校验失败', errors)
|
})
|
|
},
|
|
radioChange(n) {
|
const currentDate = new Date();
|
var halfAnHourAgo = new Date(); // 当前时间减去 30 分钟
|
if (n == '1小时') {
|
halfAnHourAgo = new Date(currentDate.getTime() - 60 * 60 * 1000); // 当前时间减去 30 分钟
|
} else if (n == '2小时') {
|
halfAnHourAgo = new Date(currentDate.getTime() - 120 * 60 * 1000); // 当前时间减去 30 分钟
|
} else if (n == '5小时') {
|
halfAnHourAgo = new Date(currentDate.getTime() - 300 * 60 * 1000); // 当前时间减去 30 分钟
|
}
|
this.model.start = this.formatDate(halfAnHourAgo)
|
this.model.stop = this.formatDate(currentDate)
|
},
|
guiji() {
|
this.guijishow = !this.guijishow
|
},
|
zoom() {
|
this.show = !this.show
|
},
|
receiveRenderData(val) {
|
this.fetchPersonsList();
|
this.updateTrajectories();
|
},
|
searchxinxi() {
|
const params = {
|
name: this.keyword,
|
company: this.company,
|
}
|
findPerson(params).then((res) => {
|
if (res.code == 0) {
|
var targetPoint = {}
|
targetPoint.lat = res.data.baoliu3
|
targetPoint.lon = res.data.baoliu2
|
this.point = targetPoint
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
|
},
|
handleMapClick(e) {
|
console.log('handleMapClick逻辑层接收到触发', e)
|
this.$emit('mars3dc', e)
|
},
|
initMap() {
|
MarsHome().then((res) => {
|
this.marsset = res.data[0]
|
})
|
},
|
fetchFenceList() {
|
const params = {
|
company: this.company,
|
}
|
|
if (uni.getStorageSync('isfence') == true) {
|
findAllFence(params).then((res) => {
|
if (res.data != null) {
|
this.amapFencePoints = res.data
|
}
|
})
|
} else {
|
this.amapFencePoints = []
|
}
|
setTimeout(() => {
|
//5秒播放一次
|
this.fetchFenceList();
|
}, 1000);
|
},
|
|
fetchBasesList() {
|
const params = {
|
company: this.company,
|
}
|
if (uni.getStorageSync('isbase') == true) {
|
getBaseGPSCesium(params).then((res) => {
|
if (res.data != null) {
|
this.amapBasePoints = res.data
|
}
|
})
|
} else {
|
this.amapBasePoints = []
|
}
|
setTimeout(() => {
|
//5秒播放一次
|
this.fetchBasesList();
|
}, 1000);
|
},
|
|
fetchPersonsList() {
|
const params = {
|
company: this.company,
|
}
|
getGPSCesium(params).then((res) => {
|
if (res.data != null) {
|
this.amapPoints = res.data
|
}
|
})
|
setTimeout(() => {
|
//5秒播放一次
|
this.fetchPersonsList();
|
}, 1000);
|
},
|
|
updateTrajectories() {
|
const params = {
|
company: this.company,
|
}
|
getGPS(params).then((res) => {
|
if (res.data != null) {
|
this.amapGPSPoints = res.data
|
}
|
})
|
setTimeout(() => {
|
//5秒播放一次
|
this.updateTrajectories();
|
}, 500);
|
},
|
}
|
}
|
</script>
|
<script module="mars3d" lang="renderjs">
|
let graphicLayer = null;
|
var creditHtml = ''
|
var map
|
let addedCarIds = new Set();
|
let addedBaseIds = new Set();
|
let addedFenceIds = new Set();
|
var LocusData;
|
var LocuData;
|
var countNum = 0;
|
var sudus = 1000;
|
let isRunning = true; // 标志变量，用于控制方法是否继续执行
|
var params;
|
var plackControl;
|
var timeoutId;
|
var isPlack = true;
|
var car;
|
var num = 0;
|
import {
|
mapOptions
|
} from './config.js'
|
if (!String.prototype.replaceAll) {
|
String.prototype.replaceAll = function(str, newStr) {
|
// If a regex pattern
|
if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
|
return this.replace(str, newStr);
|
}
|
// If a string
|
return this.replace(new RegExp(str, 'g'), newStr);
|
};
|
}
|
|
export default {
|
data() {
|
return {
|
sudus: 0,
|
boStart: 0,
|
is2d: false,
|
dot: 123,
|
graphicLabels: {},
|
labels: {},
|
list: {},
|
perlist: {},
|
url: 'http://mars3d.cn/project/app/'
|
}
|
},
|
props: {
|
homelat: {
|
type: Number,
|
},
|
homelng: {
|
type: Number,
|
},
|
},
|
mounted() {
|
addedCarIds = new Set();
|
graphicLayer = null
|
this.loadSource([
|
|
//用本地地址，并可以官网下载最新包，手动覆盖下，http://mars3d.cn/download.html
|
// "static/lib/Cesium/Widgets/widgets.css",
|
// "static/lib/Cesium/Cesium.js",
|
// "static/lib/mars3d/mars3d.css",
|
// "static/lib/mars3d/mars3d.js",
|
// "static/css/style.css",
|
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/Cesium/Widgets/widgets.css",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/Cesium/Cesium.js",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/mars3d/mars3d.css",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/demo/lib/mars3d/mars3d.js",
|
// "http://123.56.113.213:8080/hxzkuwb/Home/js/3DMoXing.js",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/Cesium/Widgets/widgets.css",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/Cesium/Cesium.js",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/mars3d/mars3d.css",
|
"http://39.106.210.13:8888/hxzkuwb/view/Home/demo/lib/mars3d/mars3d.js",
|
//用在线地址
|
// "http://mars3d.cn/lib/Cesium/Widgets/widgets.css",
|
// "http://mars3d.cn/lib/Cesium/Cesium.js",
|
// "http://mars3d.cn/lib/mars3d/mars3d.css",
|
// "http://mars3d.cn/lib/mars3d/mars3d.js",
|
"static/css/style.css",
|
]).then(() => {
|
this.rewriteCesiumSources(Cesium);
|
this.createMap()
|
})
|
},
|
methods: {
|
//创建地图
|
getTerrainProviderViewModelsArr() {
|
return [
|
new Cesium.ProviderViewModel({
|
name: "无地形",
|
tooltip: "WGS84标准球体",
|
iconUrl: "static/img/basemaps/TerrainEllipsoid.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.getNoTerrainProvider()
|
}
|
}),
|
new Cesium.ProviderViewModel({
|
name: "中国地形",
|
tooltip: "由 火星科技 提供的中国国内地形",
|
iconUrl: "static/img/basemaps/TerrainSTK.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.createTerrainProvider({
|
url: "http://data.mars3d.cn/terrain"
|
})
|
}
|
}),
|
new Cesium.ProviderViewModel({
|
name: "ArcGIS地形",
|
tooltip: "由 火星科技 提供的中国国内地形",
|
iconUrl: "static/img/basemaps/TerrainSTK.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.createTerrainProvider({
|
type: "arcgis",
|
url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
|
})
|
}
|
}),
|
new Cesium.ProviderViewModel({
|
name: "全球地形",
|
tooltip: "由 Cesium官方 提供的高分辨率全球地形",
|
iconUrl: "static/img/basemaps/TerrainSTK.png",
|
creationFunction: function() {
|
return mars3d.LayerUtil.createTerrainProvider({
|
type: "ion",
|
requestWaterMask: true,
|
requestVertexNormals: true
|
})
|
}
|
})
|
]
|
},
|
getmarsData(newValue) {
|
this.list = newValue
|
|
},
|
get3wei(newValue) {
|
this.is2d = newValue[0]
|
},
|
//创建地图
|
createMap() {
|
let mapPositionlat;
|
let mapPositionlng;
|
let mapPositionalt;
|
let mapPositionheading;
|
let mapPositionpitch;
|
mapPositionlat = this.list.mapposition.split(',')[1];
|
mapPositionlng = this.list.mapposition.split(',')[0];
|
mapPositionalt = this.list.alt;
|
mapPositionheading = this.list.heading;
|
mapPositionpitch = this.list.pitch;
|
const Cesium = mars3d.Cesium;
|
map = new mars3d.Map('mars3dContainer', {
|
scene: {
|
center: {
|
// lat: 38.443729,
|
// lng: 38.443729,
|
// alt: 200,
|
// heading: 0,
|
// pitch: 0,
|
|
lat: mapPositionlat,
|
lng: mapPositionlng,
|
alt: mapPositionalt,
|
heading: 0,
|
pitch: 0
|
},
|
// center: { lat: mapPosition[1], lng: mapPosition[0], alt: HomeSetting.alt, heading: HomeSetting.heading, pitch: HomeSetting.pitch },
|
showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
|
fog: true,
|
fxaa: true,
|
globe: {
|
showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
|
depthTestAgainstTerrain: false,
|
baseColor: "#546a53"
|
},
|
// terrain: {
|
// url: "http://data.mars3d.cn/terrain",
|
// show: true
|
// },
|
cameraController: {
|
zoomFactor: 3.0,
|
minimumZoomDistance: 1,
|
maximumZoomDistance: 50000000,
|
enableRotate: true,
|
enableZoom: true
|
},
|
mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
|
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
|
skyBox: {
|
sources: {
|
positiveX: "static/img/skybox_near/qingtian/rightav9.jpg",
|
negativeX: "static/img/skybox_near/qingtian/leftav9.jpg",
|
positiveY: "static/img/skybox_near/qingtian/frontav9.jpg",
|
negativeY: "static/img/skybox_near/qingtian/backav9.jpg",
|
positiveZ: "static/img/skybox_near/qingtian/topav9.jpg",
|
negativeZ: "static/img/skybox_near/qingtian/bottomav9.jpg"
|
},
|
sources2: {
|
positiveX: "static/img/skybox_near/wanxia/SunSetRight.png",
|
negativeX: "static/img/skybox_near/wanxia/SunSetLeft.png",
|
positiveY: "static/img/skybox_near/wanxia/SunSetFront.png",
|
negativeY: "static/img/skybox_near/wanxia/SunSetBack.png",
|
positiveZ: "static/img/skybox_near/wanxia/SunSetUp.png",
|
negativeZ: "static/img/skybox_near/wanxia/SunSetDown.png"
|
},
|
sources3: {
|
negativeX: "static/img/skybox/2/tycho2t3_80_mx.jpg",
|
negativeY: "static/img/skybox/2/tycho2t3_80_my.jpg",
|
negativeZ: "static/img/skybox/2/tycho2t3_80_mz.jpg",
|
positiveX: "static/img/skybox/2/tycho2t3_80_px.jpg",
|
positiveY: "static/img/skybox/2/tycho2t3_80_py.jpg",
|
positiveZ: "static/img/skybox/2/tycho2t3_80_pz.jpg"
|
}
|
},
|
// sceneMode: this.is2d // 设置初始场景模式为2D
|
},
|
terrain: false, // 关闭地形空间
|
// terrain: {
|
// url: "http://data.mars3d.cn/terrain",
|
// show: true
|
// },
|
control: {
|
// geocoder:true,
|
mouseDownView: true,
|
clockAnimate: false,
|
timeline: false,
|
compass: false,
|
navigationHelpButton: false,
|
fullscreenButton: false,
|
homeButton: true,
|
locationBar: false,
|
zoom: true,
|
sceneModePicker: false,
|
baseLayerPicker: true, // 是否显示图层选择控件
|
terrainProviderViewModels: this
|
.getTerrainProviderViewModelsArr() // 自baseLayerPicker面板的地形可选数组
|
},
|
|
basemaps: [{
|
name: "天地图影像",
|
icon: "static/img/basemaps/tdt_img.png",
|
type: "tdt",
|
layer: "img_d",
|
key: mars3d.Token.tiandituArr,
|
show: false, // 关闭天地图影像
|
credit: creditHtml
|
},
|
{
|
name: "天地图电子",
|
icon: "static/img/basemaps/tdt_vec.png",
|
type: "group",
|
layers: [{
|
name: "底图",
|
type: "tdt",
|
layer: "vec_d",
|
key: mars3d.Token.tiandituArr
|
},
|
{
|
name: "注记",
|
type: "tdt",
|
layer: "vec_z",
|
key: mars3d.Token.tiandituArr
|
}
|
],
|
show: false, // 关闭天地图电子
|
credit: creditHtml
|
},
|
{
|
name: "高德影像",
|
icon: "static/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [{
|
name: "底图",
|
type: "gaode",
|
layer: "img_d"
|
},
|
{
|
name: "注记",
|
type: "gaode",
|
layer: "img_z"
|
}
|
],
|
show: false, // 关闭高德影像
|
credit: creditHtml
|
},
|
{
|
name: "高德电子",
|
icon: "static/img/basemaps/gaode_vec.png",
|
type: "gaode",
|
layer: "vec",
|
show: true, // 默认显示高德电子地图
|
credit: creditHtml
|
},
|
{
|
name: "百度影像",
|
icon: "static/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [{
|
name: "底图",
|
type: "baidu",
|
layer: "img_d"
|
},
|
{
|
name: "注记",
|
type: "baidu",
|
layer: "img_z"
|
}
|
],
|
show: false, // 关闭百度影像
|
credit: creditHtml
|
},
|
{
|
name: "百度电子",
|
icon: "static/img/basemaps/gaode_vec.png",
|
type: "baidu",
|
layer: "vec",
|
show: false, // 关闭百度电子
|
credit: creditHtml
|
},
|
{
|
name: "谷歌影像",
|
icon: "static/img/basemaps/google_img.png",
|
type: "google",
|
layer: "img_d",
|
chinaCRS: mars3d.ChinaCRS.GCJ02,
|
show: false // 关闭谷歌影像
|
},
|
{
|
name: "谷歌电子",
|
icon: "static/img/basemaps/google_vec.png",
|
type: "google",
|
layer: "vec",
|
chinaCRS: mars3d.ChinaCRS.GCJ02,
|
show: false // 关闭谷歌电子
|
},
|
{
|
name: "ArcGIS影像",
|
icon: "static/img/basemaps/esriWorldImagery.png",
|
type: "arcgis",
|
layer: "img_d",
|
enablePickFeatures: false,
|
show: false // 关闭 ArcGIS 影像
|
}
|
]
|
});
|
// const toolbar = new mars3d.control.geocoder({
|
// position: { top: "10px", left: "10px" }, // 按钮位置
|
// items: [
|
// {
|
// type: "button",
|
// text: "搜索",
|
// icon: "fa fa-search", // 使用 Font Awesome 图标
|
// action: () => {
|
// console.log(22222222);
|
// // this.$refs.searchBox.show(); // 调用搜索框的显示方法
|
// }
|
// }
|
// ]
|
// });
|
// map.addControl(toolbar);
|
this.showQxShequDemo()
|
if (this.is2d == true) {
|
map.scene.morphTo3D(0);
|
} else {
|
map.scene.morphTo2D(0);
|
}
|
|
console.log("map构造完成", map)
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
|
})
|
map.addLayer(graphicLayer)
|
// 绑定点击事件
|
graphicLayer.on(mars3d.EventType.click, (event, position) => {
|
var car = event.graphic
|
// var list = []
|
var json = {}
|
|
// var message = "姓名: " + name + "<br>编号: " + number;
|
// // 使用Mars3D的提示框组件显示信息
|
// this.graphicLayer.bindPopup(new mars3d.Tooltip({
|
// content: message,
|
// position: position, // 指定提示框的位置为点击的位置
|
// className: "custom-tooltip", // 可以添加自定义样式类
|
// closeButton: true, // 是否显示关闭按钮
|
// }));
|
// 打开提示框
|
// this.graphicLayer.openPopup();
|
|
|
json.ponline = car.attr.ponline
|
json.baoliu2 = car.attr.baoliu2
|
json.ptagid = car.attr.ptagid
|
json.pname = car.attr.pname
|
json.ppower = car.attr.ppower
|
json.baoliu4 = car.attr.baoliu4
|
json.pdepartment = car.attr.pdepartment
|
this.perlist = json
|
this.$ownerInstance.callMethod('handleMapClick', this.perlist);
|
|
|
})
|
|
//测试本地图片
|
// const graphic = new mars3d.graphic.BillboardEntity({
|
// position: [117.229619, 31.686288, 1000],
|
// style: {
|
// image: "static/img/mark-red.png",
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
// },
|
// attr: {
|
// remark: "示例1"
|
// }
|
// })
|
// graphicLayer.addGraphic(graphic)
|
// this.fetchPersonsList()
|
// this.updateTrajectories()
|
|
// this.getGPSCesium();
|
this.$ownerInstance.callMethod('receiveRenderData', this.dot)
|
},
|
getmarsPoint(newValue) {
|
console.log("搜索===========》》》》》》》");
|
// Object.keys(perlist).length
|
if (Object.keys(newValue).length != 0) {
|
map.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(newValue.lon, newValue.lat, 500), // 目标点经纬度和视角高度
|
duration: 3 // 动画持续时间（秒）
|
});
|
}
|
// this.list=newValue
|
|
},
|
// 获取GPS Cesium数据
|
// getGPSCesium() {
|
// fetch('http://39.106.210.13:8081/api/wx/earlyWarning', {
|
// method: 'POST',
|
// headers: {
|
// // 'Authorization': access_token
|
// }
|
// })
|
// // .then(response => response.json())
|
// .then(data => {
|
// console.log(data);
|
// console.log(data.data);
|
// // 处理获取到的GPS Cesium数据
|
// })
|
// .catch(error => {
|
// console.error('Error:', error);
|
// });
|
// },
|
showQxShequDemo() {
|
var tiles3dLayer = null
|
tiles3dLayer = new mars3d.layer.TilesetLayer({
|
name: "码头", // 图层名称，用于标识该图层
|
url: "http://123.56.113.213:8080/hxzkuwb/Home/tiles/tileset.json", // 3D Tiles 数据的 URL 地址，指向 JSON 文件
|
position: {
|
lng: 113.408376,
|
lat: 38.443613,
|
alt: 0
|
}, // 图层的初始位置，包含经度、纬度和高度
|
maximumScreenSpaceError: 1, // 最大屏幕空间误差，控制模型的细节渲染级别，值越高性能越好但视觉效果可能下降
|
shadows: Cesium.ShadowMode.DISABLED, // 设置阴影模式，禁用阴影以提高性能，若需要可设置为 ENABLED 启用阴影
|
skipLevelOfDetail: true, // 跳过细节层级，减少渲染时的计算负担，提升性能
|
loadSiblings: true, // 加载兄弟节点，确保在需要时快速加载周围节点，提高流畅性
|
cullRequestsWhileMoving: true, // 在移动时进行剔除，减少不必要的渲染计算，提高性能
|
cullRequestsWhileMovingMultiplier: 10, // 在移动时的剔除请求倍数，设置为 10 表示在移动时增加剔除请求，进一步提升性能
|
preferLeaves: true, // 优先加载叶子节点，优化加载顺序，提升用户体验，特别是在复杂场景中
|
preloadWhenHidden: true, // 在模型隐藏时进行预加载，减少下次显示时的延迟
|
cullWithChildrenBounds: true,
|
highlight: {
|
type: "click",
|
color: "#00ffff"
|
},
|
rotation: {
|
x: 0,
|
y: 0,
|
z: 1.5
|
}
|
});
|
map.addLayer(tiles3dLayer)
|
|
|
tiles3dLayer.readyPromise.then(function(layer) {
|
console.log("load完成", layer)
|
console.log("URL:", tiles3dLayer);
|
// tiles3dLayer.tileset 是 Cesium3DTileset，支持绑定所有Cesium原生事件
|
// 参考API http://mars3d.cn/api/cesium/Cesium3DTileset.html
|
tiles3dLayer.tileset.loadProgress.addEventListener(function(numberOfPendingRequests,
|
numberOfTilesProcessing) {
|
if (numberOfPendingRequests === 0 && numberOfTilesProcessing === 0) {
|
console.log("Loading: 停止加载")
|
return
|
}
|
console.log(
|
`Loading: 待处理请求数: ${numberOfPendingRequests}, 处理数: ${numberOfTilesProcessing}`
|
)
|
})
|
|
|
})
|
},
|
getSuduData(newValue) {
|
this.sudus = newValue
|
},
|
getGuijiData(newValue) {
|
LocusData = []
|
if (!isPlack) {
|
// plackControl.shutDown()
|
graphicLayer.getGraphics().forEach(graphic => {
|
graphicLayer.removeGraphic(graphic);
|
});
|
}
|
// graphicLayer = null
|
// graphicLayer = new mars3d.layer.GraphicLayer()
|
|
map.addLayer(graphicLayer)
|
LocusData = newValue //轨迹数据
|
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(LocusData[0][0].addtime))
|
},
|
getendGuijiData(newValue) {
|
if (!isRunning) {
|
isRunning = true;
|
setTimeout(this.iterate(), this.sudus); // 继续迭代
|
} else {
|
isRunning = false;
|
}
|
this.boStart++
|
},
|
getPersonData(newValue) {
|
isPlack = false
|
var viewPoints = [{
|
lng: LocusData[0][0].gspJingdu,
|
lat: LocusData[0][0].gpsWeidu,
|
alt: 20
|
}];
|
map.setCameraViewList(viewPoints);
|
params = newValue
|
var dqNum = 0;
|
var DqLocusData = [];
|
for (let key in LocusData) {
|
if (LocusData.hasOwnProperty(key)) {
|
// 创建模型
|
let modelParam = {
|
scale: 2,
|
url: "http://39.106.210.13:8888/hxzkuwb/view/" + params[0],
|
pitch: 0,
|
roll: 0,
|
};
|
// 初始化 car 对象
|
car = new mars3d.graphic.Route({
|
id: LocusData[key][0].tagid + key,
|
name: LocusData[key][0].name + key,
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
},
|
polyline: {
|
color: 'red',
|
width: 2,
|
clampToGround: true,
|
},
|
style: {
|
label: {
|
text: LocusData[key][0].name + " " + LocusData[key][0].tagid,
|
font_size: 14,
|
color: "#000000",
|
distanceDisplayCondition: false,
|
backgroundOpacity: 0.8,
|
addHeight: parseInt(modelParam.scale) + parseInt(modelParam.scale),
|
backgroundPadding: 10,
|
outlineWidth: 2,
|
outline: true,
|
// pixelOffset: new Cesium.Cartesian2(0, -30),
|
outlineColor: "#5BFF1A",
|
},
|
},
|
attr: LocusData[key],
|
});
|
// 将 car 添加到 graphicLayer
|
graphicLayer.addGraphic(car);
|
|
// 定义一个索引变量，用于跟踪当前处理的位置
|
let index = 0;
|
for (var i = 0; i < LocusData[key].length; i++) {
|
DqLocusData.push(LocusData[key][i])
|
}
|
DqLocusData.push(1)
|
}
|
}
|
isRunning = true
|
plackControl = this.Plack(DqLocusData)
|
},
|
|
// 停止方法执行的函数
|
|
Plack(LocusData) {
|
LocuData = LocusData
|
let modelParam = {
|
scale: 2,
|
url: "http://39.106.210.13:8888/hxzkuwb/view/" + params[0],
|
pitch: 0,
|
roll: 0,
|
};
|
// 初始化 car 对象
|
car = new mars3d.graphic.Route({
|
id: 1,
|
name: LocusData[0].name,
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
},
|
polyline: {
|
color: 'red',
|
width: 2,
|
clampToGround: true,
|
},
|
style: {
|
label: {
|
text: LocusData[0].name + " " + LocusData[0].tagid,
|
font_size: 14,
|
color: "#000000",
|
distanceDisplayCondition: false,
|
backgroundOpacity: 0.8,
|
addHeight: parseInt(modelParam.scale) + parseInt(modelParam.scale),
|
backgroundPadding: 10,
|
outlineWidth: 2,
|
outline: true,
|
// pixelOffset: new Cesium.Cartesian2(0, -30),
|
outlineColor: "#5BFF1A",
|
},
|
},
|
attr: LocusData[0],
|
});
|
// 将 car 添加到 graphicLayer
|
graphicLayer.addGraphic(car);
|
|
this.iterate(); // 开始第一次迭代
|
return {
|
start: function() {
|
if (!isRunning) {
|
isRunning = true;
|
this.iterate(); // 重新开始迭代
|
}
|
},
|
stop: function() {
|
isRunning = false; // 停止循环
|
},
|
shutDown: function() {
|
clearTimeout(timeoutId); // 清除当前的 timeout
|
isRunning = false; // 停止循环
|
|
},
|
continue: function() {
|
if (!isRunning) {
|
isRunning = true;
|
setTimeout(() => {
|
//5秒播放一次
|
this.iterate();
|
}, this.sudus); // 继续迭代
|
}
|
}
|
};
|
},
|
iterate() {
|
if (!isRunning) return;
|
if (num < LocuData.length) {
|
// 在这里处理 LocusData[i]
|
if (LocuData[num] == 1) {
|
var style = {
|
label: {
|
text: "",
|
}
|
};
|
var models = {
|
scale: 0
|
};
|
car.model = models;
|
car.style = style;
|
let modelParam = {
|
scale: 2,
|
url: "http://39.106.210.13:8888/hxzkuwb/view/" + params[0],
|
pitch: 0,
|
roll: 0,
|
};
|
|
console.log(LocuData[num + 1]);
|
// if (LocuData[num+1]!=undefined) {
|
car = new mars3d.graphic.Route({
|
id: LocuData[num - 1].tagid + num,
|
name: LocuData[num - 1].name + num,
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
},
|
polyline: {
|
color: 'red',
|
width: 2,
|
clampToGround: true,
|
},
|
style: {
|
label: {
|
text: LocuData[num - 1].name + "" + LocuData[num - 1].tagid,
|
font_size: 14,
|
color: "#000000",
|
distanceDisplayCondition: false,
|
backgroundOpacity: 0.8,
|
addHeight: parseInt(modelParam.scale) + parseInt(modelParam.scale),
|
backgroundPadding: 10,
|
outlineWidth: 2,
|
outline: true,
|
// pixelOffset: new Cesium.Cartesian2(0, -30),
|
outlineColor: "#5BFF1A",
|
},
|
},
|
attr: LocuData[num - 1],
|
});
|
// console.log(12345678);
|
// 将 car 添加到 graphicLayer
|
graphicLayer.addGraphic(car);
|
// }
|
// 初始化 car 对象
|
|
} else {
|
let currentData = LocuData[num];
|
var point = new mars3d.LngLatPoint(currentData.gspJingdu, currentData.gpsWeidu, 0);
|
car.addDynamicPosition(point, currentData.addtime);
|
}
|
|
|
num++;
|
setTimeout(() => {
|
//5秒播放一次
|
this.iterate();
|
}, this.sudus);
|
// timeoutId = setTimeout(this.iterate(), 1); // 设置下一次迭代的延迟
|
}
|
},
|
|
getFenceData(newValue) {
|
// const fenceData = []
|
if (Object.keys(newValue).length != 0) {
|
newValue.forEach((e, i) => {
|
|
// console.log('打印数据=================');
|
// let iconStyle = e.online === '1' ? {} : { image: "static/img/person2.png" };
|
// console.log(e);
|
// let parts = e.image.split(',');
|
if (e.baoliu7 === '1') {
|
if (!addedFenceIds.has(e.id)) {
|
let parts = e.baoliu8.split(';');
|
var part = []
|
var fence = []
|
for (var i = 0; i < parts.length; i++) {
|
part = parts[i].split(',');
|
// fence.push(part[0])
|
// fence.push(part[1])
|
part.push('0')
|
fence.push(part)
|
}
|
// 创建围栏图形
|
const fenceGraphic = new mars3d.graphic.PolygonEntity({
|
positions: fence,
|
style: {
|
color: Cesium.Color.RED.withAlpha(0.3), // 围栏颜色，半透明
|
outline: true, // 是否显示边框
|
outlineColor: "#5BFF1A" // 边框颜色
|
}
|
});
|
graphicLayer.addGraphic(fenceGraphic);
|
addedFenceIds.add(e.id);
|
}
|
} else {
|
if (addedFenceIds.has(e.id)) {
|
// const {
|
// graphic,
|
// label
|
// } = this.graphicLabels[e.anchorid];
|
// const graphic1 = new mars3d.graphic.BillboardEntity({
|
// position: [e.baoliu6, e.baoliu7, 0],
|
// id: e.anchorid,
|
// // style: {
|
// // ...iconStyle,
|
// // image: iconStyle.image || "static/img/person3.png", // 默认图标
|
// // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// // verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
// // },
|
// style: {
|
// image: "static/img/base2.png",
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
// },
|
// attr: {
|
// anchormode: e.anchormode,
|
// baoliu6: e.baoliu6,
|
// baoliu7: e.baoliu7,
|
// // ppower: e.ppower,
|
// baoliu13: e.baoliu13,
|
// // pdepartment: e.pdepartment,
|
// // pname: e.name,
|
// anchorid: e.anchorid,
|
// }
|
// })
|
// graphicLayer.addGraphic(graphic1)
|
// graphicLayer.removeGraphic(label);
|
graphicLayer.removeGraphic(graphic);
|
delete this.graphicLabels[e.id]; // 删除引用
|
// delete this.labels[e.id];
|
addedFenceIds.delete(e.id);
|
// this.graphicLabels[e.anchorid] = {
|
// graphic: graphic1
|
// };
|
}
|
}
|
}) // 将传递过来的值赋值给points，这样就可以在视图层中使用
|
} else {
|
addedFenceIds = new Set();
|
}
|
|
|
},
|
getBaseData(newValue) {
|
if (Object.keys(newValue).length != 0) {
|
newValue.forEach((e, i) => {
|
|
// console.log('打印数据=================');
|
// let iconStyle = e.online === '1' ? {} : { image: "static/img/person2.png" };
|
// console.log(e);
|
// let parts = e.image.split(',');
|
if (e.anchormode === '1') {
|
if (!addedBaseIds.has(e.anchorid)) {
|
// console.log(e.anchorid);
|
// console.log('打印base数据===================》》》》》》》》》》》》》》');
|
//测试本地图片
|
const graphic = new mars3d.graphic.BillboardEntity({
|
position: [e.baoliu6, e.baoliu7, 0],
|
id: e.anchorid,
|
// style: {
|
// ...iconStyle,
|
// image: iconStyle.image || "static/img/person3.png", // 默认图标
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
// },
|
style: {
|
image: "static/img/base.png",
|
// scale:0.2,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
anchormode: e.anchormode,
|
baoliu6: e.baoliu6,
|
baoliu7: e.baoliu7,
|
// ppower: e.ppower,
|
baoliu13: e.baoliu13,
|
// pdepartment: e.pdepartment,
|
// pname: e.name,
|
anchorid: e.anchorid,
|
}
|
})
|
const label = new mars3d.graphic.LabelEntity({
|
position: graphic.position, // 标签的位置与图标位置相同
|
style: {
|
text: e.anchorid, // 标签的文本内容为姓名和编号
|
font: '10pt sans-serif', // 字体样式
|
fillColor: "#000000", // 字体颜色
|
outlineColor: "#5BFF1A", // 描边颜色，使文字更清晰
|
outlineWidth: 2, // 描边宽度
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
|
pixelOffset: new Cesium.Cartesian2(0, -30) // 文字偏移量，向下偏移10像素
|
}
|
});
|
if (this.graphicLabels[e.anchorid]) {
|
graphicLayer.removeGraphic(this.graphicLabels[e.anchorid].graphic);
|
delete this.graphicLabels[e.anchorid];
|
// delete this.labels[car.id];
|
}
|
graphicLayer.addGraphic(graphic)
|
graphicLayer.addGraphic(label);
|
addedBaseIds.add(e.anchorid);
|
this.graphicLabels[e.anchorid] = {
|
graphic,
|
label
|
};
|
}
|
} else {
|
if (addedBaseIds.has(e.anchorid)) {
|
const {
|
graphic,
|
label
|
} = this.graphicLabels[e.anchorid];
|
if (this.isoffline == true) {
|
const graphic1 = new mars3d.graphic.BillboardEntity({
|
position: [e.baoliu6, e.baoliu7, 0],
|
id: e.anchorid,
|
// style: {
|
// ...iconStyle,
|
// image: iconStyle.image || "static/img/person3.png", // 默认图标
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
// },
|
style: {
|
image: "static/img/base2.png",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
anchormode: e.anchormode,
|
baoliu6: e.baoliu6,
|
baoliu7: e.baoliu7,
|
// ppower: e.ppower,
|
baoliu13: e.baoliu13,
|
// pdepartment: e.pdepartment,
|
// pname: e.name,
|
anchorid: e.anchorid,
|
}
|
})
|
graphicLayer.addGraphic(graphic1)
|
this.graphicLabels[e.anchorid] = {
|
graphic: graphic1
|
};
|
}
|
// graphicLayer.removeGraphic(label);
|
graphicLayer.removeGraphic(graphic);
|
delete this.graphicLabels[e.anchorid]; // 删除引用
|
// delete this.labels[e.id];
|
addedBaseIds.delete(e.anchorid);
|
|
}
|
}
|
}) // 将传递过来的值赋值给points，这样就可以在视图层中使用
|
} else {
|
addedBaseIds = new Set();
|
}
|
},
|
getData(newValue) {
|
if (Object.keys(newValue).length != 0) {
|
newValue.forEach((e, i) => {
|
if (e.online === '1') {
|
if (!addedCarIds.has(e.id)) {
|
//测试本地图片
|
const graphic = new mars3d.graphic.BillboardEntity({
|
position: [e.baoliu2, e.baoliu3, 0],
|
id: e.id,
|
style: {
|
image: "static/img/person5.png",
|
// scale:0.2,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
ponline: e.baoliu13,
|
baoliu2: e.baoliu2,
|
baoliu3: e.baoliu3,
|
ppower: e.ppower,
|
baoliu4: e.baoliu4,
|
pdepartment: e.pdepartment,
|
pname: e.name,
|
ptagid: e.id,
|
}
|
})
|
const label = new mars3d.graphic.LabelEntity({
|
position: graphic.position, // 标签的位置与图标位置相同
|
style: {
|
text: e.name + " " + e.id, // 标签的文本内容为姓名和编号
|
font: '10pt sans-serif', // 字体样式
|
fillColor: "#000000", // 字体颜色
|
outlineColor: "#5BFF1A", // 描边颜色，使文字更清晰
|
outlineWidth: 2, // 描边宽度
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 风格：填充和描边
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字在垂直方向的原点
|
pixelOffset: new Cesium.Cartesian2(0, -30) // 文字偏移量，向下偏移10像素
|
}
|
});
|
if (this.graphicLabels[e.id]) {
|
graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
|
delete this.graphicLabels[e.id];
|
// delete this.labels[car.id];
|
}
|
graphicLayer.addGraphic(graphic)
|
graphicLayer.addGraphic(label);
|
addedCarIds.add(e.id);
|
this.graphicLabels[e.id] = {
|
graphic: graphic,
|
label: label
|
};
|
}
|
} else {
|
if (addedCarIds.has(e.id)) {
|
if (e.baoliu19 == "车载") {
|
var img = 'static/img/car1.png'
|
} else {
|
var img = 'static/img/person6.png'
|
}
|
if (this.isoffline == true) {
|
const graphic1 = new mars3d.graphic.BillboardEntity({
|
position: [e.baoliu2, e.baoliu3, 0],
|
id: e.id,
|
style: {
|
|
image: img,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
attr: {
|
ponline: e.baoliu13,
|
baoliu2: e.baoliu2,
|
baoliu3: e.baoliu3,
|
ppower: e.ppower,
|
baoliu4: e.baoliu4,
|
pdepartment: e.pdepartment,
|
pname: e.name,
|
ptagid: e.ptagid,
|
}
|
})
|
graphicLayer.removeGraphic(this.graphicLabels[e.id].graphic);
|
delete this.graphicLabels[e.id];
|
graphicLayer.addGraphic(graphic1)
|
this.graphicLabels[e.id] = {
|
graphic: graphic1,
|
};
|
}
|
addedCarIds.delete(e.id);
|
}
|
}
|
}) // 将传递过来的值赋值给points，这样就可以在视图层中使用
|
}
|
},
|
getgpsData(newValue) {
|
if (Object.keys(newValue).length != 0) {
|
var listALL = newValue;
|
if (graphicLayer != null) {
|
graphicLayer.eachGraphic((car) => {
|
// 取出对应车辆的轨迹列表
|
var path = listALL.filter((item) => {
|
return item.ptagid === car.id
|
});
|
path.forEach((item) => {
|
var point = new mars3d.LngLatPoint(item.baoliu2, item
|
.baoliu3, 0);
|
car.addDynamicPosition(point, item.paddtiem);
|
const {
|
oldgraphic,
|
label
|
} = this.graphicLabels[item.ptagid];
|
// 根据报警状态设置图标
|
let iconSrc = "";
|
let scaleSrc = "";
|
if (item.psos === '1') {
|
if (item.baoliu19 == "车载") {
|
scaleSrc = "1"
|
// iconSrc = "static/img/person5.png"; // 默认图标
|
iconSrc = 'static/img/car1.png'
|
} else {
|
scaleSrc = "1"
|
iconSrc = "static/img/person3.png"; // 高级告警图标
|
}
|
|
} else {
|
if (item.baoliu19 == "车载") {
|
scaleSrc = "1"
|
// iconSrc = "static/img/person5.png"; // 默认图标
|
iconSrc = 'static/img/car1.png'
|
} else {
|
scaleSrc = "1"
|
iconSrc = "static/img/person5.png"; // 默认图标
|
}
|
|
}
|
|
// 移除旧的图标实体
|
if (this.graphicLabels[car.id]) {
|
graphicLayer.removeGraphic(car);
|
graphicLayer.removeGraphic(label);
|
}
|
if (item.ponline === '1') {
|
// 创建新的图标实体
|
const newGraphic = new mars3d.graphic.BillboardEntity({
|
position: [item.baoliu2, item.baoliu3, 0],
|
id: item.ptagid,
|
style: {
|
image: iconSrc,
|
scale: scaleSrc,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
// pixelOffset: new Cesium.Cartesian2(0, 10), // 向下偏移50像素
|
},
|
attr: {
|
ponline: item.baoliu13,
|
baoliu2: item.baoliu2,
|
baoliu3: item.baoliu3,
|
ppower: item.ppower,
|
baoliu4: item.baoliu4,
|
pdepartment: item.pdepartment,
|
pname: item.pname,
|
ptagid: item.ptagid,
|
}
|
})
|
const newlabel = new mars3d.graphic.LabelEntity({
|
position: point,
|
style: {
|
text: item.pname + " " + item.ptagid,
|
font: '10pt sans-serif',
|
fillColor: "#000000",
|
outlineColor: "#5BFF1A",
|
outlineWidth: 2,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -30)
|
}
|
});
|
// 添加标签到图层并存储引用
|
graphicLayer.addGraphic(newlabel);
|
// 添加新的图标实体到图层
|
graphicLayer.addGraphic(newGraphic);
|
this.graphicLabels[item.ptagid] = {
|
graphic: newGraphic,
|
label: newlabel
|
};
|
}
|
});
|
});
|
}
|
}
|
},
|
|
//重写cesium接口
|
rewriteCesiumSources(Cesium) {
|
const loadImageElement_old = Cesium.Resource._Implementations.loadImageElement;
|
Cesium.Resource._Implementations.loadImageElement = function(url, crossOrigin, deferred) {
|
// 修改本地file本地文件需要设置跨域（uniapp环境等）
|
if (url.startsWith('file')) {
|
crossOrigin = true;
|
}
|
if (!url.startsWith('http')) {
|
crossOrigin = true;
|
}
|
|
return loadImageElement_old(url, crossOrigin, deferred);
|
};
|
|
const contains_old = Cesium.TrustedServers.contains;
|
Cesium.TrustedServers.contains = function(url) {
|
// 修改本地file本地文件需要设置跨域（uniapp环境等）
|
if (url.startsWith('file')) {
|
return false;
|
}
|
return contains_old.bind(this)(url);
|
};
|
},
|
|
// 加载资源
|
loadSource(loadQueen) {
|
const stepOne = (resolve) => {
|
if (loadQueen.length) {
|
const dep = loadQueen.shift()
|
|
let loader
|
if (dep.endsWith(".css")) {
|
loader = this.loadLink(dep)
|
} else {
|
loader = this.loadScript(dep)
|
}
|
|
loader.then(() => {
|
stepOne(resolve)
|
})
|
} else {
|
resolve(true)
|
}
|
}
|
|
return new Promise((resolve) => {
|
stepOne(resolve)
|
})
|
},
|
|
// 加载scrpit
|
loadScript(src, async = true) {
|
const $script = document.createElement("script")
|
$script.async = async
|
$script.src = src
|
document.body.appendChild($script)
|
return new Promise((resolve, reject) => {
|
$script.onload = () => {
|
resolve(true)
|
}
|
})
|
},
|
|
// 加载scrpit
|
loadLink(src) {
|
const $link = document.createElement("link")
|
$link.rel = "stylesheet"
|
$link.href = src
|
document.head.appendChild($link)
|
return new Promise((resolve, reject) => {
|
$link.onload = () => {
|
resolve(true)
|
}
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style>
|
.searchbg {
|
width: '50%';
|
left: '25%';
|
position: 'absolute';
|
z-index: 99999999;
|
}
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
