<template>
<div class="mapcontainer" >
<Map :center="props.config.centerPoint" :url="configUrl" @onload="onMapload" />
<div class="flex-row center markerCheck">
<el-checkbox-group v-model="checkList" @change="typeChange">
<el-checkbox v-for="(item,index) in points" :label="item.value">
<div class="flex-row">
{{item.label}}
<img :src="item.icon" class="check-icon"></img>
</div>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script setup>
import { ref,nextTick ,watch} from 'vue'
import Map from "./map.vue";
import { useRoute } from "vue-router";
import changzhan from '@/assets/images/cockpit/gismap/changzhan.png'
import genzong from '@/assets/images/cockpit/gismap/genzong.png'
import kehu from '@/assets/images/cockpit/gismap/kehu.png'
import qiye from '@/assets/images/cockpit/gismap/qiye.png'
import sanfang from '@/assets/images/cockpit/gismap/sanfang.png'
import shebei from '@/assets/images/cockpit/gismap/shebei.png'
import weixianyuan from '@/assets/images/cockpit/gismap/weixianyuan.png'
import yingji from '@/assets/images/cockpit/gismap/yingji.png'
import yinhuan from '@/assets/images/cockpit/gismap/yinhuan.png'
import yuangong from '@/assets/images/cockpit/gismap/yuangong.png'
import guanwang from '@/assets/images/cockpit/gismap/guanwang.png'
import { allColoums } from './colums.js'
const route = useRoute();
import { conmonGet } from '@/api/cockpit/mapCenter.ts'
// 取随机数字
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
var gisMap = null
const isLoading = ref(false)
let gwparams = {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typeName: 'ne:cloud_pipe_line_1',
startIndex:'0',
propertyName: 'shape,conduit_material,conduit_type,conduit_id,section_no,burying_type,section_length,start_burying,end_burying,is_use,pipe_diameter',
outputFormat: 'application/json',
maxFeatures: '5000',
srsName: 'EPSG:4326',
cql_filter: 'tenant_id=657123 and conduit_id IS NULL',
}
let deviceParams = {
service: 'WFS',
version: '2.0.0',
request: 'GetFeature',
typeName: 'ne:cloud_device_1',
startIndex:'0',
propertyName: 'shape,device_name,is_conduit_up,device_code,device_model,device_material,supplier_name,device_addr',
outputFormat: 'application/json',
maxFeatures: '100000',
srsName: 'EPSG:4326',
cql_filter: 'tenant_id=657123 and conduit_id IS NULL',
}
let customerParams = {
service: 'WFS',
version: '2.0.0',
request: 'GetFeature',
typeName: 'ne:cloud_device_1',//表名
startIndex:'0',
propertyName: 'shape,customer_name,customer_type,telephone,customer_addr,doc_number',
outputFormat: 'application/json',
maxFeatures: '100000',
srsName: 'EPSG:4326',
cql_filter: 'tenant_id=657123 and conduit_id IS NULL',
}
let points = [
{label:'企业',value:'1',source:[],icon:qiye,api:'/home/map/tenant',graphicLayer:null},
{label:'场站',value:'2',source:[],icon:changzhan,api:'/home/map/station',graphicLayer:null},
{label:'管网',tableKey:'pipeTableName',params:gwparams,value:'3',source:[],icon:guanwang,api:'/home/map/pipeLine',graphicLayer:null},
{label:'重大危险源',value:'4',source:[],icon:weixianyuan,api:'/home/map/majorHazard',graphicLayer:null},
{label:'应急事件',value:'5',source:[],icon:yingji,api:'/home/map/event',graphicLayer:null},
{label:'隐患点',value:'6',source:[],icon:yinhuan,api:'/home/map/hidden',graphicLayer:null},
{label:'三方施工',value:'7',source:[],icon:sanfang,api:'/home/map/other',graphicLayer:null},
{label:'客户',tableKey:'customerTableName',params:customerParams,value:'8',source:[],icon:kehu,api:'/home/map/customer',graphicLayer:null},
{label:'设备',tableKey:'deviceTableName',params:deviceParams,value:'9',source:[],icon:shebei,api:'/home/map/device',graphicLayer:null},
{label:'员工',value:'10',source:[],icon:yuangong,api:'',graphicLayer:null},
{label:'隐患跟踪',value:'11',source:[],icon:genzong,api:'/home/map/following',graphicLayer:null},
]
const configUrl = ref("./config/config.json")
const checkList = ref(['1','2','3','4','5','6','7','8','9','10','11'])
const props = defineProps({
config:{
type:Object,
default: ()=>{
}
},
defaultShow:{
type:Array,
default:()=>[]
},
userList:{
type:Array,
default:()=>[]
}
})
// watch(()=>props.defaultShow,()=>{
// checkList.value = props.defaultShow
// if(gisMap){
// initPoints()
// }
// }, {immediate: true,deep:true})
const addPoints = (data)=>{
//let data = points[index]
data.source.forEach((item,index2)=>{
let image = data.icon
let PointImg = new mars3d.graphic.BillboardPrimitive({
name: item.name,
id:item.id,
checkValue:data.value,
position: [item.point[0], item.point[1],800],
style: {
//image: require('@/assets/tan/point.png'),
image,
scale: 0.4,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true
},
// flyTo: index == 0,
attr: { remark: item.name }
})
data.graphicLayer.addGraphic(PointImg)
//this.graphicLayer.addGraphic(PointImg)
})
// this.graphicLayer.enabledEvent = true
}
const rendLines = (list,obj)=>{
// 0:高压 1:次高压 2:中压 3:低压
let colors = ['#E41F15', '#76502A', 'orange', '#2E0ADE']
list && list.forEach(item => {
let lineType = +item.properties._conduit_type
let color = colors[lineType]
let width = lineType == 0 ? 3.0 : 2.0
item.polyline.material = Cesium.Color.fromCssColorString(color)
item.polyline.width = width
item.showType = 2
})
}
const renderDevices = (list,obj) => {
list && list.forEach(item => {
if (item.billboard) {
item.billboard.image = obj.icon
item.billboard.width = 26
item.billboard.height = 38
}
item.showType = 3
})
}
const addData = async (item,data)=>{
let that = this
return new Promise((resolve)=>{
Cesium.GeoJsonDataSource.load(data).then(async (dataSource) => {
gisMap.dataSources.add(dataSource);
item.source = [dataSource];
var entities = dataSource.entities.values;
renderDevices(entities,item)
resolve()
})
})
}
const addLine =(item,data,page) => {
Cesium.GeoJsonDataSource.load(data).then(async (dataSource) => {
item.source.push(dataSource)
gisMap.dataSources.add(dataSource);
var entities = dataSource.entities.values;
rendLines(entities,dataSource)
})
}
const typeChange = ()=>{
nextTick(()=>{
initPoints()
})
}
const addDiv = (item,obj)=>{
let coloum = allColoums[item.value]
points.forEach(p=>{
if(p.divLayer){
p.graphicLayer.removeGraphic(p.divLayer)
}
})
let chtml = ''
function backValue(c) {
if(c.options){
return c.options.find(cc=>cc.value == obj[c.key]).label
}else{
return obj[c.key]
}
}
function mackColoum(coloums){
coloums.forEach(c=>{
if(!c.splitKey){
chtml += ` <div>${c.label}:${backValue(c)}</div>`
}else{
let value = obj[c.splitKey]
mackColoum(c.coloum[value])
}
})
}
mackColoum(coloum)
// return
let html = `<div class="masker-pannel">
<div class="pannel-top">
详情
</div>
<div class="pannel-body f12 c_fff">
${chtml}
</div>
</div>`
let position = [obj.lng, obj.lat, 76.4]
item.divLayer = new mars3d.graphic.DivGraphic({
//position: new mars3d.LngLatPoint(obj.lng, obj.lat),
...obj,
position,
style: {
html,
offsetY: -40,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
// 高亮时的样式
},
// attr: { remark: "示例1" }
})
item.graphicLayer.addGraphic(item.divLayer)
}
const pointClick = (event) =>{
if(event.graphic.options.checkValue&&event.graphic.options.id){
let pitem = points.find(item=>item.value == event.graphic.options.checkValue)
let citem = pitem.source.find(item=>item.id == event.graphic.options.id)
let point = mars3d.LngLatPoint.fromCartesian(event.cartesian);
point.format()
addDiv(pitem,{
...citem,
lat:point._lat,
lng:point._lng,
})
}
}
const initPoints = async ()=>{
isLoading.value = true
for(let index=0;index < points.length;index++ ){
let item = points[index]
if(checkList.value.includes(item.value)){
if(item.source.length == 0){//新增
let data = []
if(item.value != '10'){//员工使用websocket
let res = await conmonGet(item.api)
if(item.params){
let res2 = conmonGet(props.config.gisServerPath,{
...item.params,
typeName:'ne:' + props.config[item.tableKey],
cql_filter:res.data.paramSql
})
data = res2
}else{
data = res.data
}
}
//获取数据结束
//分类加载开始
item.graphicLayer = new mars3d.layer.GraphicLayer()
gisMap.addLayer(item.graphicLayer)
item.graphicLayer.on(mars3d.EventType.click, function (event) {
pointClick(event)
})
if(item.value == '8' || item.value == '9' ){
addData(item,data)
continue
}else if(item.value == '3'){
addLine(item,data,1)
continue
}
if(item.value == 1){
item.source = data.map(item2=>{
return{
...item2,
point:item2.pointStr.split(',')
}
})
}
if(item.value == 2){
item.source = data.map(item2=>{
return{
...item2,
point:[item2.lon,item2.lat]
}
})
}
if(item.value == 4){
item.source = data.map(item2=>{
return{
...item2,
point:item2.coordinatePoint.split(',')
}
})
}
if(item.value == 5){
item.source = data.map(item2=>{
return{
...item2,
point:item2.addressPoint.split(',')
}
})
}
if(item.value == 6){
item.source = data.map(item2=>{
return{
...item2,
point:item2.point.split(',')
}
})
}
if(item.value == 7){
item.source = data.map(item2=>{
return{
...item2,
point:item2.coordinate.split(',')
}
})
}
if(item.value == 11){
item.source = data.map(item2=>{
return{
...item2,
point:item2.hdPoint.split(',')
}
})
}
addPoints(item)
//item.source = stations
}else{ //已经增加过的,直接控制显示
if(item.params){
item.source.forEach(s=>{
s.entities.show = true
})
}else{
if(item.graphicLayer){
item.graphicLayer.show = true
}
}
}
}else{//隐藏
if(item.params){
item.source.forEach(s=>{
s.entities.show = false
})
}else{
if(item.graphicLayer){
item.graphicLayer.show = false
}
// item.graphicLayer.show = false
}
}
}
isLoading.value = false
}
const onMapload = (map) =>{
gisMap = map
map.basemap = 2021
initPoints()
}
watch(() => route.path, (path) => {
if(path == '/total-situation'){
checkList.value = ['1','2','3','8','9']
}else if(path == '/safe-evaluate'){
checkList.value = ['1','9']
}else if(path == '/gas-supply'){
checkList.value = ['1','2','3','8','9']
}else if(path == '/run-safe'){
checkList.value = ['1','4','5','6','7','9']
}else if(path == '/supervise-check'){
checkList.value = ['1','11']
}else if(path == '/dispatch'){
checkList.value = ['1','10']
}
nextTick(() => {
if(gisMap){
initPoints()
}
})
}, {immediate: true})
watch(() => props.userList, (users) => {
let obj = points.find(item=>item.value == '10')
setTimeout(()=>{
if(obj.graphicLayer){
obj.graphicLayer.clear()
}else{
console.log(window.mars3d)
let mars3d = window.mars3d
if(mars3d){
obj.graphicLayer = new mars3d.layer.GraphicLayer()
if(gisMap){
console.log(12456,obj.graphicLayer)
gisMap.addLayer(obj.graphicLayer)
}
}
}
obj.source = users.map(item=>{
let point = item.point.split(',')
return{
...item,
point
}
})
if(gisMap){
addPoints(obj)
}
// if (!gisMap || !window.mars3d) return;
// let obj = points.find(item => item.value == '10');
// if (obj.graphicLayer) {
// obj.graphicLayer.clear();
// } else {
// // 此时 mars3d 已初始化,可安全使用
// obj.graphicLayer = new mars3d.layer.GraphicLayer();
// gisMap.addLayer(obj.graphicLayer); // gisMap 也已存在
// }
// obj.source = users.map(item => {
// let point = item.point.split(',');
// return { ...item, point };
// });
// addPoints(obj);
},2000)
}, {immediate: true,deep:true})
</script>
<style lang="less" scoped>
.mapcontainer {
position: relative;
height: 100%;
overflow: hidden;
/*background: #000;*/
}
.markerCheck{
position: absolute;
left: 50%;
width: 45%;
transform: translateX(-50%);
bottom:28px;
z-index: 999;
padding:0.05rem 0.2rem ;
background-image: url("~@/assets/images/cockpit/map-center/ghbg.png");
background-size: 100% 100%;
}
.markerCheck{
:deep(.el-checkbox-group){
.el-checkbox__label{
color: #fff;
}
.el-checkbox__inner{
background-color: transparent;
}
}
}
:deep(.el-loading-mask){
background-color: rgba(255,255,255,0);
}
</style>
<style>
.masker-pannel {
width: 310px;
min-height: 120px;
background-size: 100% 100%;
background-image: url("~@/assets/icons/svg/hiddenDanger/markerbg.svg");
}
.pannel-top{
height: 29px;
display: flex;
align-items: center;
justify-content: center;
color: #B4E4FF;
background-size: 100% 100%;
background-image: url("~@/assets/icons/svg/hiddenDanger/markertitle.svg");
}
.pannel-body{
padding:10px 15px;
line-height: 2;
}
.check-icon{
width: 20px;
height: auto;
margin-left: 5px;
}
</style>为什么执行到这里就不往下执行了呢?怎么解决呢?