<!--suppress ALL -->
<template>
<!--<div style="width: 100%; height:100%">-->
<div class="single-map-container">
<div id="cover" class='cover'/>
<div class='btn-list'>
<span class="circle_btn_init" @click="setCenter(center)" />
<span class="circle_btn_fly" @click="fly()" />
</div>
<div id="mars3dContainer" class="mars3d-container" @click="showTab=false"/>
</div>
</template>
<script>
// 在需要用到mars3d的vue等页面直接引入并使用
import * as Cesium from 'mars3d-cesium'
//导入mars3d主库
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'
import { mapState } from 'vuex'
var layers = {
heatLayer: null,
feature: '',
tileLayer: null,
polygon: ''
}
var labelsOption = [
{
index: '01',
name: '基础资源',
children: [
{index: '011', name: '线状管线(线)', children: []},
// {index: '012', name: '规划路网', children: []},
// {index: '013', name: '居村委区域(面)', children: []},
{index: '014', name: '乡镇级行政区(面)', children: []},
// {index: '015', name: '公共服务及设施(面)', children: []},
// {index: '016', name: '居民地(面)', children: []},//
{index: '017', name: '城际公路(线)', children: []},
{index: '018', name: '城市道路(线)', children: []},
// {index: '019', name: '铁路(线)', children: []},
// {index: '0110', name: '乡村道路(线)', children: []},//
{index: '0111', name: '沟渠', children: []},
{index: '0112', name: '河流', children: []},
// {index: '0113', name: '湖泊', children: []},//
// {index: '0114', name: '其他水系要素(线)', children: []},
// {index: '0115', name: '水库', children: []},
// {index: '0116', name: '水利及附属设施(线)', children: []},
{index: '0117', name: '城市绿地(面)', children: []}
// {index: '0118', name: '农林用地(面)', children: []}//
// {index: '0119', name: '公共交通总图', children: []}
],
layersShow: [ false, false, false, false, false, false, false, false]
},
{
index: '02',
name: '智慧管网',
children: [
{index: '021', name: '电子标识器', children: []},
{index: '022', name: '液位监测仪', children: []},
{index: '023', name: '消防栓防盗水监测仪', children: []},
{index: '024', name: '有害气体监测仪', children: []},
{index: '025', name: '井盖状态监测仪', children: []},
{index: '026', name: '噪声记录仪', children: []},
{index: '027', name: '燃气智能监测终端', children: []},
{index: '028', name: '数据集中器', children: []},
{index: '029', name: '管线', children: []},
{index: '0210', name: '管线附属物', children: []},
{index: '0211', name: '管线特征管点', children: []}],
layersShow: [false, false, false, false, false, false, false, false, false, false, false]},
{
index: '03',
name: '智慧工地',
children: [
{index: '031', name: '在建工地', children: []},
{index: '032', name: '塔吊', children: []},
{index: '033', name: '摄像头', children: []},
{index: '034', name: '环监', children: []}
// {index: '035', name: '工地平面图', children: []}
],
layersShow: [false, false, false, false, false]
},
{
index: '10',
name: '智慧交通',
children: [
{index: '101', name: '路口数据', children: []},
{index: '102', name: '摄像机(电警)', children: []},
{index: '103', name: '摄像机(卡口)', children: []},
{index: '104', name: '雷达', children: []},
{index: '105', name: '终端', children: []},
{index: '106', name: '信号机', children: []},
{index: '107', name: '行人闯红灯', children: []},
{index: '108', name: '信息发布盒', children: []},
{index: '109', name: '信息发布主机', children: []},
{index: '1010', name: 'AR鹰眼', children: []},
// {index: '1011', name: '交通标线', children: []},
{index: '1012', name: '公交车站', children: []}
// {index: '1013', name: '公交线路', children: []}
],
layersShow: [false, false, false, false, false, false, false, false, false, false, false, false, false]
},
{
index: '04',
name: '智慧项管',
children: [
{index: '041', name: '在建/已建项目', children: []},
{index: '042', name: '2020年城建项目', children: []},
{index: '043', name: '2021年城建项目', children: []}
],
layersShow: [false, false, false]
},
{
index: '05',
name: '智慧社区',
children: [
{index: '051', name: '社区总览', children: []},
{index: '052', name: '楼栋', children: []},
{index: '053', name: '摄像头', children: []},
{index: '054', name: '水施井', children: []},
{index: '055', name: '消防栓', children: []},
{index: '056', name: '灭火器', children: []},
{index: '057', name: '强弱电井', children: []}
// {index: '058', name: '总平面图', children: []},
// {index: '059', name: '电梯', children: []},
// {index: '0510', name: '楼梯', children: []}
],
layersShow: [false, false, false, false, false, false, false, false, false, false]
},
{
index: '07',
name: '物联网',
children: [
// {index: '071', name: '公共门禁(大华)', children: []},
// {index: '072', name: '公共门禁(ZUOLIN_V3)', children: []},
// {index: '073', name: '公共门禁(凯帕斯)', children: []},
{index: '074', name: '公共门禁', children: []}
],
layersShow: [false]
},
{
index: '08',
name: '视频云',
children: [
{index: '081', name: '摄像头(智慧交通)', children: []},
{index: '082', name: '摄像头(智慧社区)', children: []},
{index: '083', name: '摄像头(智慧教育)', children: []},
{index: '084', name: '摄像头(智慧园林)', children: []}
],
layersShow: [false, false, false, false]
},
{
index: '09',
name: '智慧一卡通 ',
children: [
// {index: '091', name: '公共门禁(大华)', children: []},
// {index: '092', name: '公共门禁(ZUOLIN_V3)', children: []},
// {index: '093', name: '公共门禁(凯帕斯)', children: []},
{index: '094', name: '公共门禁', children: []}
],
layersShow: [false, false, false, false]
},
{
index: '11',
name: '停车云',
children: [
{index: '111', name: '停车云总览', children: []},
// {index: '112', name: '停车位', children: []},
{index: '113', name: '车辆道闸', children: []}
],
layersShow: [false, false, false]
},
{
index: '06',
name: '智慧园林',
children: [
{index: '061', name: '公园总览', children: []},
{index: '062', name: '广播', children: []},
{index: '063', name: '公共厕所', children: []},
{index: '064', name: '摄像机', children: []},
{index: '065', name: '路灯', children: []},
{index: '066', name: '楼房', children: []},
{index: '067', name: '紧急求助', children: []},
// {index: '068', name: '停车场', children: []},
{index: '069', name: '垃圾桶', children: []},
{index: '0610', name: '商店', children: []},
{index: '0611', name: '户外屏', children: []},
{index: '0612', name: '灌溉机器', children: []},
{index: '0613', name: '消防设施', children: []},
{index: '0614', name: '车辆道闸', children: []},
{index: '0615', name: '无线AP(WiFi)', children: []},
{index: '0616', name: '温湿度传感器', children: []},
{index: '0617', name: '水位检测器', children: []},
{index: '0618', name: '弱电检', children: []},
{index: '0619', name: '巡更信息扭', children: []},
{index: '0620', name: 'pm2.5/pm10传感器', children: []},
{index: '0621', name: '售卖亭', children: []},
// {index: '0622', name: '管道线路', children: []},
{index: '0623', name: '夜景照明配电箱', children: []},
{index: '0624', name: '智能弱电井', children: []}
],
layersShow: [false, false, false, false, false, false, false, false,
false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]
},
{
index: '12',
name: '智慧政务',
children: [
{index: '121', name: '蓉江新区基础设施建设投资管理有限公司', children: []},
{index: '122', name: '蓉江新区住房和城乡建设局', children: []},
{index: '123', name: '锦源置业', children: []}
],
layersShow: [false, false, false]
},
{
index: '13',
name: '智慧教育',
children: [
// {index: '131', name: '教育总览', children: []},
{index: '132', name: '紧急按钮', children: []},
{index: '133', name: '摄像头', children: []},
{index: '134', name: '网络红外枪式摄像机', children: []},
{index: '135', name: '音响', children: []},
{index: '136', name: '音柱', children: []},
{index: '137', name: 'IC卡门禁读头', children: []},
{index: '138', name: '车牌识别一体机', children: []},
{index: '139', name: '红外对射器', children: []},
{index: '1310', name: '一键报警', children: []},
{index: '1311', name: '无线吸顶AP', children: []},
{index: '1312', name: '液晶显示屏', children: []},
{index: '1313', name: '门禁控制器', children: []},
{index: '1314', name: '食堂电视机', children: []},
{index: '1315', name: '班级信息', children: []}
],
layersShow: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]
},
{
index: '14',
name: '智慧城管',
children: [
{index: '141', name: '城管执法案件', children: []},
{index: '142', name: '路灯', children: []}
],
layersShow: [false, false]
},
{
index: '15',
name: '智慧公安',
children: [
{index: '151', name: '公安一期视频点位', children: []}
],
layersShow: [false]
},
{
index: '16',
name: '社会治理',
children: [
{index: '161', name: '2021疫情防控网格', children: []},
{index: '162', name: '精细化管理平台', children: []}
],
layersShow: [false]
},
{
index: '17',
name: '企业',
children: [
{index: '171', name: '企业', children: []},
{index: '172', name: '建筑业企业', children: []},
{index: '173', name: '个体户', children: []}
],
layersShow: [false, false, false]
},
{
index: '18',
name: '城市规划',
children: [
{index: '181', name: '道路规划', children: []},
// {index: '182', name: '土地使用规划图', children: []},
{index: '183', name: '道路责任网格', children: []}
],
layersShow: [false, false, false]
},
// {
// index: '19',
// name: '辖区',
// children: [
// {index: '191', name: ' 行政辖区', children: []}
// ],
// layersShow: [false]
// },
{
index: '20',
name: '应急指挥调度',
children: [],
layersShow: []
}
]
export default {
name: 'Mars3dMap2',
data () {
return {
title5: [true, false, false, false],
tabList: [
{ name: 'B-XXD-07', desc: '单位', key: '6629U607Z3', img: require('@/assets/images/banner/B-ZH-08.png') },
{ name: 'B-XXD-10', desc: '地名', key: '45F6S2H013', img: require('@/assets/images/banner/icon_dz.png') },
{ name: 'B-XXD-03', desc: '场所', key: '5W27676C4D', img: require('@/assets/images/banner/B-ZH-06.png') },
{ name: 'B-XXD-09', desc: '基础设施', key: '738I0T03S8', img: require('@/assets/images/banner/B-ZH-01.png') },
{ name: 'B-XXD-04', desc: '道路交通', key: '1874XP0U62', img: require('@/assets/images/banner/B-ZH-02.png') }
],
top: '250px',
showTab: false,
totalPage: 0,
params: {
key: '',
keyword: '',
code: ''
},
screenList: [
{
fullName: '智慧社区',
url: 'http://11.100.6.135:18080/rjzhsq/operationMonitor'
}, {
fullName: '智慧工地',
url: 'http://113.194.84.171:9706/inspect_platform/web/index.html#/screen1'
},
// {
// fullName: '社会治理',
// url: 'http://11.100.6.231:9999/bigScreen/#/grid?areaCode%3D360783%26ticket%3D'
// },
{
fullName: '智慧项管',
url: 'http://113.194.84.171:60900/pmg-web/count/situation/situation-view'
}, {
fullName: '智慧园林',
url: 'http://113.194.84.171:61104/IBMS/static/gismap/showDrawing/index.html'
}, {
fullName: '物联网',
url: 'http://11.100.6.171:8011/dmsiotadmin/system/main'
}
], // 大屏列表
title: [
{
name: '资源环境',
index: [0, 1, 17, 6, 3, 2, 4, 7]
},
{
name: '城市治理',
index: [13, 14, 15, 18]
},
{
name: '社会民生',
index: [10, 5, 12, 8, 9]
},
{
name: '产业经济',
index: [16, 11]
}
],
items: [],
disable: false,
showFrame: false,
gongdi: false,
shequ: false,
tingche: false,
leftScreen: true,
videoChannels: [],
trafficChannels: [],
parkChannels: [],
bottom_btn: [],
bottom_choose: [],
videoToken: '', // 视频云token
videoUrl: '', // 视频地址
videoTimer: null, // 视频定时器
videoCount: 60, // 倒计时
videoShow: false, // 视频的显示
player: null, // 播放器1
currentPlayer: 'player', // 当前切换palyer
layersShow: [false, false, false, false, false, false, false, false, false, false],
// center: {"lng":114.866004,"lat":25.659501,"alt":800,"heading":0,"pitch":-30},
center:[14.866004,25.659501],
labels: [],
data: {
feature: [],
polygon: []
},
cartimer: null
}
},
computed: {
...mapState(['addMarker'])
},
mounted () {
let _this = this
// window.trail = _this.trail
// window.getVideo = _this.getVideo
// this.getVideoToken()
this.clickTitle(0)
this.initmap()
},
watch: {
addMarker (val) {
this.fly2Marker(val.lat, val.lng, val.pop, val.icon)
}
},
methods: {
// 获取所有通道
getChannels () {
let params = {
'token': this.videoToken
}
fetchChannels(params).then(res => {
if (res.code === 1) {
this.videoChannels = res.data
// todo: 过滤摄像头
this.trafficChannels = res.data.filter((item) => {
return item.channelSn.startsWith('3607013407')
})
this.parkChannels = res.data.filter((item) => {
return item.channelSn.startsWith('3607013404')
})
// this.videoChannels = res.data.filter((item) => {
// return item.online === '1'
// })
// this.offlineVideoChannels = res.data.filter((item) => {
// return item.online !== '1'
// })
}
})
},
// 获取视频相关参数
getVideoToken () {
fetchVideoToken().then(res => {
if (res.code === 1) {
this.videoToken = res.data
this.getChannels()
this.videoTimer = setInterval(() => {
if (this.videoCount > 1) {
this.videoCount--
} else {
this.getFlushVideoToken()
}
}, 1000)
}
})
},
// 漫游
fly(){
const graphicLayer = new mars3d.layer.GraphicLayer()
window.map.addLayer(graphicLayer)
const positions = [
{ "lat":25.672182,"lng":114.844542,"alt":7596,"heading":0,"pitch":-45, datatime: "2021/3/25 0:01:00" },
{ "lat":25.661137,"lng":114.908147,"alt":9327,"heading":342,"pitch":-36, datatime: "2021/3/25 0:01:00" },
{ lng: 114.876365,lat: 25.747736, alt: 1785, datatime: "2021/3/25 0:01:02" },
{ lng: 114.87817, lat: 25.77338, alt: 107.1, datatime: "2021/3/25 0:01:04" }
// ,
// {lng:114.875995,lat:25.69927,alt:6818, datatime: "2021/3/25 0:01:04" }
]
const fixedRoute = new mars3d.graphic.FixedRoute({
name: "空中漫游",
timeField: "datatime",
positions: positions,
autoStop: true,
clockLoop: false, // 是否循环播放
interpolation: true, // setInterpolationOptions插值
camera: {
type: "gs",
followedX: 50,
followedZ: 30
}
})
graphicLayer.addGraphic(fixedRoute)
// // ui面板信息展示
fixedRoute.on(mars3d.EventType.end, (event) => {
window.map.removeLayer(graphicLayer)
})
// 开始漫游
fixedRoute.start()
},
setCenter(position) {
//TODO center: {"lng":114.866004,"lat":25.659501,"alt":800,"heading":0,"pitch":-30},
var center = { lat: 25.659501, lng: 114.866004, alt: 7401, heading: 0, pitch: -30 }
window.map.setCameraView(center)
},
// 刷新token
getFlushVideoToken () {
this.videoCount = 60
let params = {
'token': this.videoToken
}
fetchFlushVideoToken(params).then(res => {
if (res.code === 1) {
this.videoToken = res.data
}
})
},
// changePage (val) {
// if (this.disable) return
// if (val === 1) {
// if (this.params.page !== this.totalPage) {
// this.params.page++
// this.search()
// }
// } else {
// if (this.params.page !== 1) {
// this.params.page--
// this.search()
// }
// }
// },
bottom_click (val) {
this.bottom_choose = this.bottom_choose.map(item => { return false })
this.bottom_choose[val] = true
this.fetchData({value: this.bottom_btn[val]})
},
closeFrame () {
this.showFrame = false
},
clickLabel (val) {
this.layersShow = [false, false, false, false, false, false, false, false, false, false]
this.layersShow[val] = true
for (let i = 0; i < this.labels.length; i++) {
if (i !== val) {
for (let j = 0; j < this.labels[i].layersShow.length; j++) {
this.labels[i].layersShow[j] = false
}
}
}
if (this.labels[val].name === '应急指挥调度') {
// console.log(this.$refs.mapframe)
this.showFrame = true
this.$refs.mapframe.reloadUrl(document.location.toString(), 'http://11.100.6.143:13007/EnvironmentMonitor?ticket%3D')
} else if (this.labels[val].index === '04') {
this.clearAll()
this.singleSearch('在建/已建项目', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/symbol/B-ZH-08010000.png'),
[
{name: '项目名称', value: 'YSMC'},
{name: '项目类型', value: 'YSDM'},
{name: '项目状态', value: 'JSJD'},
{name: '项目详情', value: 'S_DZQC'},
{name: '开工时间', value: 'GXSJ'} ], false)
this.drawPolygon('B-ZH-0802', '9C7MXQ1IF2')
} else if (this.labels[val].index === '14') {
this.clearAll()
this.drawGeoServer('gz-shp:A_JT_CJGL_PL_1000', 'R5YWG57UC9', '#2ee141', 'line')
} else if (this.labels[val].index === '06') {
this.clearAll()
this.singleSearch('公园分布', 'B-ZH-0901', '604NVD1231', require('@/assets/images/symbol/B-ZH-09010000.png'),
[ {name: '公园名称', value: 'SSSJFW'}, {name: '公园地址', value: 'S_DZQC'} ], false)
this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
} else if (this.labels[val].index === '03') {
this.clearAll()
this.searchGongdi()
} else if (this.labels[val].index === '05') {
this.clearAll()
this.searchShequ()
this.drawPolygon('B-ZH-1004', 'VM0V81395N')
} else if (this.labels[val].index === '11') {
this.clearAll()
this.searchTingche()
this.drawPolygon('B-ZH-1702', 'VM0V81395N')
}
},
// 取随机数字
random (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
},
async initmap () {
let mapOptions = {
scene: {
// 默认视角参数
center: {"lng":114.866004,"lat":25.659501,"alt":800,"heading":0,"pitch":-30},
// center: { lat: 31.215956, lng: 121.508605, alt: 887, heading: 5, pitch: -26 },
// 以下是Cesium.Globe对象相关参数
globe: {
depthTestAgainstTerrain: false, // 是否启用深度监测
// baseColor: 'rgba(0,0,0,0.78)', // 地球默认背景色
showGroundAtmosphere: true, // 是否在地球上绘制的地面大气
enableLighting: false // 是否显示昼夜区域
}
},
control: {
homeBtn: true,
infoBox: false,
baseLayerPicker: true, // basemaps底图切换按钮
contextmenu: { hasDefault: true, preventDefault: false },
},
basemaps:[
{
name: "腾讯深蓝色",
icon: "img/basemaps/bd-c-midnight.png",
type: "tencent",
layer: "custom",
style: "4",
show: false
},
{
name: "百度黑色",
icon: "img/basemaps/bd-c-dark.png",
type: "baidu",
layer: "custom",
style: "dark",
show: true
},
],
layers: [
{
type: "geojson",
name: "河流(面状)",
url: "http://11.100.6.149:8083/3d/rj_sy.json",
symbol: {
type: "waterC",
styleOptions: {
height: 25, // 水面高度
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.4, // 透明度
clampToGround: false // 是否贴地
}
},
show: true
},
{
type: "3dtiles",
name: "赣州建筑物",
// url: "http://192.168.8.111:9003/model/taT0ftXcS/tileset.json",
// url: "http://localhost:9003/model/tvf7DBpYs/tileset.json",
url: "http://11.100.6.149:8083/3d/tileset.json",
maximumScreenSpaceError: 1,
maximumMemoryUsage: 2048,
style: {
color: "rgb(52,125,246)"
},
marsJzwStyle: true,
show: true
},
{
type: "geojson",
name: "市区一级道路",
url: "http://111.198.10.15:11404/3d/rj_zygd.json",
symbol: {
styleOptions: {
width: 4.0,
materialType: mars3d.MaterialType.ODLine,
materialOptions: {
bgColor: new Cesium.Color(0.1, 0.7, 0.5, 0.4),
color: new Cesium.Color(Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0),
speed: 5 + 1.0 * Math.random(),
startTime: Math.random()
}
}
},
popup: "{Name}",
show: true
}
]
}
// 创建三维地球场景
let map = new mars3d.Map('mars3dContainer', mapOptions)
map.scene.screenSpaceCameraController.enableCollisionDetection = false
// 设置鼠标
map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
// 缩放设置 重新设置缩放成员
map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
// 鼠标左键平移
map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
window.map = map
const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
handler.setInputAction(function(evt) {
var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
console.log(' {point: [' + lng + ',' + lat + ',0]},')
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 加动态图层
layers.feature = new mars3d.layer.GraphicLayer()
layers.polygon = new mars3d.layer.GraphicLayer()
map.addLayer(layers.feature)
map.addLayer(layers.polygon)
this.showAreaBoundaryWall()
this.initlight()
window.map.addLayer(this.addFlyLine())
// let loadBuilding = await this.loadBuilding()
},
// 显示行政区划墙-效果不好，废除
showAreaBoundaryWall(){
// map.setCameraView({ lat: 30.561661, lng: 117.663884, alt: 113078, heading: 346, pitch: -43 })
const graphicLayer = new mars3d.layer.GeoJsonLayer({
name: "蓉江新区",
url: "http://11.100.6.149:8083/3d/rj_bj.json",
symbol: {
type: "wall",
styleOptions: {
fill: true,
diffHeight: 300, // 墙高
materialType: mars3d.MaterialType.LineFlow,
// arcType: Cesium.ArcType.GEODESIC,
outlineWidth: 8,
outlineOpacity: 0.8,
materialOptions: {
color: "#eedd88", // 颜色
opacity: 0.6, // 透明度
outlineColor: "#ffffff",
addHeight:200,
image: "http://mars3d.cn/img/textures/fence.png", // 图片
repeatX: 3, // 重复数量
axisY: true, // 竖直方向
speed: 10// 速度
},
// 高亮时的样式
highlight: {
type: "click",
color: "#ffff00"
}
}
},
flyTo: true,
popup: "{name}"
})
window.map.addLayer(graphicLayer)
},
// 初始化灯光
initlight(){
// 初始化灯光
window.map.scene.light = new Cesium.DirectionalLight({
direction: map.scene.camera.direction
})
window.map.on(mars3d.EventType.cameraMoveEnd, function (event) {
map.scene.light.direction = map.scene.camera.direction
})
let bloomEffect = new mars3d.effect.BloomEffect({
enabled: true
})
window.map.addEffect(bloomEffect)
const graphicLayer = new mars3d.layer.GraphicLayer()
window.map.addLayer(graphicLayer)
// 运行指挥中心点
const position = [114.877759, 25.773393, 0] // 用于围绕旋转 + 中心点扩散 + 旋转的图片
const center = Cesium.Cartesian3.fromDegrees(position[0], position[1], 140) // 用于div标注和远眺的线
// divgraphic标注
const divgraphic = new mars3d.graphic.DivGraphic({
position: center,
style: {
html: `<div class='marsBlackPanel'><div class='marsBlackPanel-text'>运行指挥中心</div>
<link rel='stylesheet' href='/styles/city.css' />
</div>`,
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 横向定位
verticalOrigin: Cesium.VerticalOrigin.CENTER // 垂直定位
}
})
graphicLayer.addGraphic(divgraphic)
// 旋转的图片 -- 中心围墙
const WallImagePositions = mars3d.PolyUtil.getEllipseOuterPositions({
position: position,
radius: 50, // 半径
count: 50 // 共返回(count*4)个点
})
//扫描点
const rotatWallImage = new mars3d.graphic.WallPrimitive({
positions: WallImagePositions,
style: {
diffHeight: 190,
closure: true,
materialType: mars3d.MaterialType.RectSlide,
materialOptions: {
image: "/img/tietu/circular.png",
speed: 2
}
}
})
graphicLayer.addGraphic(rotatWallImage)
// 中心扩散点
const circleDiffuseWallGlow = new mars3d.graphic.DiffuseWall({
name: "中心扩散点",
position: position,
style: {
diffHeight: 200, // 高度
radius: 200, // 半径
color: "#7ffeff",
speed: 15 // 速度
}
})
graphicLayer.addGraphic(circleDiffuseWallGlow)
//四面体加载
const tetrahedron = new mars3d.graphic.Tetrahedron({
position: [position[0], position[1], 220],
style: {
width: 40,
height: 60,
color: "rgba(200,200,0,0.7)",
moveHeight: 50
}
})
graphicLayer.addGraphic(tetrahedron)
// 旋转的图片 -- 底部
let rotation = Cesium.Math.toRadians(50)
function getRotationValue() {
rotation -= 0.007
return rotation
}
const rotatCicleImage = new mars3d.graphic.CircleEntity({
position: position,
style: {
radius: 500,
height: 50,
materialType: mars3d.MaterialType.Image2,
materialOptions: {
image: "img/textures/circle_bg.png"
},
rotation: new Cesium.CallbackProperty(getRotationValue, false),
stRotation: new Cesium.CallbackProperty(getRotationValue, false)
}
})
graphicLayer.addGraphic(rotatCicleImage)
window.map.addLayer(graphicLayer)
},
// 取区域内的随机图标；用于线对象的合并渲染
randomPoint () {
// 114.882505, 25.778006, 0]
const jd = this.random(114.84 * 1000, 114.89 * 1000) / 1000
const wd = this.random(25.76 * 1000, 25.81 * 1000) / 1000
return new mars3d.LngLatPoint(jd, wd, 50)
},
addFlyLine(){
// mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/shanghai-point.json" }).then((result) => {
// const pointArr = []
// result.features.forEach((obj) => {
// pointArr.push({
// name: obj.properties.Name,
// point: obj.geometry.coordinates
// })
// })
//
//
// })
// .catch(function (error) {
// console.log("加载JSON出错", error)
// })
const graphicLayer = new mars3d.layer.GraphicLayer()
//抛物线
mars3d.Util.fetchJson({headers:{'Content-Type':'application/json;'},queryParameters:{id:1}, url: "http://11.100.6.149:8080/monitor2/monitor/api/special/point"})
.then((result) => {
console.log(result)
const pointArr = []
result.data.forEach((obj) => {
pointArr.push({
name: obj.pointName,
point: Cesium.Cartesian3.fromDegrees( obj.lng,obj.lat, 0)
})
})
//材质生成
const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, {
color: new Cesium.Color(1, 1, 1),
bgColor: new Cesium.Color(1, 250/255, 205/255, 0.2),
speed: 5 + 1.0 * Math.random(),
startTime: Math.random()
})
for (let i = 0, len = pointArr.length; i < len; i++) {
const item = pointArr[i]
const color = ["#ffff00", "#81d8ff", "#fff9ed"]
const center = [114.877759, 25.773393, 60]
console.log(item)
const thisPoint = item.point
const positions = mars3d.PolyUtil.getLinkedPointList(thisPoint,center, 30000, 100) // 计算曲线点
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: positions,
style: {
width: 4,
material: lineMaterial // 动画线材质
}
})
graphic.bindPopup(item.name)
graphicLayer.addGraphic(graphic)
// 圆椎体
const coneGlow = new mars3d.graphic.LightCone({
position: item.point,
style: {
radius: 10,
height: 200,
color: color[i % color.length]
},
popup: item.name
})
graphicLayer.addGraphic(coneGlow)
// 动态边框文本 DIV
const graphic1 = new mars3d.graphic.DivBoderLabel({
position: item.point,
style: {
text: item.name,
font_size: 15,
font_family: "微软雅黑",
color: "#ccc",
boderColor: "#15d1f2",
addHeight: 100
},
attr: { remark: "DIV矢量数据" }
})
graphicLayer.addGraphic(graphic1)
}
}).catch(function (error) {
console.log("加载JSON出错", error)
});
// mars3d.Util.fetchJson({ url: "http://111.198.10.15:11404/3d/rj_bz.json" })
// .then((result) => {
// console.log(result)
// const pointArr = []
// result.geometries.forEach((obj) => {
// pointArr.push({
// name: "标注点",
// point: obj.coordinates
// })
//
// })
//
// const lineMaterial = mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.ODLine, {
// color: new Cesium.Color(1, 1, 1),
// bgColor: new Cesium.Color(1, 250/255, 205/255, 0.2),
// speed: 5 + 1.0 * Math.random(),
// startTime: Math.random()
// })
//
// for (let i = 0, len = pointArr.length; i < len; i++) {
// const item = pointArr[i]
//
// const color = ["#ffff00", "#81d8ff", "#fff9ed"]
// const center = [114.877759, 25.773393, 60]
// const thisPoint = Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 1)
// const positions = mars3d.PolyUtil.getLinkedPointList(thisPoint,center, 40000, 100) // 计算曲线点
//
// const graphic = new mars3d.graphic.PolylinePrimitive({
// positions: positions,
// style: {
// width: 4,
// material: lineMaterial // 动画线材质
// }
// })
// graphic.bindPopup(item.name)
// graphicLayer.addGraphic(graphic)
//
// // 圆椎体
// const coneGlow = new mars3d.graphic.LightCone({
// position: Cesium.Cartesian3.fromDegrees(item.point[0], item.point[1], 10),
// style: {
// radius: 10,
// height: 200,
// color: color[i % color.length]
// },
// popup: item.name
// })
// graphicLayer.addGraphic(coneGlow)
// }
// })
// .catch(function (error) {
// console.log("加载JSON出错", error)
// })
// 垂直飞线
return graphicLayer
},
// 楼宇模型-3dtiles
loadBuilding() {
return new Promise(resolve => {
setTimeout(() => {
// 添加参考三维模型;
const tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "赣州市建筑物",
url: "http://11.100.6.149:8083/3d/tileset.json",
// url: "http://192.168.8.111:9003/model/taT0ftXcS/tileset.json",
// url: "http://data1.mars3d.cn/3dtiles/jzw-shanghai/tileset.json",
maximumScreenSpaceError: 1,
maximumMemoryUsage: 1024,
style: {
color: "rgb(0, 99, 255)"
},
// highlight:{
// type:'click',
// color:'#FFFF00',
// outlineEffect: true
// },
marsJzwStyle: false
})
window.map.addLayer(tiles3dLayer)
},200)
// setTimeout(() => {
// let geoJsonLayer = new mars3d.layer.GeoJsonLayer({
// name: '建筑物',
// url: '../static/build.json',
// // url: '//11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=5&outputFormat=application/json&typeName=gz-shp:A_JMDJSS_JMD_PG_1000&F-Auth-Key=7Q55K891Z7',
// // flyTo: true,
// enablePickFeatures: false,
// symbol: {
// type: 'polygonCombine', // 大数据面类型，效率高
// styleOptions: {
// color: '#0098cc',
// opacity: 0.7,
// outline: false
// },
// callback: function (attr, styleOpt) {
// return { height: 0, diffHeight: 20 }
// }
// },
// distanceDisplayCondition: true,
// distanceDisplayCondition_far: 400,
// distanceDisplayCondition_near: 0
// })
// window.map.addLayer(geoJsonLayer)
// }, 2000)
})
},
// 楼宇多边形-大数据面
loadBuildingBak() {
return new Promise(resolve => {
setTimeout(() => {
let geoJsonLayer = new mars3d.layer.GeoJsonLayer({
name: '建筑物',
url: '../static/build.json',
// url: '//11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=5&outputFormat=application/json&typeName=gz-shp:A_JMDJSS_JMD_PG_1000&F-Auth-Key=7Q55K891Z7',
// flyTo: true,
enablePickFeatures: false,
symbol: {
type: 'polygonCombine', // 大数据面类型，效率高
styleOptions: {
color: '#0098cc',
opacity: 0.7,
outline: false
},
callback: function (attr, styleOpt) {
return { height: 0, diffHeight: 20 }
}
},
distanceDisplayCondition: true,
distanceDisplayCondition_far: 400,
distanceDisplayCondition_near: 0
})
window.map.addLayer(geoJsonLayer)
}, 2000)
})
},
fetchData ({value}) {
this.clearAll()
// clearInterval(this.cartimer)
switch (value.index) {
case '011':
this.drawGeoServer('gz-shp:A_GX_XZGX_PL_1000', 'N750F19RI8', '#f47219', 'line')
break
case '014':
this.drawGeoServer('gz-shp:A_JJYZQ_XZJXZQ_PG_1000', 'PJ2170Q99G', '{MC}', 'polygon')
break
// case '015':
// this.drawGeoServer('gz-shp:A_JMDJSS_GGFWJQSS_PT_1000', 'E2R8A0IGDV', '', 'polygon')
// break
case '016':
this.drawGeoServer('gz-shp:A_JMDJSS_JMD_PG_1000', '7Q55K891Z7', '', 'none')
break
case '017':
this.drawGeoServer('gz-shp:A_JT_CJGL_PL_1000', 'R5YWG57UC9', '#2ee141', 'line')
break
case '018':
this.drawGeoServer('gz-shp:A_JT_CSDL_PL_1000', 'SR2T32355X', '#2ee141', 'line')
break
case '019':
this.drawGeoServer('gz-shp:A_JT_TL_PL_1000', 'KVQXR71E72', '{}', 'line')
break
case '0110':
this.drawGeoServer('gz-shp:A_JT_XCDL_PL_1000', 'T28S8B7P8B', '#2ee141', 'line')
break
case '0111':
this.drawGeoServer('gz-shp:A_SX_GQ_PG_1000', '41NN75H8Q2', '', 'none')
break
case '0112':
this.drawGeoServer('gz-shp:A_SX_HL_PG_1000', 'LJ5V4R642E', '', 'none')
break
case '0113':
this.drawGeoServer('gz-shp:A_SX_HP_PG_1000', '3FY387EC32', '', 'none')
break
case '0114':
this.drawGeoServer('gz-shp:A_SX_QTSXYS_PG_1000', '0U851BKU4S', '#00e5ef', 'line')
break
case '0116':
this.drawGeoServer('gz-shp:A_SX_SLJFFSS_PT_1000', '46X2J13B8K', '#00e5ef', 'line')
break
case '0117':
this.drawGeoServer('gz-shp:A_ZBYTZ_CSLD_PG_1000', '4MNM5J1E41', '', 'none')
break
case '0118':
this.drawGeoServer('gz-shp:A_ZBYTZ_NLYD_PG_1000', 'MMXC70RC9S', '', 'none')
break
case '021':
this.singleSearch(value.name, 'B-ZH-0101', '3KNOXR30E6', require('@/assets/images/symbol/B-ZH-01010000.png'),
[ {name: '标识器ID号', value: 'SJBH'}, {name: '标识器型号', value: 'SBXH'}, {name: '所属道路', value: 'SSSJFW'} ], false)
break
case '022':
this.singleSearch(value.name, 'B-ZH-0104', 'M1KOD38358', require('@/assets/images/symbol/B-ZH-01040000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '023':
this.singleSearch(value.name, 'B-ZH-0107', 'IVU59JC84I', require('@/assets/images/symbol/B-ZH-01070000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '024':
this.singleSearch(value.name, 'B-ZH-0109', 'VB5P0VER2I', require('@/assets/images/symbol/B-ZH-01090000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '025':
this.singleSearch(value.name, 'B-ZH-0103', 'A376X56055', require('@/assets/images/symbol/B-ZH-01030000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '026':
this.singleSearch(value.name, 'B-ZH-0106', '1Y059A446T', require('@/assets/images/symbol/B-ZH-01060000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '027':
this.singleSearch(value.name, 'B-ZH-0108', '556018Q5T0', require('@/assets/images/symbol/B-ZH-01080000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '028':
this.singleSearch(value.name, 'B-ZH-0110', 'RGW6U23D5A', require('@/assets/images/symbol/B-ZH-01100000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '029':
this.drawGeoServer('gz-shp:A_GX_XZGX_PL_1000', 'N750F19RI8', '#f47219', 'line')
break
case '0210':
this.singleSearch(value.name, 'B-ZH-0113', 'MPMN9UW39J', require('@/assets/images/symbol/B-ZH-01130000.png'),
[{name: '项目名称', value: 'SSSJFW'}, {name: '名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '0211':
this.singleSearch(value.name, 'B-ZH-0114', 'W66135IR61', require('@/assets/images/symbol/B-ZH-01140000.png'),
[{name: '项目名称', value: 'SSSJFW'}, {name: '名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '031':
// this.singleSearch('工地分布', 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/symbol/B-ZH-08010000.png'),
// [{name: '工地名称', value: 'SSSJFW'}, {name: '工程类别', value: 'GCLB'}, {name: '工程状态', value: 'JSJD'}, {name: '开工日期', value: 'GXSJ'}, {name: '项目地址', value: 'S_DZQC'}], false)
this.searchGongdi()
// this.drawPolygon('B-ZH-0702', '2V026Q9MNX')
break
case '032':
this.singleSearch(value.name, 'B-ZH-0703', 'M02CK748UD', require('@/assets/images/symbol/B-ZH-07030000.png'),
[{name: '名称', value: 'SSSJFW'}, {name: '编码', value: 'SJDZBM'}, {name: '经度', value: 'X'}, {name: '纬度', value: 'Y'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '033':
this.singleSearch(value.name, 'B-ZH-0705', 'PA6562EOO6', require('@/assets/images/symbol/B-ZH-07050000.png'),
[{name: '名称', value: 'XXDLXMC'}, {name: '设备状态', value: 'BJZT'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '034':
this.singleSearch(value.name, 'B-ZH-0706', 'O8ZG1T27O9', require('@/assets/images/symbol/B-ZH-07060000.png'),
[{name: '名称', value: 'YSMC'}, {name: '设备状态', value: 'BJZT'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '035':
this.drawPolygon('B-ZH-0707', '105VKI9J63')
break
case '101':
this.singleSearch(value.name, 'B-ZH-0201', 'E09Q6382SI', require('@/assets/images/symbol/B-ZH-02010000.png'),
[{name: '路口地址', value: 'S_DZQC'}], false)
break
case '102':
this.singleSearch(value.name, 'B-ZH-0202', 'MM3KXI4H7I', require('@/assets/images/symbol/B-ZH-02020000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '103':
this.singleSearch(value.name, 'B-ZH-0203', '5EL6NP1129', require('@/assets/images/symbol/B-ZH-02030000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '业务类型', value: 'SBLX'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '104':
this.singleSearch(value.name, 'B-ZH-0208', '6FS433Q5AS', require('@/assets/images/symbol/B-ZH-02080000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '105':
this.singleSearch(value.name, 'B-ZH-0209', '7Q4EG69EA8', require('@/assets/images/symbol/B-ZH-02090000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '106':
this.singleSearch(value.name, 'B-ZH-0210', '22SO741S57', require('@/assets/images/symbol/B-ZH-02100000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '107':
this.singleSearch(value.name, 'B-ZH-0211', '59OMX7SUJR', require('@/assets/images/symbol/B-ZH-02110000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SJYSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '108':
this.singleSearch(value.name, 'B-ZH-0214', '52S5ENI62G', require('@/assets/images/symbol/B-ZH-02140000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '109':
this.singleSearch(value.name, 'B-ZH-0215', 'D7BH2I7J6K', require('@/assets/images/symbol/B-ZH-02150000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '1010':
this.singleSearch(value.name, 'B-ZH-0216', '88K00B18G8', require('@/assets/images/symbol/B-ZH-02160000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '业务类型', value: 'SBLX'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '1012':
this.singleSearch(value.name, 'B-ZH-1801', 'L791G1IK50', require('@/assets/images/symbol/location_3.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '路口名称', value: 'SSSJFW'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '041':
this.singleSearch(value.name, 'B-ZH-0801', '05VA87X3PX', require('@/assets/images/symbol/B-ZH-08010000.png'),
[
{name: '项目名称', value: 'YSMC'},
{name: '项目类型', value: 'YSDM'},
{name: '项目状态', value: 'JSJD'},
{name: '项目详情', value: 'S_DZQC'},
{name: '开工时间', value: 'GXSJ'} ], false)
this.drawPolygon('B-ZH-0802', '9C7MXQ1IF2')
break
case '042':
this.drawGeoPolygon('JTXMGHT_2020_PG', '1M0051Y63N')
break
case '043':
this.drawGeoPolygon('JTXMGHT_2021_PG', '5BNSBCN80G')
break
case '051':
// this.singleSearch('社区分布', 'B-ZH-1001', 'J765870KFV', require('@/assets/images/symbol/B-ZH-10010000.png'),
// [ {name: '社区名称', value: 'SSSJFW'}, {name: '社区地址', value: 'S_DZQC'} ], false)
this.searchShequ()
this.drawPolygon('B-ZH-1004', 'VM0V81395N')
break
case '052':
this.singleSearch('楼栋分布', 'B-ZH-1002', '9949SDP18V', require('@/assets/images/symbol/B-ZH-10020000.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '楼栋地址', value: 'S_DZQC'} ], false)
this.drawPolygon('B-ZH-1005', 'N74B0SINZE')
break
case '053':
this.singleSearch(value.name, 'B-ZH-1017', '7WC6JL1Q5Q', require('@/assets/images/symbol/video.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '054':
this.singleSearch(value.name, 'B-ZH-1018', 'L2XT08A363', require('@/assets/images/symbol/location_3.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '055':
this.singleSearch(value.name, 'B-ZH-1011', 'E9RM56Z1AO', require('@/assets/images/symbol/location_3.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '056':
this.singleSearch(value.name, 'B-ZH-1019', 'I0T108CU9D', require('@/assets/images/symbol/B-ZH-09150000.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '057':
this.singleSearch(value.name, 'B-ZH-1016', '44756D0402', require('@/assets/images/symbol/B-ZH-01030000.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '058':
this.drawGeoServer('gz-shp:ZHSQ_ZPMT_PG', 'A3WS247545', '', 'none')
break
case '059':
this.singleSearch(value.name, 'B-ZH-0908', 'VQ1A4LJ5T7', require('@/assets/images/symbol/B-ZH-09080000.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '0510':
this.singleSearch(value.name, 'B-ZH-1010', 'YUP093V3SF', require('@/assets/images/symbol/location_3.png'),
[ {name: '社区名称', value: 'SSSJFW'}, {name: '设备地址', value: 'S_DZQC'} ], false)
break
case '074':
this.singleSearch(value.name, 'B-ZH-1401', 'HFR7BGDK6I', require('@/assets/images/symbol/location_3.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备状态', value: 'BJZT'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '081':
this.videoSearch(this.trafficChannels, require('@/assets/images/symbol/video.png'),
[ {name: '设备名称', value: 'name'}, {name: '设备状态', value: 'online'} ])
break
case '082':
this.singleSearch('摄像头', 'B-ZH-1502', '76L47133KX', require('@/assets/images/symbol/video.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
break
case '083':
this.singleSearch('摄像头', 'B-ZH-1503', '82TO11RNVO', require('@/assets/images/symbol/video.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], true)
break
case '084':
this.videoSearch(this.parkChannels, require('@/assets/images/symbol/video.png'),
[ {name: '设备名称', value: 'name'}, {name: '设备状态', value: 'online'} ])
break
case '094':
this.singleSearch(value.name, 'B-ZH-1301', '6Z6214RC1P', require('@/assets/images/symbol/B-ZH-13010100.png'),
[ {name: '门禁名称', value: 'YSMC'}, {name: '设备类型', value: 'XXDLXMC'}, {name: '所属企业', value: 'SSSJFW'}, {name: '门禁地点', value: 'S_DZQC'} ], false)
break
case '111':
this.searchTingche()
// this.singleSearch('停车场分布', 'B-ZH-1701', '521355523B', require('@/assets/images/symbol/B-ZH-02070000.png'),
// [ {name: '停车场名称', value: 'SSSJFW'}, {name: '停车场地址', value: 'S_DZQC'} ], false)
break
case '112':
this.singleSearch(value.name, 'B-ZH-1703', 'P875Q65765', require('@/assets/images/symbol/location_3.png'),
[ {name: '停车场名称', value: 'SSSJFW'}, {name: '停车位地点', value: 'S_DZQC'} ], false)
break
case '113':
this.singleSearch(value.name, 'B-ZH-1705', 'T2K9QK67RH', require('@/assets/images/symbol/B-ZH-13010200.png'),
[ {name: '闸口名称', value: 'YSMC'}, {name: '闸口地点', value: 'S_DZQC'} ], false)
break
case '061':
this.singleSearch('公园分布', 'B-ZH-0901', '604NVD1231', require('@/assets/images/symbol/B-ZH-09010000.png'),
[ {name: '公园名称', value: 'SSSJFW'}, {name: '公园地址', value: 'S_DZQC'} ], false)
this.drawPolygon('B-ZH-0928', '5CAQF6UY5V')
break
case '062':
this.singleSearch(value.name, 'B-ZH-0902', 'Q196FIJ3GM', require('@/assets/images/symbol/B-ZH-09020000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '063':
this.singleSearch(value.name, 'B-ZH-0903', 'HT30LE6JQ8', require('@/assets/images/symbol/B-ZH-09030000.png'),
[ {name: '所属公园', value: 'SSSJFW'}, {name: '地址', value: 'S_DZQC'} ], false)
break
case '064':
this.singleSearch(value.name, 'B-ZH-0904', 'M799VAN6RH', require('@/assets/images/symbol/B-ZH-09040000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '065':
this.singleSearch(value.name, 'B-ZH-0905', 'UD3M638O89', require('@/assets/images/symbol/B-ZH-09050000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '066':
this.singleSearch(value.name, 'B-ZH-0906', 'B75BA1CE49', require('@/assets/images/symbol/B-ZH-09060000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '067':
this.singleSearch(value.name, 'B-ZH-0907', 'G63N47O3UN', require('@/assets/images/symbol/B-ZH-09070000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '069':
this.singleSearch(value.name, 'B-ZH-0910', '1IY801490F', require('@/assets/images/symbol/B-ZH-09100000.png'),
[ {name: '所属公园', value: 'SSSJFW'}, {name: '地址', value: 'S_DZQC'} ], false)
break
case '0610':
this.singleSearch(value.name, 'B-ZH-0912', '050495K7IG', require('@/assets/images/symbol/B-ZH-09120000.png'),
[ {name: '商店名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '0611':
this.singleSearch(value.name, 'B-ZH-0913', '9I7838ONHK', require('@/assets/images/symbol/B-ZH-09130000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0612':
this.singleSearch(value.name, 'B-ZH-0914', 'Y3H5C05Z8L', require('@/assets/images/symbol/B-ZH-09140000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0613':
this.singleSearch(value.name, 'B-ZH-0915', 'B47Y83S3QP', require('@/assets/images/symbol/B-ZH-09150000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0614':
this.singleSearch(value.name, 'B-ZH-0916', 'NK060J19Y0', require('@/assets/images/symbol/B-ZH-09160000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0615':
this.singleSearch(value.name, 'B-ZH-0917', 'M2X0R53244', require('@/assets/images/symbol/B-ZH-09170000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0616':
this.singleSearch(value.name, 'B-ZH-0918', '6439YG6E08', require('@/assets/images/symbol/B-ZH-09180000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0617':
this.singleSearch(value.name, 'B-ZH-0919', '3EA9LY478S', require('@/assets/images/symbol/B-ZH-09190000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0618':
this.singleSearch(value.name, 'B-ZH-0920', 'PVHKG06H53', require('@/assets/images/symbol/B-ZH-09200000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备编码', value: 'YSDM'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0619':
this.singleSearch(value.name, 'B-ZH-0921', '99VA52VULD', require('@/assets/images/symbol/B-ZH-09210000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0620':
this.singleSearch(value.name, 'B-ZH-0922', 'Q3I1MZ82OR', require('@/assets/images/symbol/B-ZH-09220000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0621':
this.singleSearch(value.name, 'B-ZH-0923', 'N9MPL26835', require('@/assets/images/symbol/B-ZH-09230000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'} ], false)
break
case '0623':
this.singleSearch(value.name, 'B-ZH-0925', 'IWQX15B46C', require('@/assets/images/symbol/B-ZH-09250000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '0624':
this.singleSearch(value.name, 'B-ZH-0926', '3ZO01765YW', require('@/assets/images/symbol/B-ZH-09260000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '121':
this.singleSearch(value.name, 'B-ZH-0601', '0UTH8ITN8V', require('@/assets/images/symbol/B-ZH-06010000.png'),
[ {name: 'id', value: 'DZBM'}, {name: '资产名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '122':
this.singleSearch(value.name, 'B-ZH-0602', 'NKDXH59N95', require('@/assets/images/symbol/B-ZH-06020000.png'),
[ {name: 'id', value: 'DZBM'}, {name: '资产名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '123':
this.singleSearch(value.name, 'B-ZH-0603', '6M8513Z6EL', require('@/assets/images/symbol/B-ZH-06030000.png'),
[ {name: 'id', value: 'DZBM'}, {name: '资产名称', value: 'YSMC'}, {name: '地址', value: 'S_DZQC'}], false)
break
case '131':
this.singleSearch(value.name, 'B-ZH-0520', '988C6OY8T3', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '学校地址', value: 'S_DZQC'} ])
this.drawPolygon('B-ZH-0516', '2TFD2VO00Q')
break
case '132':
this.singleSearch(value.name, 'B-ZH-0501', 'PL00E6B7VQ', require('@/assets/images/symbol/B-ZH-05010000.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '133':
this.singleSearch('摄像头', 'B-ZH-1503', '82TO11RNVO', require('@/assets/images/symbol/video.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '134':
this.singleSearch(value.name, 'B-ZH-0502', '7YVI169735', require('@/assets/images/symbol/B-ZH-05020000.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '135':
this.singleSearch(value.name, 'B-ZH-0504', '61M353CXL7', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '136':
this.singleSearch(value.name, 'B-ZH-0505', 'MIQV72SZ9E', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '137':
this.singleSearch(value.name, 'B-ZH-0506', '0RN7GKV7FN', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '138':
this.singleSearch(value.name, 'B-ZH-0507', 'UB8G0SCHXF', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '139':
this.singleSearch(value.name, 'B-ZH-0508', '23Z6AATV47', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '1310':
this.singleSearch(value.name, 'B-ZH-0509', '3W92ZFE2TG', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '1311':
this.singleSearch(value.name, 'B-ZH-0510', '6QXRX23SB4', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '1312':
this.singleSearch(value.name, 'B-ZH-0511', '6FZF8AZ97A', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '1313':
this.singleSearch(value.name, 'B-ZH-0512', '9154EQ9M46', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '1314':
this.singleSearch(value.name, 'B-ZH-0513', 'IX9D7T6BXX', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备位置', value: 'JSGK'} ], false)
break
case '1315':
this.singleSearch(value.name, 'B-ZH-0514', '963P93R9FU', require('@/assets/images/symbol/location_6.png'),
[ {name: '学校名称', value: 'SSSJFW'}, {name: '班级名称', value: 'YSMC'}, {name: '班级地点', value: 'S_DZQC'} ], false)
break
case '141':
this.singleSearch(value.name, 'B-ZH-0402', '4X137UY07J', require('@/assets/images/symbol/B-ZH-04020000.png'),
[ {name: '案件名称', value: 'YSMC'}, {name: '案件分类', value: 'XXDLXMC'}, {name: '案件详情', value: 'S_DZQC'} ], false)
break
case '142':
this.singleSearch(value.name, 'B-ZH-0403', 'G2YQEM396G', require('@/assets/images/symbol/B-ZH-04030000.png'),
[ {name: '路灯编号', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'} ], false)
break
case '151':
this.singleSearch(value.name, 'B-ZH-0301', 'I7PP584AYC', require('@/assets/images/symbol/B-ZH-03010000.png'),
[ {name: '设备名称', value: 'YSMC'}, {name: '设备地点', value: 'S_DZQC'}, {name: '设备状态', value: 'BJZT'} ], false)
break
case '161':
this.drawGeoServer('gz-shp:YJFKWK2021', 'YEF6D3NF1M', '{CJDMC}', 'polygon')
break
case '162':
this.showFrame = true
this.$refs.mapframe.reloadUrl(document.location.toString(), 'http://11.100.6.231:9999/bigScreen/#/grid?areaCode%3D360783%26ticket%3D')
break
case '171':
this.singleSearch(value.name, 'C-QY-001', '4E31K4B9MP', require('@/assets/images/symbol/C-QY-001.png'),
[
{name: '企业名称', value: 'QYMC'},
{name: '企业类型', value: 'QYLX'},
{name: '行业门类', value: 'XYML'},
{name: '企业状态', value: 'QYZT'},
{name: '成立日期', value: 'CLRQ'},
{name: '联系电话', value: 'YDDH'},
{name: '法定代表人', value: 'FDDBR'},
{name: '法定联系电话', value: 'FDDBRLXDH'},
{name: '经营场所', value: 'ZS'},
{name: '统一社会信用代码', value: 'TYSHXYDM'},
{name: '一般经营项目', value: 'YBJYXM'}
], false)
break
case '172':
this.singleSearch(value.name, 'C-QY-002', '5ZW9421ZVZ', require('@/assets/images/symbol/C-QY-002.png'),
[
{name: '企业名称', value: 'QYMC'}, {name: '所属行业', value: 'SSHY'},
{name: '备注施工单位/监理单位', value: 'BZSGDWHSJLDW'}, {name: '建设项目名称', value: 'JSXMMC'},
{name: '法定代表人', value: 'SSSJFW'}, {name: '法定联系电话', value: 'FDDBRLXDH'},
{name: '企业地址', value: 'ZS'}, {name: '统一社会信用代码', value: 'TYSHXYDM'}
], false)
break
case '173':
this.singleSearch(value.name, 'C-GT-001', '3A11W9ONRM', require('@/assets/images/symbol/C-GT-001.png'),
[ {name: '字号名称', value: 'ZHMC'},
{name: '行业门类', value: 'XYML'},
{name: '个体状态', value: 'QYZT'},
{name: '成立日期', value: 'CLRQ'},
{name: '法定代表人', value: 'FDDBR'},
{name: '法定联系电话', value: 'FDDBRLXDH'},
{name: '经营者证件名称', value: 'JYZZJMC'},
{name: '经营者证件号码', value: 'JYZZJHM'},
{name: '经营场所', value: 'ZS'},
{name: '许可经营项目', value: 'XKJYXM'}
], false)
break
case '181':
this.drawGeoServer('gz-shp:DLGH_PL', '7T1D8DN23G', '', 'none')
break
case '183':
this.drawGeoServer('gz-shp:A_DLZRWG', '22AK6I71B6', '', 'none')
break
default:
break
}
},
async videoSearch (data, icon, items) {
for (let i = 0; i < data.length; i++) {
var graphic = new mars3d.graphic.BillboardEntity({
name: '摄像头',
position: [Number(data[i].gpsX), Number(data[i].gpsY)],
style: {
image: icon,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
var str = `
<div style="font-size: 0.082rem;width:30em;padding: 2em;">
<div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #01fbf6">摄像头</div>`
for (let j in items) {
var item = data[i][items[j].value]
if (typeof item === 'undefined') item = ''
if (item === '1') item = '在线'
if (item === '0') item = '离线'
str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">${items[j].name}：</label>${item}</div>`
}
// 通道
var channelId = '\'' + data[i].channelId + '\''
str += `<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 5px;width: 6em;border-radius: 4px;margin-left: 25em"
id="video" onclick="getVideo(${channelId})">查看视频</button>`
str += `</div>`
graphic.bindPopup(str)
layers.feature.addGraphic(graphic)
if (i === 0) {
window.map.setCameraView({ lat: Number(data[i].gpsY), lng: Number(data[i].gpsX), alt: 20000})
}
}
},
search () {
this.clearAll()
if (this.params.keyword === '' || this.params.key === '' || this.params.code === '') return
let img = require('@/assets/images/symbol/location_3.png')
fetchFeatureInfByKeyword(this.params.code, this.params.key, this.params.keyword).then(response => {
this.data.feature = response.data.data[0].data
for (let i = 0; i < this.data.feature.length; i++) {
var graphic = new mars3d.graphic.BillboardEntity({
position: [Number(this.data.feature[i].x), Number(this.data.feature[i].y)],
style: {
image: img,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
let str = `
<div style="font-size: 0.082rem;width:30em;padding: 2em;margin-bottom:2em">
<div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #01fbf6">${this.data.feature[i].ysmc}</div>`
str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">名称：</label>${this.data.feature[i].ysmc}</div>`
// str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">状态：</label>${this.data.feature[i].resCode}</div>`
str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">地址：</label>${this.data.feature[i].dzqc}</div>`
str += `</div>`
graphic.bindPopup(str)
layers.feature.addGraphic(graphic)
if (i === 0) {
window.map.setCameraView({ lat: Number(this.data.feature[i].y), lng: Number(this.data.feature[i].x), alt: 20000})
}
}
})
},
clickTitle (index) {
this.title5 = [false, false, false, false]
this.title5[index] = true
this.labels = []
this.layersShow = [false, false, false, false, false, false, false, false, false, false]
for (const val of this.title[index].index) {
this.labels.push(labelsOption[val])
}
},
clearAll () {
layers.feature.clear()
layers.polygon.clear()
if (layers.heatLayer) {
window.map.removeLayer(layers.heatLayer, true)
layers.heatLayer = null
}
if (layers.tileLayer) {
window.map.removeLayer(layers.tileLayer, true)
layers.tileLayer = null
}
this.showFrame = false
this.gongdi = false
},
async searchShequ () {
let that = this
let icon = require('@/assets/images/symbol/B-ZH-10010000.png')
searchSheQu().then(response => {
this.data.feature = response.data
for (let i = 0; i < this.data.feature.length; i++) {
if (this.data.feature[i].lat === '' || this.data.feature[i].lon === '' || this.data.feature[i].lat === '0' || this.data.feature[i].lat === 0) continue
let graphic = new mars3d.graphic.BillboardEntity({
name: this.data.feature[i].id,
position: [Number(this.data.feature[i].lon), Number(this.data.feature[i].lat)],
style: {
image: icon,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
graphic.on('click', function (e) {
that.shequ = true
that.$nextTick(() => {
that.$refs.shequ.init(e.target.options.name)
})
})
layers.feature.addGraphic(graphic)
if (i === 0) {
window.map.setCameraView({ lat: Number(this.data.feature[i].lat), lng: Number(this.data.feature[i].lon), alt: 20000})
}
}
})
},
async searchGongdi () {
let that = this
let icon = require('@/assets/images/symbol/B-ZH-08010000.png')
// let list = []
fetchConstructionDetail().then(response => {
this.data.feature = response.data
for (let i = 0; i < this.data.feature.length; i++) {
if (this.data.feature[i].latitude === '' || this.data.feature[i].longitude === '' || this.data.feature[i].latitude === '0' || this.data.feature[i].latitude === 0) continue
let graphic = new mars3d.graphic.BillboardEntity({
name: this.data.feature[i].projectNum,
position: [Number(this.data.feature[i].longitude), Number(this.data.feature[i].latitude)],
style: {
image: icon,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
graphic.on('click', function (e) {
that.gongdi = true
that.$nextTick(() => {
that.$refs.gongdi.init(e.target.options.name)
})
})
// list.push([Number(this.data.feature[i].latitude), Number(this.data.feature[i].longitude)])
layers.feature.addGraphic(graphic)
if (i === 0) {
window.map.setCameraView({ lat: Number(this.data.feature[i].latitude), lng: Number(this.data.feature[i].longitude), alt: 120000})
}
}
// this.setZoom(list)
})
},
async searchTingche () {
let that = this
let icon = require('@/assets/images/symbol/B-ZH-02070000.png')
searchTingChe().then(response => {
this.data.feature = response.data
for (let i = 0; i < this.data.feature.length; i++) {
if (this.data.feature[i].lat === '' || this.data.feature[i].lng === '' || this.data.feature[i].lng === '0' || this.data.feature[i].lat === 0) continue
let graphic = new mars3d.graphic.BillboardEntity({
name: this.data.feature[i],
position: [Number(this.data.feature[i].lng), Number(this.data.feature[i].lat)],
style: {
image: icon,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
graphic.on('click', function (e) {
that.tingche = true
that.$nextTick(() => {
that.$refs.tingche.init(e.target.options.name)
})
})
layers.feature.addGraphic(graphic)
if (i === 0) {
window.map.setCameraView({ lat: Number(this.data.feature[i].lat), lng: Number(this.data.feature[i].lng), alt: 120000})
}
}
})
},
async singleSearch (value, code, key, icon, items, showbtn = false) {
fetchFeatureInfo(code, key).then(response => {
this.data.feature = response.data.data[0].data
for (let i = 0; i < this.data.feature.length; i++) {
var graphic = new mars3d.graphic.BillboardEntity({
name: value,
position: [Number(this.data.feature[i].X), Number(this.data.feature[i].Y)],
style: {
image: icon,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
var str = `
<div style="font-size: 0.082rem;width:30em;padding: 2em;margin-bottom:2em">
<div style="font-size: 0.085rem;font-weight: bold;padding-bottom: 10px;color: #01fbf6">${value}</div>`
for (let j in items) {
var item = this.data.feature[i][items[j].value]
if (typeof item === 'undefined') item = ''
str += ` <div style="padding-bottom: 2px"><label style="padding-right: 5px">${items[j].name}：</label>${item}</div>`
}
if (showbtn) {
var SSKZQBH = '\'' + this.data.feature[i].SSKZQBH + '\''
str += `<button style="background-color: #e6a23c;border-color: #e6a23c;color: white;padding: 5px 15px;border-radius: 4px;margin-left: 25em"
id="video" onclick="getVideo(${SSKZQBH})">查看视频</button>`
}
str += `</div>`
graphic.bindPopup(str)
layers.feature.addGraphic(graphic)
if (i === 0) {
window.map.setCameraView({ lat: Number(this.data.feature[i].Y), lng: Number(this.data.feature[i].X), alt: 100000})
}
}
})
},
async fly2Marker (lat, lng, str, icon) {
var graphic = new mars3d.graphic.BillboardEntity({
// name: value,
position: [Number(lng), Number(lat)],
style: {
image: icon,
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
}
})
if (str.startsWith('gongdi')) {
let that = this
graphic.on('click', function (e) {
that.gongdi = true
that.$nextTick(() => {
that.$refs.gongdi.init(str.split(':')[1])
})
})
} else if (str.startsWith('shequ')) {
let that = this
graphic.on('click', function (e) {
that.shequ = true
that.$nextTick(() => {
that.$refs.shequ.init(str.split(':')[1])
})
})
} else {
graphic.bindPopup(str)
}
layers.feature.addGraphic(graphic)
window.map.setCameraView({ lat: Number(lat), lng: Number(lng), alt: 10000})
},
getVideo: function (channelId) {
let params = {
'token': this.videoToken,
'channelId': channelId
}
fetchVideo(params).then(res => {
if (res.code === 1) {
const videoUrl = res.data.url
if (videoUrl) {
if (this.currentPlayer === 'player') {
this.videoUrl = videoUrl
this.videoShow = true
this.videoPlay1(videoUrl)
this.currentPlayer = 'player'
}
} else {
alert('no videoUrl')
}
}
})
},
// 视频播放1
videoPlay1 (videoUrl) {
let id = 'player-con'
!this.player && (this.player = new Aliplayer({
id: id,
width: '100%',
height: '100%',
autoplay: true, // 自动播放
isLive: true,
// rePlay: true, // 重复播放
// 支持播放地址播放,此播放优先级最高
source: videoUrl
}, function (player) {
console.log('播放器创建好了。')
}))
// 切换视频地址
this.player && this.player.loadByUrl(this.videoUrl)
// 播放器暂停/播放
var _video = document.querySelector('video')
this.player.on('play', function (e) {
_video.removeEventListener('click', play)
_video.addEventListener('click', pause)
})
this.player.on('pause', function (e) {
_video.removeEventListener('click', pause)
_video.addEventListener('click', play)
})
function play () {
if (this.player) this.player.play()
}
function pause () {
if (this.player) this.player.pause()
}
},
async drawGeoPolygon (code, key) {
fetchGeoInfo(code, key).then(response => {
this.data.polygon = response.features
for (let i = 0; i < this.data.polygon.length; i++) { // this.data.polygon.length
var items = this.data.polygon[i].geometry.coordinates[0][0]
let graphic = new mars3d.graphic.PolygonEntity({
positions: items,
style: {
color: '#bebebe',
opacity: 0.5,
outline: true,
outlineWidth: 2,
outlineColor: '#46617b'
}
})
layers.polygon.addGraphic(graphic)
}
})
},
async drawPolygon (code, key) {
fetchFeatureInfo(code, key).then(response => {
this.data.polygon = response.data.data[0].data
for (let i = 0; i < this.data.polygon.length; i++) { // this.data.polygon.length
var items = []
var str = this.data.polygon[i].GEO
if (str.startsWith('POLYGON')) {
str = str.substr(str.indexOf('(') + 2)
str = str.substr(0, str.length - 2)
items = str.split(',')
items = items.map(item => {
var arr = item.substr(1).split(' ')
if (arr.length === 3) {
arr.splice(0, 1)
}
if (arr[1].endsWith(')')) {
arr[1] = arr[1].substr(0, arr[1].length - 1)
}
return arr
})
let graphic = new mars3d.graphic.PolygonEntity({
positions: items,
style: {
color: '#bebebe',
opacity: 0.5,
outline: true,
outlineWidth: 2,
outlineColor: '#46617b'
}
})
layers.polygon.addGraphic(graphic)
} else if (str.startsWith('MULTIPOLYGON')) {
str = str.substr(str.indexOf('(') + 2)
str = str.substr(0, str.length - 2)
var list = str.split('),(')
for (let j = 0; j < list.length; j++) {
list[j] = list[j].substr(1, list[j].length - 2)
items = list[j].split(',')
items = items.map(item => {
var arr = item.substr(1).split(' ')
if (arr.length === 3) {
arr.splice(0, 1)
}
if (arr[1].endsWith(')')) {
arr[1] = arr[1].substr(0, arr[1].length - 1)
}
return arr
})
let graphic = new mars3d.graphic.PolygonEntity({
positions: items,
style: {
color: '#bebebe',
opacity: 0.5,
outline: true,
outlineWidth: 2,
outlineColor: '#46617b'
}
})
layers.polygon.addGraphic(graphic)
}
}
}
})
},
async getBlockPoints () {
const today = dateToString(new Date(), 'y-m-d')
const sevenday = dateToString(getLastWeek(), 'y-m-d')
const params = {params: [sevenday, today]}
fetchBlockPoints(params).then(response => {
if (response.code === 200) {
this.data.feature = response.data
var list = this.data.feature.map(item => {
let str = item.point.substr(item.point.indexOf('(') + 1)
str = str.substr(0, str.length - 1)
var items = str.split(' ')
return { lng: parseFloat(items[0]), lat: parseFloat(items[1]), value: Number(item.speed) }
})
layers.heatLayer = new mars3d.layer.HeatLayer({
positions: list,
heatStyle: {
radius: 170,
blur: 0.85
},
style: {
opacity: 1.0,
clampToGround: true
},
redrawZoom: true,
flyTo: true
})
window.map.addLayer(layers.heatLayer)
}
})
},
changeScreen (val) {
if (val.fullName === '社会治理') {
this.showFrame = true
this.$refs.mapframe.reloadUrl(document.location.toString(), 'http://11.100.6.231:9999/bigScreen/#/grid?areaCode%3D360783%26ticket%3D')
} else {
this.showFrame = true
this.$refs.mapframe.reloadUrlBase(val.url)
}
},
async getEventPoints () {
var style = {
width: 15,
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
color: '#ff3426',
repeat: new Cesium.Cartesian2(20, 1),
image: '../static/image/line.png',
speed: 25
})
}
fetchEventPoints().then(response => {
if (response.code === 200) {
this.data.feature = response.data
for (let i = 0; i < this.data.feature.length; i++) {
let items = this.data.feature[i].lines.split(';')
items = items.map(item => {
return item.split(',')
})
var graphic = new mars3d.graphic.PolylineEntity({
positions: items,
style: style
})
if (graphic.distance < 100) continue
layers.feature.addGraphic(graphic)
}
}
})
},
async drawGeoServer (typename, key, value, style) {
if (style === 'none') {
layers.tileLayer = new mars3d.layer.GeoJsonLayer({
url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&' +
'typeName=' + typename +
'&F-Auth-Key=' + key,
symbol: {
type: 'polygonP', // 大数据面类型，效率高
styleOptions: {
color: '#bebebe',
opacity: 0.5,
outline: true,
outlineWidth: 2,
outlineColor: '#46617b'
}
},
flyTo: true
})
} else if (style === 'line') {
layers.tileLayer = new mars3d.layer.GeoJsonLayer({
url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&' +
'typeName=' + typename +
'&F-Auth-Key=' + key,
symbol: {
type: 'polylineP', // 大数据面类型，效率高
styleOptions: {
color: value,
opacity: 1,
width: 2
}
},
flyTo: true
})
} else if (style === 'line1') {
layers.tileLayer = new mars3d.layer.GeoJsonLayer({
url: 'http://11.100.6.5:8084/services/resource/singleSearch/' +
typename + '?F-Auth-Key=' + key,
symbol: {
type: 'polylineP', // 大数据面类型，效率高
styleOptions: {
color: value,
opacity: 1,
width: 2
}
},
flyTo: true
})
} else if (style === 'polygon') {
layers.tileLayer = new mars3d.layer.GeoJsonLayer({
url: 'http://11.100.6.5:8084/services/geoserver/gz-shp/ows?service=WFS&request=GetFeature&maxFeatures=20&outputFormat=application/json&' +
'typeName=' + typename +
'&F-Auth-Key=' + key,
symbol: {
styleOptions: {
fill: true,
color: '#bebebe',
opacity: 0.5,
outline: true,
outlineWidth: 2,
outlineColor: '#46617b',
label: {
// 面中心点，显示文字的配置
text: value, // 对应的属性名称
opacity: 1,
font_size: 18,
font_family: '宋体',
color: '#00f5ff',
font_weight: 'bold',
font_style: 'normal',
scaleByDistance: true,
scaleByDistance_far: 20000000,
scaleByDistance_farValue: 0.1,
scaleByDistance_near: 1000,
scaleByDistance_nearValue: 1,
visibleDepth: false
}
}
},
flyTo: true
})
}
window.map.addLayer(layers.tileLayer)
}
}
}
</script>
<style rel="stylesheet/css" scoped>
.single-map-container{
//height: 1080px;
//width:7680px;
width:100%;
height:100%;
position:relative
}
/deep/ .mars3d-popup-close-button {
top: 2em;
right: 3em;
}
/deep/ .mars3d-popup{
position: absolute;
left: 12.6em;
}
/deep/ .mars3d-popup-content-wrapper {
box-shadow: 0 0px 0px rgba(0,0,0,0);
max-height: 1000px;
}
/deep/ .mars3d-popup-background {
background-color: #00000000;
background: url("@/assets/images/map/info-bg.png") no-repeat;
background-size: 100% 100%
}
/deep/.mars3d-popup-close-button{
top: 10px;
}
.left{
position:absolute;left:30.3%;z-index:100000;
}
.button {
float: left;
min-width: 250px;
min-height: 80px;
line-height: 80px;
vertical-align: middle;
position: relative;
z-index: 10000;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.button--round-s {
border-radius: 5px;
}
.button--border-thin {
border: 1px solid;
}
.left-screen{
width:3072px !important;
height:960px !important;
z-index:999999999;
position: absolute;
top: 0 !important;
left: 30% !important;
}
.gongdi{
width:1500px !important;
height:900px !important;
z-index:999999999;
position: absolute;
top: -20px !important;
left: 34% !important;
}
.videoBox{
position:absolute;
bottom:0;
right: 33.3% !important;
z-index:999999999;
width:3rem;
height:2rem;
background:#000000;
display:flex;
align-items: start;
flex-wrap: wrap;
.videoBox-subBox{
width: 100%;
height:100%;
position:relative;
}
}
.videoClose{
position: absolute;
right: .05rem;
top: .06rem;
display: inline-block;
color:#fff;
font-size: .09rem;
z-index:999;
cursor: pointer;
}
.btn_bottom{
position: absolute !important;
text-align:center;
width: 100%;
height:70px;
z-index: 1000;
position: fixed; bottom: 0; left: 0;right:0;
.bottom_inner{
height: 2.5em;
position: relative;
margin: 0px auto;
text-align: center
}
}
.button{
cursor: pointer;
color: #fff;
background-size: 100% 100%;
text-align: center;
}
.bottom-btn{
width: 10em;
height: 2.5em;
float: left;
margin-left: 1em;
font-size: 0.088rem;
}
.bottom-select{
background: url("@/assets/images/button/bottom_choose.png") no-repeat;
background-size: 100% 100%;
color: white;
transform-origin: center bottom;
}
.bottom-no-select{
background: url("@/assets/images/button/bottom_normal.png") no-repeat;
background-size: 100% 100%;
color: #FFFFFF;
transform-origin: center bottom;
}
.btn-group-map{
width:10%;
position:absolute;
bottom:8%;
left:46%;
z-index: 1000000;
/*p{*/
/*display: none;*/
/*}*/
}
.btn-group-map:hover{
/*p{*/
/*display: block;*/
/*}*/
}
.map-frame{
position: absolute;
width: 28.5% !important;
height: 95% !important;
/*height: 100%;*/
top: 0%;
left: 35.9%;
z-index: 10000000;
}
.videoBox{
position:absolute;
bottom:0;
right:0;
z-index:999;
width:3.8rem;
height:2.55rem;
background:#000000;
display:flex;
align-items: start;
flex-wrap: wrap;
.videoBox-subBox{
width: 100%;
height:100%;
position:relative;
}
}
.videoClose{
position: absolute;
right: .05rem;
top: .06rem;
display: inline-block;
color:#fff;
font-size: .09rem;
z-index:999;
cursor: pointer;
}
ul {
margin: 0;
padding: 0;
}
.clearfloat::after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.tab-list {
position: relative;
}
.tab-list .tab-itom {
float: left;
list-style: none;
margin-right: 4px;
}
.tab-itom .test-label {
position: relative;
display: block;
width: 85px;
height: 27px;
border: 1px solid transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 27px;
text-align: center;
background: #e7e8eb;
}
.tab-itom .tab-box {
/* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
position: absolute;
left: 0;
top: 28px;
width: 488px;
height: 248px;
border: 1px solid #cbcccc;
border-radius: 5px;
border-top-left-radius: 0px;
background: #fff;
/* 设置层级最低方便选中状态遮挡 */
z-index: 0;
}
/* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
input[type="radio"] {
position: absolute;
opacity: 0;
}
/* 利用选择器实现 tab切换 */
/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked + .test-label {
/* 为了修饰存在的边框背景属性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 为了修饰存在的层级使下边框遮挡下方div的上边框 */
z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked ~ .tab-box {
/* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
z-index: 5;
}
.triangle-up {
width: 0;
height: 0;
border-left: 0.04rem solid transparent;
border-right: 0.04rem solid transparent;
border-bottom: 0.08rem solid #2c8aea;
margin: 0rem 0.05rem;
cursor: pointer
}
.triangle-down {
width: 0;
height: 0;
border-left: 0.04rem solid transparent;
border-right: 0.04rem solid transparent;
border-top: 0.08rem solid #2c8aea;
margin: 0rem 0.05rem;
cursor: pointer
}
.deletebtn{
position:absolute;top:1em;right:31%;z-index:100000;width: 0.485rem;height:0.2rem;
}
.top-title{
position:absolute;
top:0.5em;
left:43%;
z-index:100000;
width: 14%;
height:3em;
justify-content: center;align-items: center;
display: flex;
.block{
width: 25%;
text-align: center;
cursor: pointer;
justify-content: center;align-items: center;
}
}
.search-content{
width: 300px;height: 200px;
background-color: #00192e;border: 1px solid #2c8aea;
display: flex;flex-wrap: wrap;
justify-content: flex-start;
align-items: center;align-content: center;
}
.marsBlackPanel {
min-width: 90px;
min-height: 35px;
position: absolute;
left: 16px;
bottom: 31px;
cursor: default;
opacity: 0.96;
box-sizing: border-box;
}
.marsBlackPanel::before {
content: "";
width: calc(100% + 22px);
height: 39px;
position: absolute;
bottom: -39px;
left: -22px;
background: url("@/assets/images/icon/popupLbl.png") 0px 0px no-repeat;
background-position: 0px 0px;
background-size: cover;
}
.marsBlackPanel-text {
width: 100%;
height: 100%;
text-align: center;
padding: 1px 20px;
font-size: 23px;
font-family: "MicrosoftYaHei";
font-weight: 100;
color: yellow;
line-height: 33px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
}
.cover{
position:absolute;bottom:0px;left:0px;z-index:100000;
background-color: #212224;
width:100px;height: 30px;
}
.btn-list{
position:absolute;top:8px;right:50px;z-index:100000;
/*background-color: #021c33;*/
width:80px;height: 32px;
display: flex;
}
.circle_btn_fly{
width: 32px;
height: 32px;
text-align: center;
border-radius: 50%;
color: white;
background: url("@/assets/images/button/fly.png") 0px 0px no-repeat;
background-position: 0px 0px;
background-size: cover;
margin: 0px 5px;
cursor: pointer;
}
.circle_btn_init{
width: 32px;
height: 32px;
text-align: center;
border-radius: 50%;
color: white;
background: url("@/assets/images/button/init.png") 0px 0px no-repeat;
background-position: 0px 0px;
background-size: cover;
margin: 0px 5px;
cursor: pointer;
}
</style>
