线条颜色随机方式更改

src/views/dataSearch.vue

@@ -40,13 +40,13 @@
               <p>{{ item.dataset_name }} <span class="mileage">{{item.file_total}}</span></p>
               <span class="org">{{ item.create_time }}</span>
             </div>
-            <ul v-if="currenId == item.tsy_id">
+            <ul v-if="currenId == item.tsy_id && fold">
               <li
                 :class="sample.tsy_id == currenSample ? 'bg-color' : ''"
                 class="sample"
                 v-for="(sample, i) in item.sampleArray"
                 :key="i"
-                @click="onSample(sample)"
+                @click.stop="onSample(sample)"
               >{{sample.sample_name}}</li>
             </ul>
             <div class="left4_list">
@@ -134,7 +134,7 @@
         <img src="../../static/images/arrow_nav1.png" alt="">
       </div>
       <div class="right">
-        <div id="cesiumContainerData" style="height: 100%;width:100%;" />
+        <div id="cesiumContainerData" style="height: calc(100vh - 90px);width:100%;" />
       </div>
     </div>
     <!--  航次名称弹窗-->
@@ -322,6 +322,7 @@ export default {
       ids: [],
       menuShow: true,
       currenId: null,
+      fold: false,
       currenSample: null,
       previousEntityId: null,
       job: '',
@@ -500,6 +501,8 @@ export default {
       this.viewer.shadowMap.darkness = 0.8
       this.viewer.scene._sunBloom = false
       this.viewer.scene.globe.showGroundAtmosphere = false
+      this.viewer.scene.postProcessStages.fxaa.enabled = true
+
       // 叠加叠加影像服务
       const earthMap = new Cesium.WebMapTileServiceImageryProvider(
         {
@@ -543,16 +546,11 @@ export default {
         id: id,
         polyline: { //polyline折线实体
           positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
-          width: 5,//折线宽度
-          cusColor: this.color[index],
-          material: new Cesium.PolylineArrowMaterialProperty(
-            this.color[index]
-            //Cesium.Color.BLUE
-            // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
-            // color:Cesium.Color.BLUE //发光的颜色
-          ),//材质
           clampToGround: true, //地表层高度模式,
-          zIndex: 1000
+          zIndex: 1000,
+          width: 2,
+          // 设置线条的材质（颜色）
+          material: Cesium.Color.fromRandom({alpha: 0.5})
         }
       })
       this.viewer.camera.setView({
@@ -751,9 +749,14 @@ export default {
     },
     // 展开数据样品列表
     openList(item) {
-      if (item.file_total) {
-        this.currenId = item.tsy_id
-        this.job = item.job_type
+      if (this.currenId == item.tsy_id) {
+        this.fold = !this.fold
+      } else {
+        this.fold = true
+        if (item.file_total) {
+          this.currenId = item.tsy_id
+          this.job = item.job_type
+        }
       }
     },
     // 选中样品列表数据
@@ -798,7 +801,7 @@ export default {
   height: 100%;
   .shuju_con {
     width: 100%;
-    height: 995px;
+    height: calc(100vh - 90px);
     display: flex;
     align-items: center;
     justify-content: center;

src/views/home.vue

@@ -393,6 +393,8 @@ export default {
       this.viewer.shadowMap.darkness = 0.8
       this.viewer.scene._sunBloom = false
       this.viewer.scene.globe.showGroundAtmosphere = false
+      this.viewer.scene.postProcessStages.fxaa.enabled = true
+
       // 不显示底图
       // this.viewer.imageryLayers.get(0).show = false
 
@@ -439,16 +441,19 @@ export default {
         id: id,
         polyline: { //polyline折线实体
           positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
-          width: 5,//折线宽度
-          cusColor: this.color[index],
-          material: new Cesium.PolylineArrowMaterialProperty(
-            this.color[index]
-            //Cesium.Color.BLUE
-            // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
-            // color:Cesium.Color.BLUE //发光的颜色
-          ),//材质
+          // width: 5,//折线宽度
+          // cusColor: this.color[index],
+          // material: new Cesium.PolylineArrowMaterialProperty(
+          //   this.color[index]
+          //   //Cesium.Color.BLUE
+          //   // glowPower : 0.2,//发光的强度，值为线宽的百分比(0-1.0)
+          //   // color:Cesium.Color.BLUE //发光的颜色
+          // ),//材质
           clampToGround: true, //地表层高度模式,
-          zIndex: 1000
+          zIndex: 1000,
+          width: 2,
+          // 设置线条的材质（颜色）
+          material: Cesium.Color.fromRandom({alpha: 0.5})
         }
       })
       this.viewer.camera.setView({