feat：排污口添加地图弹窗数据展示

src/assets/scss/index.scss

@@ -2,6 +2,7 @@
 @import '@/assets/scss/reset';
 @import '@/assets/scss/variables';
 @import '@/assets/scss/mixins';
+@import '@/assets/scss/map';
 @import '@/assets/scss/px-to-rem';
 
 html,
@@ -254,43 +255,49 @@ html#baidu-map-hack {
   }
 }
 
-.f-select .el-select-dropdown__item{
-    padding: px-to-rem(0) px-to-rem(12)!important;
-    &.selected{
-        color: #ff6a6c;
-        background-color: #fff0f0;
-    }
-    &.hover{
-      background-color: #fff0f0;
-    }
- }
-.v-date-picker{
-   .el-date-table td.end-date span,.el-date-table td.start-date span{
-      background-color: #ff6a6c;
-   }
-    .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div{
-      background-color: #fff0f0;
+.f-select .el-select-dropdown__item {
+  padding: px-to-rem(0) px-to-rem(12) !important;
+  &.selected {
+    color: #ff6a6c;
+    background-color: #fff0f0;
   }
-    .el-date-table td.today span,.el-select-dropdown__item.selected{
-      color: #ff6a6c;
+  &.hover {
+    background-color: #fff0f0;
   }
 }
-.v-pageination{
-  .el-select-dropdown__item.selected{
+.v-date-picker {
+  .el-date-table td.end-date span,
+  .el-date-table td.start-date span {
+    background-color: #ff6a6c;
+  }
+  .el-date-table td.in-range div,
+  .el-date-table td.in-range div:hover,
+  .el-date-table.is-week-mode .el-date-table__row.current div,
+  .el-date-table.is-week-mode .el-date-table__row:hover div {
+    background-color: #fff0f0;
+  }
+  .el-date-table td.today span,
+  .el-select-dropdown__item.selected {
     color: #ff6a6c;
- }
+  }
+}
+.v-pageination {
+  .el-select-dropdown__item.selected {
+    color: #ff6a6c;
+  }
 }
 
-.marsGreenGradientPnl{
-    height: 20px;
-    background: #172537;
-    border-radius: 4px;
-    color: #e8f2fe;
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    padding: 0 6px;
+.marsGreenGradientPnl {
+  height: 20px;
+  background: #172537;
+  border-radius: 4px;
+  color: #e8f2fe;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
 }
-.art-video-player{
-  width: 100%!important;
-}
+.art-video-player {
+  width: 100% !important;
+}
+

src/assets/scss/map.scss

@@ -1,13 +1,41 @@
-.tdt-cluster0{
-  span{
+.tdt-cluster0 {
+  span {
     margin: 0 !important;
   }
 }
-.map-filter{
-  .tdt-tile[src*="tianditu"]{
+.map-filter {
+  .tdt-tile[src*='tianditu'] {
     filter: contrast(0.53) sepia(1) invert(1) brightness(1.2);
   }
 }
-.tdt-container{
+.tdt-container {
   background: transparent !important;
-}
+}
+
+.fly-popup-boxs {
+  background-color: rgba(32, 65, 99, 0.8);
+  margin: 0.2604vw;
+  .popup-body {
+    display: flex;
+    flex-wrap: wrap;
+    width:35vw;
+    color: #fff;
+    padding: 0.2604vw 0.5208vw;
+    font-size: 0.7292vw;
+    .item-inline {
+      width: 50%;
+      display: flex;
+      height: 1.5625vw;
+      line-height: 1.5625vw;
+      .item-inline-title {
+        flex: 0 0 6em;
+        text-align: right;
+        padding-right: 0.5em;
+      }
+      .item-inline-desc {
+        flex: 1;
+        text-indent: 0.2604vw;
+      }
+    }
+  }
+}

src/views/components/layerList/index.vue

@@ -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) {

src/views/index.vue

@@ -155,25 +155,6 @@ export default {
         })
         graphicLayer.addGraphic(graphic)
       })
-      // const geoJsonLayer = new this.mars3d.layer.GeoJsonLayer({
-      //   url: '/geojson/兴平市.geojson',
-      //   mask: true,
-      //   symbol: {
-      //     styleOptions: {
-      //       fill: true,
-      //       color: 'rgb(2,26,79)',
-      //       opacity: 0.9,
-      //       outline: true,
-      //       outlineColor: '#39E09B',
-      //       outlineWidth: 8,
-      //       outlineOpacity: 0.8,
-      //       arcType: this.Cesium.ArcType.GEODESIC,
-      //       clampToGround: true
-      //     }
-      //   }
-      //   // flyTo: true
-      // })
-      // map.addLayer(geoJsonLayer)
     }
   }
 }

src/views/safety-inspection/index.vue

@@ -70,7 +70,7 @@ export default {
         id: 'sector_' + index,
         positions: [[point.longitude, point.latitude, 0]],
         style: {
-          radius: 6000,
+          radius: 3000,
           color: '#32edda',
           opacity: 0.35,
           outline: true,

src/views/water-station-popup/index.vue

@@ -371,7 +371,7 @@ export default {
           id: 'sector_' + index,
           positions: [[item.longitude, item.latitude, 0]],
           style: {
-            radius: 6000,
+            radius: 3000,
             color: '#32edda',
             opacity: 0.35,
             outline: true,