解析河

src/views/Home.vue

@@ -280,7 +280,7 @@ export default {
             { type: "cod", value: 1, name: "高锰酸盐指数", cf: "COD_Mn" },
             { type: "tn", value: 2, name: "总氮", cf: "TN" },
             { type: "tp", value: 3, name: "总磷", cf: "TP" },
-            { type: "nh4_n", value: 4, name: "氨氮", cf: "NH4_N" },
+            { type: "nh4_n", value: 4, name: "氨氮", cf: "NH4_N" }
           ],
         },
         {
@@ -290,7 +290,7 @@ export default {
             { type: "cod", value: 6, name: "高锰酸盐指数", cf: "COD_Mn" },
             { type: "tn", value: 7, name: "总氮", cf: "TN" },
             { type: "tp", value: 8, name: "总磷", cf: "TP" },
-            { type: "nh4_n", value: 9, name: "氨氮", cf: "NH4_N" },
+            { type: "nh4_n", value: 9, name: "氨氮", cf: "NH4_N" }
           ],
         },
         {
@@ -300,7 +300,7 @@ export default {
             { type: "cod", value: 11, name: "高锰酸盐指数", cf: "COD_Mn" },
             { type: "tn", value: 12, name: "总氮", cf: "TN" },
             { type: "tp", value: 13, name: "总磷", cf: "TP" },
-            { type: "nh4_n", value: 14, name: "氨氮", cf: "NH4_N" },
+            { type: "nh4_n", value: 14, name: "氨氮", cf: "NH4_N" }
           ],
         },
       ],
@@ -332,7 +332,7 @@ export default {
       river: "river2",
       landColorList: [],
       landColor: null,
-      center: [116.632997, 30.113954],
+      center: [118.89544, 31.884104],
       zoom: 12,
       select: null, // 覆盖框overlay选中
       pointActiveIcon: null, // 选中采样点样式
@@ -635,14 +635,13 @@ export default {
       visible: false,
     });
 
-    // 底图
-    let google = new TileLayer({
-      projection: "EPSG:4326",
-      title: "谷歌地图服务",
-      source: new XYZ({
-        url: "http://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}",
-      }),
-      visible: true,
+    // 底图  
+    let google =  new TileLayer({
+        title: "天地图卫星影像",
+        source: new XYZ({
+            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f82bb2fd8115c7fb576a8b2fcf738523'
+        }),
+        visible: true
     });
     let osm = new TileLayer({
       source: new OSM(),
@@ -653,8 +652,8 @@ export default {
     this.view = new View({
       // minZoom: 11,
       maxZoom: 19,
-      zoom: 17,
-      center: transform([118.803623, 31.998328], "EPSG:4326", "EPSG:3857"),
+      zoom: 15,
+      center: transform([118.89544, 31.884104], "EPSG:4326", "EPSG:3857"),
     });
     this.map = new OMap({
       controls: control
@@ -779,6 +778,7 @@ export default {
           } else {
             // 表示为排口数据
             this.popupOutlet = properties;
+            console.log(this.popupOutlet);
             let coordinate = e.mapBrowserEvent.coordinate;
             this.overlayOutlet.setPosition(coordinate);
             this.overlayOutlet.setOffset([140, -10]);
@@ -927,8 +927,10 @@ export default {
       // 初始化this.colorList 东风河
       // 1.根据所选河道变换对应的位置以及缩放信息
       // 设置当前河道值为index
+      console.log(index);
       this.checkedRiver = parseInt(index.slice(0, 1));
-      if (index == 0) {
+
+      if (this.checkedRiver == 0) {
         this.view.animate(
           { zoom: 15 },
           {
@@ -936,7 +938,7 @@ export default {
           }
         );
       }
-      if (index == 1) {
+      if (this.checkedRiver == 1) {
         this.view.animate(
           {
             center: transform(
@@ -948,7 +950,7 @@ export default {
           { zoom: 17 }
         );
       }
-      if (index == 2) {
+      if (this.checkedRiver == 2) {
         this.view.animate(
           { zoom: 15 },
           {
@@ -1313,7 +1315,7 @@ body {
 }
 .showPopupOutlet {
   width: 2.2rem;
-  height: 2.5rem;
+  height: 3.0rem;
   padding: 0.1rem;
   background-color: rgb(255, 255, 255);
 }

src/views/leftCompoents/outletComponents.vue

@@ -7,11 +7,11 @@
     <ul class="paramsList">
         <li class="value">
           <span class="lon">经度：{{dataList.lon=='0.0'?'118.808797':dataList.lon}}</span>
-          <span>纬度：{{dataList.lat=='0.0'?'31.996371':dataList.lat}}</span>
+          <span class="lat">纬度：{{dataList.lat=='0.0'?'31.996371':dataList.lat}}</span>
+          <span>排口类型：{{dataList.type}}</span>
           <span class="imgtitle">现场照片</span>
-          <img v-if="checked==0" class="outletImg" src="../../assets/img/gisdemo/outletImg.png" alt="">
-          <img v-if="checked==1" class="outletImg" src="../../assets/img/gisdemo/outletImg2.png" alt="">
-          <img v-if="checked==2" class="outletImg" src="../../assets/img/gisdemo/outletImg3.png" alt="">
+          <img class="outletImg" :src="require('@/assets/img/downsample/outlet_'+dataList.gid+'.jpg')" alt="">
+         
         </li>
     </ul>
   </div>
@@ -20,21 +20,16 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+    };
   },
   props: {
     dataList: {
       type: Object,
       default() {
-        return {};
+        return { gid: "4", lat: "31.8834", lon: "118.897" };
       },
     },
-    checked: {
-      type: Number,
-      default() {
-        return 0
-      }
-    }
   },
   mounted() {
   },
@@ -83,7 +78,6 @@ export default {
     }
     .value {
       width: 100%;
-      margin-top: 0.08rem;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -93,7 +87,7 @@ export default {
       text-align: start;
     }
     .imgtitle {
-      margin: 0.08rem 0px;
+      margin: 0.06rem 0px;
       font-size: 0.14rem;
     }
     .closePopup {
@@ -106,6 +100,9 @@ export default {
       height: auto;
     }
     .lon {
-      margin-bottom: 0.08rem;
+      margin-bottom: 0.06rem;
+    }
+    .lat {
+      margin-bottom: 0.06rem;
     }
 </style>