搜索页面增加相关交互逻辑

src/views/dataSearch.vue

@@ -36,7 +36,8 @@
             </div>
             <ul v-show="currenId == item.tsy_id && fold">
               <li :class="sample.tsy_id == currenSample ? 'bg-color' : ''" class="sample" :id="sample.tsy_id"
-                v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample)">{{ sample.sample_name }}
+                v-for="(sample, i) in item.sampleArray" :key="i" @click.stop="onSample(sample, item.job_type)">{{
+                  sample.sample_name }}
               </li>
             </ul>
             <div class="left4_list">
@@ -237,9 +238,9 @@ import {
   setImageryViewModels
 } from '@/utils/common'
 import Vue from 'vue'
-import { loadVectorLayer } from '@/utils/vector-layer-utils'
+import { loadVectorLayer, loadJsonLineFeature, loadJsonPointFeature, highlightFeaturesByProperty } from '@/utils/vector-layer-utils'
 import { ColorGenerator } from '@/utils/color-generator';
-import { handleWheel } from "@/utils/mapbox-utils";
+import { handleWheel, initSprites, triggerLayerClick } from "@/utils/mapbox-utils";
 
 const Cesium = window.Cesium
 export default {
@@ -248,6 +249,7 @@ export default {
     return {
       show: false,
       viewer: null,
+      filter: null,
       color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
       searchType: [
         {
@@ -643,10 +645,15 @@ export default {
       let i = 0;
       const colors = ColorGenerator.generateDivergingColors(arr.length);
       arr.forEach(item => {
-        // this.addSingleLineImg(item.voyage_name, null)
+        // 添加测线/站位图层
-        // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
+        if (item.job_type == "测线作业") {
-        // loadVectorLayer(item.voyage_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
+          loadVectorLayer(`sample_line_${item.dataset_name}`, ["line"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearch", "dsds", "sample_name");
+        } else {
+          loadVectorLayer(`sample_station_${item.dataset_name}`, ["symbol"], ["#FFFFFF", "#FFFFFF"], "visible", "dataSearch", "dsds", "sample_name");
+        }
         i++;
+
+        // this.addSingleLineImg(item.voyage_name, null)
         // this.dataList[i].show = true;
         // this.divingImage(item)
       })
@@ -658,17 +665,11 @@ export default {
             dataset_id: item.tsy_id
           }).then(res => {
             item.sampleArray = res.array
-            if (res.array.length) {
+            // if (res.array.length) {
-              let i = 0;
+            //   res.array.forEach(sample => {
-              const colors = ColorGenerator.generateDivergingColors(res.array.length);
+            //     this.sampleLineImage(sample)
-              res.array.forEach(sample => {
+            //   })
-                console.log(sample);
+            // }
-                // this.sampleLineImage(sample)
-                // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
-                // loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
-                i++;
-              })
-            }
           })
         }
         if (item.job_type === '站位作业') {
@@ -678,21 +679,15 @@ export default {
           }).then(res => {
             item.sampleArray = res.array
             // 格式化坐标点
-            if (res.array.length) {
+            // if (res.array.length) {
-              let i = 0;
+            //   res.array.forEach(sample => {
-              const colors = ColorGenerator.generateDivergingColors(res.array.length);
+            //     this.sampleLineImage(sample)
-              res.array.forEach(sample => {
+            //   });
-                // this.sampleLineImage(sample)
+            // }
-                // 加载轨迹图层（因样品暂无轨迹数据，暂时不加载轨迹）
-                // loadVectorLayer(sample.sample_name, ["line", "symbol"], [colors[i], colors[i]], "visible", "dataSearch", "dsds");
-                i++;
-              })
-            }
           })
         }
       })
       this.dataList = voyageList
-      console.log(this.dataList)
     },
 
     // 初始化 mapbox
@@ -746,6 +741,10 @@ export default {
         localIdeographFontFamily: "Microsoft YoHei, 'Noto Sans', 'Noto Sans CJK SC', sans-serif",
         pitch: 0,
         bearing: 0,
+        // // 禁用所有旋转和俯仰角控制
+        // dragRotate: false,
+        // touchZoomRotate: false,
+        // pitchWithRotate: false,
         // maxBounds: [[-180, -90], [180, 90]],// Set the map's geographical boundaries.
         antialias: true,
         attributionControl: false,
@@ -769,7 +768,9 @@ export default {
         // });
       });
 
-      handleWheel("dataSearch");
+      // handleWheel("dataSearch");
+      Vue.config.maps["dataSearch"].scrollZoom.enable();
+      initSprites("dataSearch")
 
       map.on('load', () => {
         // 加载海岸线
@@ -856,7 +857,7 @@ export default {
       // 增加6000米等深线
       const contour6000 = new Cesium.WebMapTileServiceImageryProvider(
         {
-          url: this.CesiumHostAddr + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
+          url: Vue.config.baseUrl + 'geoserver/gwc/service/wmts/rest/ougp:contour6000/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
           layer: 'ougp:contour6000',
           style: 'default',
           format: 'image/png',
@@ -918,8 +919,34 @@ export default {
       }
     },
     // 选中样品列表数据
-    onSample(sample) {
+    onSample(sample, job_type) {
       this.currenSample = sample.tsy_id
+      if (job_type == "测线作业" && (!sample.start_lon || !sample.start_lat || !sample.end_lon || !sample.end_lat) || job_type == "站位作业" && (!sample.sampling_lon || !sample.sampling_lat)) {
+        alert('该样品无坐标信息，无法定位！');
+        return;
+      }
+      let lon = 0;
+      let lat = 0;
+      if (job_type == "测线作业") {
+        // lon = Number(sample.start_lon);
+        // lat = Number(sample.start_lat);
+        lon=(Number(sample.start_lon) + Number(sample.end_lon))/2;
+        lat=(Number(sample.start_lat) + Number(sample.end_lat))/2;
+      }
+      if (job_type == "站位作业") {
+        lon = Number(sample.sampling_lon);
+        lat = Number(sample.sampling_lat);
+      }
+      Vue.config.maps["dataSearch"].setZoom(10);
+      Vue.config.maps["dataSearch"].flyTo({
+        center: [lon, lat],
+        speed: 10
+      });
+      let layerId = `vector-${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}-${job_type == "测线作业" ? "line" : "symbol"}`;
+      let sourceLayerId = `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`;
+      // vector-sample_station_TS-46-1_FDZ377_Slurp_SWYP-symbol、vector-sample_line_TS2-29-1_SY612_GQXJ_PJZP-line
+      // highlightFeaturesByProperty("dataSearch", `${job_type == "测线作业" ? "sample_line" : "sample_station"}_${sample.dataset_name}`, layerId, "sample_name", sample.sample_name);
+      triggerLayerClick("dataSearch", sourceLayerId, layerId, [lon, lat], { "sample_name": sample.sample_name });
     },
     goHome() {
       this.$router.push({ name: 'home' })