diff --git a/src/api/camera.js b/src/api/camera.js new file mode 100644 index 0000000..d8732d5 --- /dev/null +++ b/src/api/camera.js @@ -0,0 +1,12 @@ +/** + * 摄像头 + */ +import request from '@/utils/request' +// 摄像头列表 +export function getCameraList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/weather/disaster', + method: 'get', + params + }) +} diff --git a/src/api/camera.js b/src/api/camera.js new file mode 100644 index 0000000..d8732d5 --- /dev/null +++ b/src/api/camera.js @@ -0,0 +1,12 @@ +/** + * 摄像头 + */ +import request from '@/utils/request' +// 摄像头列表 +export function getCameraList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/weather/disaster', + method: 'get', + params + }) +} diff --git a/src/api/weather.js b/src/api/weather.js index ff56e3f..4a9ba5e 100644 --- a/src/api/weather.js +++ b/src/api/weather.js @@ -18,3 +18,11 @@ params }) } +// 地震列表 +export function getEarthquakeList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/earthquake/list', + method: 'get', + params + }) +} diff --git a/src/api/camera.js b/src/api/camera.js new file mode 100644 index 0000000..d8732d5 --- /dev/null +++ b/src/api/camera.js @@ -0,0 +1,12 @@ +/** + * 摄像头 + */ +import request from '@/utils/request' +// 摄像头列表 +export function getCameraList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/weather/disaster', + method: 'get', + params + }) +} diff --git a/src/api/weather.js b/src/api/weather.js index ff56e3f..4a9ba5e 100644 --- a/src/api/weather.js +++ b/src/api/weather.js @@ -18,3 +18,11 @@ params }) } +// 地震列表 +export function getEarthquakeList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/earthquake/list', + method: 'get', + params + }) +} diff --git a/src/icons/svg/icon-camera.svg b/src/icons/svg/icon-camera.svg index 50f7700..bd8e8a0 100644 --- a/src/icons/svg/icon-camera.svg +++ b/src/icons/svg/icon-camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/api/camera.js b/src/api/camera.js new file mode 100644 index 0000000..d8732d5 --- /dev/null +++ b/src/api/camera.js @@ -0,0 +1,12 @@ +/** + * 摄像头 + */ +import request from '@/utils/request' +// 摄像头列表 +export function getCameraList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/weather/disaster', + method: 'get', + params + }) +} diff --git a/src/api/weather.js b/src/api/weather.js index ff56e3f..4a9ba5e 100644 --- a/src/api/weather.js +++ b/src/api/weather.js @@ -18,3 +18,11 @@ params }) } +// 地震列表 +export function getEarthquakeList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/earthquake/list', + method: 'get', + params + }) +} diff --git a/src/icons/svg/icon-camera.svg b/src/icons/svg/icon-camera.svg index 50f7700..bd8e8a0 100644 --- a/src/icons/svg/icon-camera.svg +++ b/src/icons/svg/icon-camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/maps/pipeOverview.vue b/src/views/maps/pipeOverview.vue index bd2d294..5706e58 100644 --- a/src/views/maps/pipeOverview.vue +++ b/src/views/maps/pipeOverview.vue @@ -17,9 +17,9 @@ - - - + + + @@ -34,7 +34,7 @@ import LayoutMap from '../../layout/layoutMap' import ThreatDialog from './components/threatDialog' import HighConsequenceDialog from './components/highConsequenceDialog' -import { getDisasterList } from '@/api/weather' +import { getDisasterList, getEarthquakeList } from '@/api/weather' export default { name: 'PipeOverview', components: { @@ -115,6 +115,8 @@ station2Layer: null, // 站场 valveChamberLayer: null, // 阀室 disasterLayer: null, // 气象灾害图层 + earthquakeLayer: null, // 地震图层 + cameraLayer: null, // 监控图层 pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'], routeLayer: null // 巡检图层 } @@ -129,8 +131,10 @@ this.map._viewer.scene.globe.baseColor.alpha = 0 // this.addHcaPosition() // 添加管理处 - this.addStation() + // this.addStation() this.addRoute() + // this.addCamera() + // this.addEarthquake() // this.addFactoryModel() // this.addStation2() // this.addValveChamber() @@ -307,7 +311,7 @@ addStation2() { const { mars3d } = this var graphicLayer = new mars3d.layer.GraphicLayer() - this.stationLayer = graphicLayer + this.station2Layer = graphicLayer this.map.addLayer(graphicLayer) axios.get('static/config/station.json').then((res) => { res = res.data @@ -334,7 +338,7 @@ addValveChamber() { const { mars3d } = this var graphicLayer = new mars3d.layer.GraphicLayer() - this.stationLayer = graphicLayer + this.valveChamberLayer = graphicLayer this.map.addLayer(graphicLayer) axios.get('static/config/valveChamber.json').then((res) => { res = res.data @@ -414,42 +418,68 @@ } }) }, - // 自定义的弹窗 - addStationDiv() { - const { Cesium, mars3d } = this + // 添加地震 + addEarthquake() { + const { mars3d, Cesium } = this const graphicLayer = new mars3d.layer.GraphicLayer() - this.graphicLayer = graphicLayer + this.earthquakeLayer = graphicLayer this.map.addLayer(graphicLayer) - for (const station of this.highConsequenceStation) { - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 10100), - style: { - html: `
-
-
-
-
-
-
-
-
-
-
${station.name}
-
- `, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), - clampToGround: true, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css - } + getEarthquakeList().then((res) => { + const data = res.data + for (const item of data) { + const img = '/static/images/map/earthquake.png' + const graphic = new mars3d.graphic.BillboardEntity({ + name: '地震', + position: [item.lng, item.lat, 0], + style: { + image: img, + width: 70, + height: 70, + scale: 0.5, + clampToGround: true, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } + }) + var html = `
${item.name}
+
震级：${item.level}
+
震源深度：${item.deep}
+
时间：${item.time}
+
` + graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip() + graphicLayer.addGraphic(graphic) + } + }) + }, + // 添加视频 + addCamera() { + const { mars3d, Cesium } = this + const graphicLayer = new mars3d.layer.GraphicLayer() + this.cameraLayer = graphicLayer + this.map.addLayer(graphicLayer) + getDisasterList().then((res) => { + const data = res.data + for (const item of data) { + const img = '/static/images/map/camera.png' + const graphic = new mars3d.graphic.BillboardEntity({ + name: '监控点', + position: new mars3d.LatLngPoint(item.lng, item.lat, 0), + style: { + image: img, + width: 70, + height: 70, + // hasPixelOffset: true, + // pixelOffsetX: 100, + // pixelOffsetY: -50, + scale: 0.5, + clampToGround: true, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } + }) + graphicLayer.addGraphic(graphic) + } + }) }, // 是否显示高后果区 showHca(show) { @@ -548,6 +578,7 @@ this.addFactoryModel() } }, + // 灾害 showDisaster(show) { if (show) { // 移除 this.disasterShow = false @@ -556,6 +587,28 @@ this.disasterShow = true this.addDisaster() } + }, + // 显示地震 + showEarthquake(show) { + if (show) { // 移除 + this.earthquakeShow = false + this.map.removeLayer(this.earthquakeLayer, true) + } else { + this.earthquakeShow = true + this.addEarthquake() + } + }, + // 显示摄像头 + showCamera(show) { + console.log('func showCamera:'+show) + if (show) { // 移除 + this.cameraShow = false + this.map.removeLayer(this.cameraLayer, true) + } else { + this.cameraShow = true + this.addCamera() + } + console.log('func showCamera over:'+this.cameraShow) } } } diff --git a/src/api/camera.js b/src/api/camera.js new file mode 100644 index 0000000..d8732d5 --- /dev/null +++ b/src/api/camera.js @@ -0,0 +1,12 @@ +/** + * 摄像头 + */ +import request from '@/utils/request' +// 摄像头列表 +export function getCameraList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/weather/disaster', + method: 'get', + params + }) +} diff --git a/src/api/weather.js b/src/api/weather.js index ff56e3f..4a9ba5e 100644 --- a/src/api/weather.js +++ b/src/api/weather.js @@ -18,3 +18,11 @@ params }) } +// 地震列表 +export function getEarthquakeList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/earthquake/list', + method: 'get', + params + }) +} diff --git a/src/icons/svg/icon-camera.svg b/src/icons/svg/icon-camera.svg index 50f7700..bd8e8a0 100644 --- a/src/icons/svg/icon-camera.svg +++ b/src/icons/svg/icon-camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/maps/pipeOverview.vue b/src/views/maps/pipeOverview.vue index bd2d294..5706e58 100644 --- a/src/views/maps/pipeOverview.vue +++ b/src/views/maps/pipeOverview.vue @@ -17,9 +17,9 @@ - - - + + + @@ -34,7 +34,7 @@ import LayoutMap from '../../layout/layoutMap' import ThreatDialog from './components/threatDialog' import HighConsequenceDialog from './components/highConsequenceDialog' -import { getDisasterList } from '@/api/weather' +import { getDisasterList, getEarthquakeList } from '@/api/weather' export default { name: 'PipeOverview', components: { @@ -115,6 +115,8 @@ station2Layer: null, // 站场 valveChamberLayer: null, // 阀室 disasterLayer: null, // 气象灾害图层 + earthquakeLayer: null, // 地震图层 + cameraLayer: null, // 监控图层 pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'], routeLayer: null // 巡检图层 } @@ -129,8 +131,10 @@ this.map._viewer.scene.globe.baseColor.alpha = 0 // this.addHcaPosition() // 添加管理处 - this.addStation() + // this.addStation() this.addRoute() + // this.addCamera() + // this.addEarthquake() // this.addFactoryModel() // this.addStation2() // this.addValveChamber() @@ -307,7 +311,7 @@ addStation2() { const { mars3d } = this var graphicLayer = new mars3d.layer.GraphicLayer() - this.stationLayer = graphicLayer + this.station2Layer = graphicLayer this.map.addLayer(graphicLayer) axios.get('static/config/station.json').then((res) => { res = res.data @@ -334,7 +338,7 @@ addValveChamber() { const { mars3d } = this var graphicLayer = new mars3d.layer.GraphicLayer() - this.stationLayer = graphicLayer + this.valveChamberLayer = graphicLayer this.map.addLayer(graphicLayer) axios.get('static/config/valveChamber.json').then((res) => { res = res.data @@ -414,42 +418,68 @@ } }) }, - // 自定义的弹窗 - addStationDiv() { - const { Cesium, mars3d } = this + // 添加地震 + addEarthquake() { + const { mars3d, Cesium } = this const graphicLayer = new mars3d.layer.GraphicLayer() - this.graphicLayer = graphicLayer + this.earthquakeLayer = graphicLayer this.map.addLayer(graphicLayer) - for (const station of this.highConsequenceStation) { - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 10100), - style: { - html: `
-
-
-
-
-
-
-
-
-
-
${station.name}
-
- `, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), - clampToGround: true, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css - } + getEarthquakeList().then((res) => { + const data = res.data + for (const item of data) { + const img = '/static/images/map/earthquake.png' + const graphic = new mars3d.graphic.BillboardEntity({ + name: '地震', + position: [item.lng, item.lat, 0], + style: { + image: img, + width: 70, + height: 70, + scale: 0.5, + clampToGround: true, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } + }) + var html = `
${item.name}
+
震级：${item.level}
+
震源深度：${item.deep}
+
时间：${item.time}
+
` + graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip() + graphicLayer.addGraphic(graphic) + } + }) + }, + // 添加视频 + addCamera() { + const { mars3d, Cesium } = this + const graphicLayer = new mars3d.layer.GraphicLayer() + this.cameraLayer = graphicLayer + this.map.addLayer(graphicLayer) + getDisasterList().then((res) => { + const data = res.data + for (const item of data) { + const img = '/static/images/map/camera.png' + const graphic = new mars3d.graphic.BillboardEntity({ + name: '监控点', + position: new mars3d.LatLngPoint(item.lng, item.lat, 0), + style: { + image: img, + width: 70, + height: 70, + // hasPixelOffset: true, + // pixelOffsetX: 100, + // pixelOffsetY: -50, + scale: 0.5, + clampToGround: true, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } + }) + graphicLayer.addGraphic(graphic) + } + }) }, // 是否显示高后果区 showHca(show) { @@ -548,6 +578,7 @@ this.addFactoryModel() } }, + // 灾害 showDisaster(show) { if (show) { // 移除 this.disasterShow = false @@ -556,6 +587,28 @@ this.disasterShow = true this.addDisaster() } + }, + // 显示地震 + showEarthquake(show) { + if (show) { // 移除 + this.earthquakeShow = false + this.map.removeLayer(this.earthquakeLayer, true) + } else { + this.earthquakeShow = true + this.addEarthquake() + } + }, + // 显示摄像头 + showCamera(show) { + console.log('func showCamera:'+show) + if (show) { // 移除 + this.cameraShow = false + this.map.removeLayer(this.cameraLayer, true) + } else { + this.cameraShow = true + this.addCamera() + } + console.log('func showCamera over:'+this.cameraShow) } } } diff --git a/static/images/map/camera.png b/static/images/map/camera.png new file mode 100644 index 0000000..2249e00 --- /dev/null +++ b/static/images/map/camera.png Binary files differ diff --git a/src/api/camera.js b/src/api/camera.js new file mode 100644 index 0000000..d8732d5 --- /dev/null +++ b/src/api/camera.js @@ -0,0 +1,12 @@ +/** + * 摄像头 + */ +import request from '@/utils/request' +// 摄像头列表 +export function getCameraList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/weather/disaster', + method: 'get', + params + }) +} diff --git a/src/api/weather.js b/src/api/weather.js index ff56e3f..4a9ba5e 100644 --- a/src/api/weather.js +++ b/src/api/weather.js @@ -18,3 +18,11 @@ params }) } +// 地震列表 +export function getEarthquakeList(params) { + return request({ + url: 'http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/earthquake/list', + method: 'get', + params + }) +} diff --git a/src/icons/svg/icon-camera.svg b/src/icons/svg/icon-camera.svg index 50f7700..bd8e8a0 100644 --- a/src/icons/svg/icon-camera.svg +++ b/src/icons/svg/icon-camera.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/maps/pipeOverview.vue b/src/views/maps/pipeOverview.vue index bd2d294..5706e58 100644 --- a/src/views/maps/pipeOverview.vue +++ b/src/views/maps/pipeOverview.vue @@ -17,9 +17,9 @@ - - - + + + @@ -34,7 +34,7 @@ import LayoutMap from '../../layout/layoutMap' import ThreatDialog from './components/threatDialog' import HighConsequenceDialog from './components/highConsequenceDialog' -import { getDisasterList } from '@/api/weather' +import { getDisasterList, getEarthquakeList } from '@/api/weather' export default { name: 'PipeOverview', components: { @@ -115,6 +115,8 @@ station2Layer: null, // 站场 valveChamberLayer: null, // 阀室 disasterLayer: null, // 气象灾害图层 + earthquakeLayer: null, // 地震图层 + cameraLayer: null, // 监控图层 pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'], routeLayer: null // 巡检图层 } @@ -129,8 +131,10 @@ this.map._viewer.scene.globe.baseColor.alpha = 0 // this.addHcaPosition() // 添加管理处 - this.addStation() + // this.addStation() this.addRoute() + // this.addCamera() + // this.addEarthquake() // this.addFactoryModel() // this.addStation2() // this.addValveChamber() @@ -307,7 +311,7 @@ addStation2() { const { mars3d } = this var graphicLayer = new mars3d.layer.GraphicLayer() - this.stationLayer = graphicLayer + this.station2Layer = graphicLayer this.map.addLayer(graphicLayer) axios.get('static/config/station.json').then((res) => { res = res.data @@ -334,7 +338,7 @@ addValveChamber() { const { mars3d } = this var graphicLayer = new mars3d.layer.GraphicLayer() - this.stationLayer = graphicLayer + this.valveChamberLayer = graphicLayer this.map.addLayer(graphicLayer) axios.get('static/config/valveChamber.json').then((res) => { res = res.data @@ -414,42 +418,68 @@ } }) }, - // 自定义的弹窗 - addStationDiv() { - const { Cesium, mars3d } = this + // 添加地震 + addEarthquake() { + const { mars3d, Cesium } = this const graphicLayer = new mars3d.layer.GraphicLayer() - this.graphicLayer = graphicLayer + this.earthquakeLayer = graphicLayer this.map.addLayer(graphicLayer) - for (const station of this.highConsequenceStation) { - var graphic = new mars3d.graphic.DivGraphic({ - position: Cesium.Cartesian3.fromDegrees(station.x, station.y, 10100), - style: { - html: `
-
-
-
-
-
-
-
-
-
-
${station.name}
-
- `, - // anchor: [0, 0], - horizontalOrigin: Cesium.HorizontalOrigin.LEFT, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(10000, 500000), // 按视距距离显示 - scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1), - clampToGround: true, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - }, - pointerEvents: false // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球 - }) - graphicLayer.addGraphic(graphic) - graphic.testPoint = false // 打开测试点，与DIV点进行对比位置调整css - } + getEarthquakeList().then((res) => { + const data = res.data + for (const item of data) { + const img = '/static/images/map/earthquake.png' + const graphic = new mars3d.graphic.BillboardEntity({ + name: '地震', + position: [item.lng, item.lat, 0], + style: { + image: img, + width: 70, + height: 70, + scale: 0.5, + clampToGround: true, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } + }) + var html = `
${item.name}
+
震级：${item.level}
+
震源深度：${item.deep}
+
时间：${item.time}
+
` + graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip() + graphicLayer.addGraphic(graphic) + } + }) + }, + // 添加视频 + addCamera() { + const { mars3d, Cesium } = this + const graphicLayer = new mars3d.layer.GraphicLayer() + this.cameraLayer = graphicLayer + this.map.addLayer(graphicLayer) + getDisasterList().then((res) => { + const data = res.data + for (const item of data) { + const img = '/static/images/map/camera.png' + const graphic = new mars3d.graphic.BillboardEntity({ + name: '监控点', + position: new mars3d.LatLngPoint(item.lng, item.lat, 0), + style: { + image: img, + width: 70, + height: 70, + // hasPixelOffset: true, + // pixelOffsetX: 100, + // pixelOffsetY: -50, + scale: 0.5, + clampToGround: true, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM + } + }) + graphicLayer.addGraphic(graphic) + } + }) }, // 是否显示高后果区 showHca(show) { @@ -548,6 +578,7 @@ this.addFactoryModel() } }, + // 灾害 showDisaster(show) { if (show) { // 移除 this.disasterShow = false @@ -556,6 +587,28 @@ this.disasterShow = true this.addDisaster() } + }, + // 显示地震 + showEarthquake(show) { + if (show) { // 移除 + this.earthquakeShow = false + this.map.removeLayer(this.earthquakeLayer, true) + } else { + this.earthquakeShow = true + this.addEarthquake() + } + }, + // 显示摄像头 + showCamera(show) { + console.log('func showCamera:'+show) + if (show) { // 移除 + this.cameraShow = false + this.map.removeLayer(this.cameraLayer, true) + } else { + this.cameraShow = true + this.addCamera() + } + console.log('func showCamera over:'+this.cameraShow) } } } diff --git a/static/images/map/camera.png b/static/images/map/camera.png new file mode 100644 index 0000000..2249e00 --- /dev/null +++ b/static/images/map/camera.png Binary files differ diff --git a/static/images/map/earthquake.png b/static/images/map/earthquake.png new file mode 100644 index 0000000..c8411bb --- /dev/null +++ b/static/images/map/earthquake.png Binary files differ