|
|
@@ -30,6 +30,71 @@ import * as mars3d from 'mars3d'
|
|
|
let layerCache = {}
|
|
|
let graphicsLayer = null
|
|
|
let csqGraphicsLayer = null
|
|
|
+const pwkData = {
|
|
|
+ 兴平城市总排口: [
|
|
|
+ { key: '排水设施名称', value: '兴平城市总排口' },
|
|
|
+ { key: '所在行政区', value: '咸阳市兴平县阜寨乡高王村' },
|
|
|
+ { key: '沿渭桩号', value: '渭河干流兴平段左岸桩号144处' },
|
|
|
+ { key: '经度', value: '108度32分12.9秒' },
|
|
|
+ { key: '纬度', value: '34度14分13.9秒' },
|
|
|
+ { key: '单位名称', value: '兴平市住建局' },
|
|
|
+ { key: '单位性质', value: '国家行政机关' },
|
|
|
+ { key: '法人代表', value: '李永成' },
|
|
|
+ { key: '联系人', value: '张小龙' },
|
|
|
+ { key: '电话', value: '029-38836375' },
|
|
|
+ { key: '入渭方式', value: '穿堤' },
|
|
|
+ { key: '设施类型', value: '沟渠' },
|
|
|
+ { key: '管径/断面', value: '日均排污量11.7万吨' },
|
|
|
+ { key: '排水类型', value: '工业排水、污水处理排水、其他排水' },
|
|
|
+ { key: '排放规律', value: '连续排放' },
|
|
|
+ { key: '排水现状', value: '正常使用' },
|
|
|
+ { key: '审批文件', value: '-' },
|
|
|
+ { key: '监管单位', value: '咸阳市生态环境局兴平分局、兴平市住建局、水利局' },
|
|
|
+ { key: '建设时间', value: '-' }
|
|
|
+ ],
|
|
|
+ 兴平城市污水处理厂排口: [
|
|
|
+ { key: '排水设施名称', value: '兴平城市污水处理厂排口' },
|
|
|
+ { key: '所在行政区', value: '咸阳市兴平县阜寨乡高王村' },
|
|
|
+ { key: '沿渭桩号', value: '渭河干流兴平段左岸桩号144处' },
|
|
|
+ { key: '经度', value: '108度32分12.9秒' },
|
|
|
+ { key: '纬度', value: '34度14分13.9秒' },
|
|
|
+ { key: '单位名称', value: '兴平市住建局' },
|
|
|
+ { key: '单位性质', value: '国家行政机关' },
|
|
|
+ { key: '法人代表', value: '李永成' },
|
|
|
+ { key: '联系人', value: '张小龙' },
|
|
|
+ { key: '电话', value: '029-38836375' },
|
|
|
+ { key: '入渭方式', value: '穿堤' },
|
|
|
+ { key: '设施类型', value: '沟渠' },
|
|
|
+ { key: '管径/断面', value: '日均排污量11.7万吨' },
|
|
|
+ { key: '排水类型', value: '工业排水、污水处理排水、其他排水' },
|
|
|
+ { key: '排放规律', value: '连续排放' },
|
|
|
+ { key: '排水现状', value: '正常使用' },
|
|
|
+ { key: '审批文件', value: '-' },
|
|
|
+ { key: '监管单位', value: '咸阳市生态环境局兴平分局、兴平市住建局、水利局' },
|
|
|
+ { key: '建设时间', value: '-' }
|
|
|
+ ],
|
|
|
+ 新兴纺织园污水处理厂排口: [
|
|
|
+ { key: '排水设施名称', value: '新兴纺织园污水处理厂排口' },
|
|
|
+ { key: '所在行政区', value: '咸阳市兴平县阜寨乡段家村' },
|
|
|
+ { key: '沿渭桩号', value: '渭河干流兴平段左岸桩号155处' },
|
|
|
+ { key: '经度', value: '108度37分8.26秒' },
|
|
|
+ { key: '纬度', value: '34度15分37.66秒' },
|
|
|
+ { key: '单位名称', value: '咸阳市新兴纺织园污水处理厂' },
|
|
|
+ { key: '单位性质', value: '企业' },
|
|
|
+ { key: '法人代表', value: '-' },
|
|
|
+ { key: '联系人', value: '-' },
|
|
|
+ { key: '电话', value: '-' },
|
|
|
+ { key: '入渭方式', value: '穿堤' },
|
|
|
+ { key: '设施类型', value: '暗管' },
|
|
|
+ { key: '管径/断面', value: '280cm' },
|
|
|
+ { key: '排水类型', value: '工业排水、污水处理排水、其他排水' },
|
|
|
+ { key: '排放规律', value: '连续排放' },
|
|
|
+ { key: '排水现状', value: '正常使用' },
|
|
|
+ { key: '审批文件', value: '咸水发【2014】699号' },
|
|
|
+ { key: '监管单位', value: '咸阳市生态环境局兴平分局、兴平市水利局' },
|
|
|
+ { key: '建设时间', value: '2014年11月' }
|
|
|
+ ]
|
|
|
+}
|
|
|
export default {
|
|
|
name: 'LayerListView',
|
|
|
data() {
|
|
|
@@ -399,6 +464,31 @@ export default {
|
|
|
layer.on(mars3d.EventType.click, function (event) {
|
|
|
_that.$globalEventBus.$emit('clickWaterStation', event)
|
|
|
})
|
|
|
+ } else if (layer.id === '1-3-1' || layer.id === '1-3-2' || layer.id === '1-3-3') {
|
|
|
+ layer.bindPopup(
|
|
|
+ function (event) {
|
|
|
+ window.closePopupA = function () {
|
|
|
+ event.graphic.closePopup()
|
|
|
+ }
|
|
|
+ const layerName = event.layer?.name
|
|
|
+ const infoData = pwkData[layerName]
|
|
|
+ const items = infoData
|
|
|
+ .map(
|
|
|
+ ({ key, value }) => `
|
|
|
+ <div class="item-inline">
|
|
|
+ <div class="item-inline-title">${key}:</div>
|
|
|
+ <div class="item-inline-desc">${value}</div>
|
|
|
+ </div>`
|
|
|
+ )
|
|
|
+ .join('')
|
|
|
+ console.log(event)
|
|
|
+ return `
|
|
|
+ <div class="fly-popup-boxs">
|
|
|
+ <div class="popup-body">${items}</div>
|
|
|
+ </div>`
|
|
|
+ },
|
|
|
+ { template: false, offsetY: 0 }
|
|
|
+ )
|
|
|
}
|
|
|
},
|
|
|
getMonitorData() {
|
|
|
@@ -406,55 +496,57 @@ export default {
|
|
|
window.map.addLayer(graphicsLayer)
|
|
|
window.requestSDK('/sddnWeiHe/device/deviceSimpleList', { pageNum: 1, pageSize: 10, platFlag: '1', operType: '0' }, {}, 'post').then((res) => {
|
|
|
const data = res.data
|
|
|
- data.forEach((point, index) => {
|
|
|
- const graphic = new mars3d.graphic.BillboardEntity({
|
|
|
- position: [point.longitude, point.latitude],
|
|
|
- style: {
|
|
|
- image: require('./image/camera.png'),
|
|
|
- scale: 0.8,
|
|
|
- clampToGround: true,
|
|
|
- horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
|
|
|
- verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
|
|
|
- pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
|
|
|
- distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(0.0, 500000) // 按视距显示
|
|
|
- },
|
|
|
- attr: { ...point }
|
|
|
- })
|
|
|
- //添加可视化区域
|
|
|
- const sector = new this.mars3d.graphic.CircleEntity({
|
|
|
- id: 'sector_' + index,
|
|
|
- positions: [[point.longitude, point.latitude, 0]],
|
|
|
- style: {
|
|
|
- radius: 6000,
|
|
|
- color: '#32edda',
|
|
|
- opacity: 0.35,
|
|
|
- outline: true,
|
|
|
- outlineWidth: 1,
|
|
|
- outlineColor: '#32edda',
|
|
|
- visibleDepth: false,
|
|
|
- clampToGround: true
|
|
|
- },
|
|
|
- attr: { ...point }
|
|
|
- })
|
|
|
- graphicsLayer.addGraphic(sector)
|
|
|
- graphicsLayer.addGraphic(graphic)
|
|
|
- let that = this
|
|
|
- graphic.on(this.mars3d.EventType.click, function () {
|
|
|
- const pointData = graphic.attr
|
|
|
- that.fetchUrl(pointData).then((res) => {
|
|
|
- if (res.code == 4001) {
|
|
|
- that.$message.warning(JSON.parse(res.msg).resultMsg)
|
|
|
- } else if (res.code == 400) {
|
|
|
- that.$message.error(res.msg)
|
|
|
- } else {
|
|
|
- const url = res.data.streamUrl
|
|
|
- that.$set(pointData, 'url', url)
|
|
|
- that.$globalEventBus.$emit('clickVideoPlay', { point: pointData, visible: true, type: 'click' })
|
|
|
- }
|
|
|
+ if (data) {
|
|
|
+ data.forEach((point, index) => {
|
|
|
+ const graphic = new mars3d.graphic.BillboardEntity({
|
|
|
+ position: [point.longitude, point.latitude],
|
|
|
+ style: {
|
|
|
+ image: require('./image/camera.png'),
|
|
|
+ scale: 0.8,
|
|
|
+ clampToGround: true,
|
|
|
+ horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
|
|
|
+ verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
|
|
|
+ pixelOffset: new this.Cesium.Cartesian2(0, -6), // 偏移量
|
|
|
+ distanceDisplayCondition: new this.Cesium.DistanceDisplayCondition(0.0, 500000) // 按视距显示
|
|
|
+ },
|
|
|
+ attr: { ...point }
|
|
|
+ })
|
|
|
+ //添加可视化区域
|
|
|
+ const sector = new this.mars3d.graphic.CircleEntity({
|
|
|
+ id: 'sector_' + index,
|
|
|
+ positions: [[point.longitude, point.latitude, 0]],
|
|
|
+ style: {
|
|
|
+ radius: 3000,
|
|
|
+ color: '#32edda',
|
|
|
+ opacity: 0.35,
|
|
|
+ outline: true,
|
|
|
+ outlineWidth: 1,
|
|
|
+ outlineColor: '#32edda',
|
|
|
+ visibleDepth: false,
|
|
|
+ clampToGround: true
|
|
|
+ },
|
|
|
+ attr: { ...point }
|
|
|
+ })
|
|
|
+ graphicsLayer.addGraphic(sector)
|
|
|
+ graphicsLayer.addGraphic(graphic)
|
|
|
+ let that = this
|
|
|
+ graphic.on(this.mars3d.EventType.click, function () {
|
|
|
+ const pointData = graphic.attr
|
|
|
+ that.fetchUrl(pointData).then((res) => {
|
|
|
+ if (res.code == 4001) {
|
|
|
+ that.$message.warning(JSON.parse(res.msg).resultMsg)
|
|
|
+ } else if (res.code == 400) {
|
|
|
+ that.$message.error(res.msg)
|
|
|
+ } else {
|
|
|
+ const url = res.data.streamUrl
|
|
|
+ that.$set(pointData, 'url', url)
|
|
|
+ that.$globalEventBus.$emit('clickVideoPlay', { point: pointData, visible: true, type: 'click' })
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
})
|
|
|
- })
|
|
|
- graphicsLayer.flyTo()
|
|
|
+ graphicsLayer.flyTo()
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
fetchUrl(item) {
|
