diff --git a/src/api/overview.js b/src/api/overview.js index 331c728..7a17f9d 100644 --- a/src/api/overview.js +++ b/src/api/overview.js @@ -103,3 +103,13 @@ }) } +// 总览marker +export function getMapping(devType) { + return request({ + url: 'overview/wellMapping', + method: 'get', + params: { + devType: devType + } + }) +} diff --git a/src/api/overview.js b/src/api/overview.js index 331c728..7a17f9d 100644 --- a/src/api/overview.js +++ b/src/api/overview.js @@ -103,3 +103,13 @@ }) } +// 总览marker +export function getMapping(devType) { + return request({ + url: 'overview/wellMapping', + method: 'get', + params: { + devType: devType + } + }) +} diff --git a/src/views/overview/overviewSimple.vue b/src/views/overview/overviewSimple.vue index 3c4eb3f..c61f888 100644 --- a/src/views/overview/overviewSimple.vue +++ b/src/views/overview/overviewSimple.vue @@ -31,6 +31,15 @@ + + + + @@ -75,7 +84,7 @@ import { mapGetters } from 'vuex' import SelectTree from '@/components/SelectTree/singleSelect' import { getWellType } from '@/api/well' - import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview' + import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode,getMapping } from '@/api/overview' import DeptSelect from '../../components/DeptSelect/index' import 'mars3d/dist/mars3d.css' @@ -99,6 +108,14 @@ var alarm_layer = null var fly_layer = null var building = null + var flow = null + var street = null + var well_model_layer = null + var watch_model_layer = null + var zs_model_layer = null + var well_pic_layer = null + var watch_pic_layer = null + var zs_pic_layer = null export default { name: 'OverviewSimple', components: { DeptSelect, SelectTree }, @@ -106,6 +123,7 @@ return { type: 'massMarkers', // 加载数据方式：massMarkers或cluster refreshType: 'websocket', // 刷新数据方式：clock或websocket + value: true, showAlarm: true, // 是否显示报警 showAll: false, // 是否显示全部井 alpha: 40, // 是否显示全部井 @@ -180,6 +198,19 @@ this.initmars3d() }, watch: { + value(val){ + if(val){ + window.map.basemap = 2011 + building.show = false + flow.show = false + street.show = true + }else{ + window.map.basemap = 2021 + building.show = true + flow.show = true + street.show = false + } + }, alpha(val){ // img_layer.alpha = val/100 //删 // ysline.alpha = val/100 @@ -244,68 +275,90 @@ }, async initpoints(str) { - // if(sewage_point_layer!==null) window.map.removeLayer(sewage_point_layer) - // if(rain_point_layer!==null) window.map.removeLayer(rain_point_layer) - // if(rain_point_layer1!==null) window.map.removeLayer(rain_point_layer1) - // sewage_point_layer = new mars3d.layer.ArcGisWfsLayer({ - // name: '污水点', - // url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/3', - // where: str, - // minimumLevel: 19, - // symbol: { - // type: 'modelP', - // styleOptions: { - // url: '../static/model/ws3(1).gltf', - // scale: 1.3 - // }, - // callback: function (attr, styleOpt){ - // var val= {attr}.attr - // return {setHeight: -val.井深} - // } - // }, - // popup: '编号：{编号}
名称：{附属物名称}
所属道路：{所属道路}', - // }) - // window.map.addLayer(sewage_point_layer) - // - // rain_point_layer = new mars3d.layer.ArcGisWfsLayer({ - // name: '雨水井', - // url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0', - // where: "附属物名称 = '雨水井' and " + str, - // minimumLevel: 19, - // symbol: { - // type: 'modelP', - // styleOptions: { - // url: '../static/model/ys3.gltf', - // scale: 1.3 - // }, - // callback: function (attr, styleOpt){ - // var val= {attr}.attr - // return {setHeight: -val.井深} - // } - // }, - // popup: '编号：{编号}
名称：{附属物名称}
所属道路：{所属道路}', - // }) - // window.map.addLayer(rain_point_layer) - // - // rain_point_layer1 = new mars3d.layer.ArcGisWfsLayer({ - // name: '雨篦', - // url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0', - // where: "附属物名称 <> '雨水井' and " + str, - // minimumLevel: 19, - // symbol: { - // type: 'modelP', - // styleOptions: { - // url: '../static/model/yubi.gltf', - // scale: 1.3 - // }, - // callback: function (attr, styleOpt){ - // var val= {attr}.attr - // return {setHeight: -val.井深} - // } - // }, - // popup: '编号：{编号}
名称：{附属物名称}
所属道路：{所属道路}', - // }) - // window.map.addLayer(rain_point_layer1) + // 井 + let params = '' + getMapping(params).then(response => { + if (response.code === 200) { + if(well_model_layer!==null) window.map.removeLayer(well_model_layer) + well_model_layer = new mars3d.layer.GraphicLayer() + window.map.addLayer(well_model_layer) + for(let i=0;i井编号：${response.data[i].wellCode}
所属单位：${response.data[i].deptName}
详细位置：${response.data[i].position}`, + })) + } + } + }) + params = '13' + getMapping(params).then(response => { + if (response.code === 200) { + if(watch_model_layer!==null) window.map.removeLayer(watch_model_layer) + watch_model_layer = new mars3d.layer.GraphicLayer() + window.map.addLayer(watch_model_layer) + if(watch_pic_layer!==null) window.map.removeLayer(watch_pic_layer) + watch_pic_layer = new mars3d.layer.GraphicLayer() + window.map.addLayer(watch_pic_layer) + for(let i=0;i设备编号：${response.data[i].devcode}
设备模型：${response.data[i].modelName}
设备类型：${response.data[i].deviceTypeName}
井编号：${response.data[i].wellCode}
所属单位：${response.data[i].deptName}
详细位置：${response.data[i].position}`, + })) + watch_pic_layer.addGraphic( new mars3d.graphic.BillboardEntity({ + position: [response.data[i].longitude,response.data[i].latitude, 2], + style: { + image: '../static/images/icon/sb.png', + scale: 1, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3), + } + })) + } + } + }) + params = '8' + getMapping(params).then(response => { + if (response.code === 200) { + if(zs_model_layer!==null) window.map.removeLayer(zs_model_layer) + zs_model_layer = new mars3d.layer.GraphicLayer() + window.map.addLayer(zs_model_layer) + + if(zs_pic_layer!==null) window.map.removeLayer(zs_pic_layer) + zs_pic_layer = new mars3d.layer.GraphicLayer() + window.map.addLayer(zs_pic_layer) + for(let i=0;i设备编号：${response.data[i].devcode}
设备模型：${response.data[i].modelName}
设备类型：${response.data[i].deviceTypeName}
井编号：${response.data[i].wellCode}
所属单位：${response.data[i].deptName}
详细位置：${response.data[i].position}`, + })) + zs_pic_layer.addGraphic( new mars3d.graphic.BillboardEntity({ + position: [response.data[i].longitude,response.data[i].latitude, 2], + style: { + image: '../static/images/icon/zs.png', + scale: 1, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3), + } + })) + } + } + }) }, // 初始化放这里 // lat: 35.9, lng: 120.2384, alt: 10000, heading: 360, pitch: -45 @@ -317,7 +370,7 @@ // 以下是Cesium.Globe对象相关参数 globe: { depthTestAgainstTerrain: true, // 是否启用深度监测 - // baseColor: '#00192f', // 地球默认背景色 + baseColor: '#071a69', // 地球默认背景色 showGroundAtmosphere: false, // 是否在地球上绘制的地面大气 enableLighting: false // 是否显示昼夜区域 }, @@ -348,6 +401,37 @@ { name: "注记", type: "tdt", layer: "img_z", key: ["9ae78c51a0a28f06444d541148496e36"] }, ] }, + // { + // pid: 10, + // id: 2011, + // name: "天地图", + // type: "group", + // layers: [ + // { + // name: '行政区划界线', + // type: 'xyz', + // url: 'https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36', + // subdomains: '01234567', + // maximumLevel: 10, + // show: true, + // id: 1, + // templateValues: { + // dataServer: 'http://data.marsgis.cn' + // }, + // zIndex: 0 + // }, + // { + // name: '天地图注记', + // type: 'tdt', + // layer: 'img_z', + // key: ['9ae78c51a0a28f06444d541148496e36'], + // show: true, + // id: 2, + // // templateValues: {dataServer: 'http://data.marsgis.cn'}, + // zIndex: 1 + // } + // ] + // }, { "id": 2021, "pid": 10, @@ -358,22 +442,31 @@ "key": ["9ae78c51a0a28f06444d541148496e36"], "show": true }, - { - "id": 2020, - "pid": 10, - "name": "天地图电子", - "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png", - "type": "group", - "layers": [ - { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] }, - { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] } - ] - }, + // { + // "id": 2020, + // "pid": 10, + // "name": "天地图电子", + // "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png", + // "type": "group", + // "layers": [ + // { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] }, + // { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] } + // ] + // }, + // { + // crs: 'gcj', + // enablePickFeatures: false, + // icon: 'http://mars3d.cn/example/img/basemaps/bd-c-midnight.png', + // id: 2017, + // name: '蓝色底图(GCJ02偏移)', + // type: 'arcgis', + // url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer' + // } ], } // 创建三维地球场景 let map = new mars3d.Map('mars3dContainer', mapOptions) - map.basemap = 2021 + map.basemap = 2011 map.scene.screenSpaceCameraController.enableCollisionDetection = false // 设置鼠标 map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ] @@ -418,7 +511,7 @@ } }) graphicLayer.addGraphic(building) - + building.show = false // var handler = new Cesium.ScreenSpaceEventHandler( map.viewer.canvas); // handler.setInputAction(function(evt) { // var cartesian=map.viewer.camera.pickEllipsoid(evt.position,map.viewer.scene.globe.ellipsoid); @@ -435,40 +528,7 @@ // // }, Cesium.ScreenSpaceEventType.LEFT_CLICK) -// 演示井+icon - graphicLayer.addGraphic(new mars3d.graphic.ModelPrimitive({ - position: [120.24136131092753,35.98781839514239, 0], - style: { - url: '../static/model/ws3(1).gltf', - scale: 2 - }, - popup: '污水井
名称：测试污水井
坐标：120.24136131 , 35.98781839', - })) - - graphicLayer.addGraphic( new mars3d.graphic.BillboardEntity({ - position: [120.24136131092753,35.98781839514239, 0], - style: { - image: '../static/images/icon/fmg.png', - scale: 1, - horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3), - }, - popup: '阀门
设备编号：FM0001
设备类型：阀门
详细位置：120.2413613，35.9878183
' - })) - - graphicLayer.addGraphic( new mars3d.graphic.BillboardEntity({ - position: [120.24136131092753,35.98781839514239, 0.5], - style: { - image: '../static/images/icon/sbr.png', - scale: 1, - horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3), - }, - popup: '报警水表
设备编号：FM0002
设备类型：水表
告警原因：日用水量超阈值报警
告警数值：106.00
告警时间：2022.03.21 12:35:06
详细位置：120.2413613，35.9878183
' - })) const positions = [ { @@ -616,15 +676,21 @@ repeat: [5,20] }, ] + flow = new mars3d.layer.GraphicLayer() + map.addLayer(flow) + street = new mars3d.layer.GraphicLayer() + map.addLayer(street) + for(let j=0;j