feat:排污口、管理段弹窗信息展示

public/geojson/兴平城市总排口2.geojson

@@ -1,6 +1,6 @@
 {
   "type": "FeatureCollection",
-  "name": "兴平城市总排口",
+  "name": "兴包企业集团工业废水排口",
   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.457912, 34.21285, 0] } }]
+  "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [108.4006389, 34.2083611, 0] } }]
 }

src/assets/scss/index.scss

@@ -2,8 +2,8 @@
 @import '@/assets/scss/reset';
 @import '@/assets/scss/variables';
 @import '@/assets/scss/mixins';
-@import '@/assets/scss/map';
 @import '@/assets/scss/px-to-rem';
+@import '@/assets/scss/map';
 
 html,
 body {

src/assets/scss/map.scss

@@ -13,28 +13,62 @@
 }
 
 .fly-popup-boxs {
-  background-color: rgba(32, 65, 99, 0.8);
+  background-color: rgba(35, 61, 108, 0.8);
   margin: 0.2604vw;
+  .popup-title {
+    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: px-to-rem(39);
+    display: flex;
+    align-items: center;
+    padding: 0 px-to-rem(20);
+    font-size: px-to-rem(16);
+    color: #fff;
+    .title-text {
+      font-weight: bold;
+      margin-left: px-to-rem(20);
+    }
+  }
   .popup-body {
     display: flex;
     flex-wrap: wrap;
-    width:35vw;
+    width: 35vw;
     color: #fff;
-    padding: 0.2604vw 0.5208vw;
+    padding: 0.3604vw 0.6208vw;
     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;
+    /* 表格样式 */
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+    .data-table th,
+    .data-table td {
+      padding: 4px 10px;
+      border: 1px solid #728BBB;
+      text-align: left;
+      vertical-align: middle;
+    }
+    .data-table th {
+      font-weight: 600;
+      color: #fff;
+      white-space: nowrap;
+    }
+    .data-table td {
+    }
+    @media (max-width: 768px) {
+      .data-table th,
+      .data-table td {
+        display: block;
+        width: 100%;
       }
-      .item-inline-desc {
-        flex: 1;
-        text-indent: 0.2604vw;
+
+      .data-table th {
+        border-bottom: none;
+      }
+
+      .data-table td {
+        border-top: none;
       }
     }
   }

src/views/components/layerList/index.vue

@@ -27,74 +27,10 @@
 
 <script>
 import * as mars3d from 'mars3d'
+import { getPwkPopup, getSitePopup } from './popup'
 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() {
@@ -127,7 +63,7 @@ export default {
               label: '入河排水（污）口',
               children: [
                 { id: '1-3-1', label: '兴平城市总排口', meta: { type: 'point', url: '/sddnWeihe/geojson/兴平城市总排口.geojson' } },
-                { id: '1-3-2', label: '兴平城市污水处理厂排口', meta: { type: 'point', url: '/sddnWeihe/geojson/兴平城市总排口2.geojson' } },
+                { id: '1-3-2', label: '兴包企业集团工业废水排口', meta: { type: 'point', url: '/sddnWeihe/geojson/兴平城市总排口2.geojson' } },
                 { id: '1-3-3', label: '新兴纺织园污水处理厂排口', meta: { type: 'point', url: '/sddnWeihe/geojson/新兴纺织园污水处理厂排口.geojson' } }
               ]
             },
@@ -330,7 +266,7 @@ export default {
           url: node.meta.url,
           clampToGround: true,
           symbol: this.getStyleByName(node.label),
-          flyTo: true
+          flyTo: false
         })
         window.map.addLayer(layer)
         this.bindEvent(layer)
@@ -464,28 +400,25 @@ 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') {
+      } else if (['1-3-1', '1-3-2', '1-3-3'].includes(layer.id)) {
+        layer.bindPopup(
+          function (event) {
+            window.closePopupA = function () {
+              event.graphic.closePopup()
+            }
+            const popupHtml = getPwkPopup(layer.id)
+            return popupHtml
+          },
+          { template: false, offsetY: 0 }
+        )
+      } else if (['1-4-1', '1-4-2', '1-4-3'].includes(layer.id)) {
         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>`
+            const popupHtml = getSitePopup(layer.id)
+            return popupHtml
           },
           { template: false, offsetY: 0 }
         )
@@ -545,7 +478,6 @@ export default {
               })
             })
           })
-          graphicsLayer.flyTo()
         }
       })
     },

src/views/components/layerList/popup.js

@@ -0,0 +1,144 @@
+import img1 from '@/assets/image/site/兴平城市总排口.png'
+import img2 from '@/assets/image/site/兴包排口.png'
+import img3 from '@/assets/image/site/新兴纺织园污水处理厂排口.png'
+import site1 from '@/assets/image/site/庄头管理段.png'
+import site2 from '@/assets/image/site/汤坊管理段.png'
+import site3 from '@/assets/image/site/阜寨管理段.png'
+const pwkData = {
+  '1-3-1': {
+    排水设施名称: '兴平城市总排口',
+    所在行政区: '咸阳市（区）兴平县（区）阜寨乡（镇）高王村（街道）',
+    沿渭桩号: '渭河干流兴平段左岸桩号144处',
+    地理位置: `经度108°32'12.9"  纬度34°14'13.9"`,
+    联系人: '张小龙',
+    电话: '029-38836375',
+    入渭方式: '穿堤',
+    设施类型: '沟渠',
+    管径断面: '日均排污量11.7万吨',
+    排水类型: '工业排水、污水处理排水、其他排水',
+    排放规律: '连续排放',
+    排水现状: '正常使用',
+    审批文件: '无',
+    监管单位: '咸阳市生态环境局兴平分局、兴平市住建局、水利局',
+    建设时间: '-',
+    其他情况说明: '无批准，属历史形成，由原来的宝鸡峡板桥退水渠入渭口演化而成，无设计流量。',
+    img: img1
+  },
+  '1-3-2': {
+    排水设施名称: '兴包企业集团工业废水排口',
+    所在行政区: '咸阳市（区）兴平县（区）丰仪乡（镇）彭甲村（街道）',
+    沿渭桩号: '渭河干流兴平段左岸桩号133+700米处',
+    地理位置: `经度：108°24'2.3"  纬度：34°12'30.1"`,
+    联系人: '彭党顺',
+    电话: '029-38266064',
+    入渭方式: '穿堤',
+    设施类型: '暗管',
+    管径断面: '1.2米',
+    排水类型: '工业排水',
+    排水现状: '间歇排放',
+    审批文件: '咸水发【2000】160号',
+    监管单位: '咸阳市生态环境局兴平分局、兴平市水利局',
+    建设时间: '2000年 8 月',
+    其他情况说明: '暂无',
+    img: img2
+  },
+  '1-3-3': {
+    排水设施名称: '新兴纺织园污水处理厂排口',
+    所在行政区: '咸阳市（区）兴平县（区）阜寨乡（镇）段家村（街道）',
+    沿渭桩号: '渭河干流兴平段左岸桩号155处',
+    地理位置: `经度：108°37'8.26"  纬度：34°15'37.66"`,
+    联系人: '穆清',
+    电话: '13809145067',
+    入渭方式: '穿堤',
+    设施类型: '暗管',
+    管径断面: '2.8m',
+    排水类型: '工业排水、污水处理排水、其他排水',
+    排放规律: '连续排放',
+    排水现状: '正常使用',
+    审批文件: '咸水发【2014】699号',
+    监管单位: '咸阳市生态环境局兴平分局、兴平市水利局',
+    建设时间: '2014年11月',
+    其他情况说明: '',
+    img: img3
+  }
+}
+
+const siteData = {
+  '1-4-1': {
+    名称: '庄头管理段（市渭河防汛物资储备总库）',
+    联系人: '王方',
+    电话: '18064308066',
+    情况说明: '庄头管理段负责丰仪段、庄头段渭河防汛抢险物料储备、管理，水情、工情的监测、预报、预警工作及渭河生态区日常巡查管护工作',
+    img: site1
+  },
+  '1-4-2': {
+    名称: '汤坊管理段',
+    联系人: '王方',
+    电话: '18064308066',
+    情况说明: '汤坊管理段负责汤坊段、桑镇段渭河防汛抢险物料储备、管理，水情、工情的监测、预报、预警工作及渭河生态区日常巡查管护工作',
+    img: site2
+  },
+  '1-4-3': {
+    名称: '阜寨管理段',
+    联系人: '王方',
+    电话: '18064308066',
+    情况说明: '阜寨管理段负责阜寨段渭河防汛抢险物料储备、管理，水情、工情的监测、预报、预警工作及渭河生态区日常巡查管护工作',
+    img: site3
+  }
+}
+
+// 获取排污口弹窗
+export function getPwkPopup(key) {
+  const info = pwkData[key]
+  const tableHtml = `
+    <table class="data-table">
+        <tr><th>所在行政区</th><td colspan="2">${info['所在行政区']}</td></tr>
+        <tr><th>沿渭桩号</th><td colspan="2">${info['沿渭桩号']}</td></tr>
+        <tr><th>地理位置</th><td colspan="2">${info['地理位置']}</td></tr>
+        <tr><th>联系人</th><td colspan="2">${info['联系人']}</td></tr>
+        <tr><th>联系电话</th><td colspan="2">${info['电话']}</td></tr>
+        <tr>
+            <th rowspan="9">主要参数</th>
+            <tr><th>入渭方式</th><td>${info['入渭方式']}</td></tr>
+            <tr><th>设施类型</th><td>${info['设施类型']}</td></tr>
+            <tr><th>管径/断面</th><td>${info['管径断面']}</td></tr>
+            <tr><th>排水类型</th><td>${info['排水类型']}</td></tr>
+            <tr><th>排水现状</th><td>${info['排水现状']}</td></tr>
+            <tr><th>审批文件</th><td>${info['审批文件']}</td></tr>
+            <tr><th>监管单位</th><td>${info['监管单位']}</td></tr>
+            <tr><th>建设时间</th><td>${info['建设时间']}</td></tr>
+        </tr>
+        <tr>
+          <td colspan="2"><img style="width: 100%;height: 143px;" src="${info['img']}"/></td>
+          <td style="vertical-align: top">其他情况说明：${info['其他情况说明']}</td>
+        </tr>
+    </table>
+    `
+  return `<div class="fly-popup-boxs">
+      <div class="popup-title">
+        <span class="title-text">${info['排水设施名称']}</span>
+      </div>
+        <div class="popup-body">${tableHtml}</div>
+    </div>`
+}
+
+// 获取管理站弹窗
+export function getSitePopup(key) {
+  const info = siteData[key]
+  const tableHtml = `
+    <table class="data-table">
+        <tr><th>联系人</th><td colspan="2">${info['联系人']}</td></tr>
+        <tr><th>联系电话</th><td colspan="2">${info['电话']}</td></tr>
+        <tr><th>说明</th><td>${info['情况说明']}</td></tr>
+        <tr>
+          <td colspan="2"><img style="width: 100%;height: 330px;" src="${info['img']}"/></td>
+        </tr>
+    </table>
+    `
+  return `<div class="fly-popup-boxs">
+      <div class="popup-title">
+        <span class="title-text">${info['名称']}</span>
+      </div>
+        <div class="popup-body">${tableHtml}</div>
+    </div>`
+}

src/views/index.vue

@@ -68,7 +68,7 @@ export default {
       mapName: 'cMap',
       configUrl: basePathUrl + 'config/config.json',
       mapOptions: {
-        scene: { center: { lat: 34.213581, lng: 108.445216, alt: 36023.4, heading: 0.8, pitch: -85.9 } },
+        scene: { center: { lat: 34.274352, lng: 108.457831, alt: 67959.8, heading: 358.8, pitch: -84.4 } },
         basemaps: [
           //   {
           //     name: "天地图电子",