案例

src/components/sceneAtttribute/otherOptions/otherOptions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sm-function-module-content" v-show="otherOptions">
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.viewMode}}</label>
+      <label class="label-container">{{ Resource.viewMode }}</label>
       <select class="sm-select" v-model="viewMode">
         <option value="3D">3D</option>
         <option value="2.5D">2.5D</option>
@@ -9,29 +9,38 @@
       </select>
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.multiViewport}}</label>
+      <label class="label-container">{{ Resource.multiViewport }}</label>
       <select class="sm-select" v-model="multiViewport">
-        <option value="NONE">{{Resource.onePort}}</option>
-        <option value="HORIZONTAL">{{Resource.horizontalSnap}}</option>
-        <option value="VERTICAL">{{Resource.verticalSnap}}</option>
-        <option value="TRIPLE">{{Resource.tripeSnap}}</option>
-        <option value="QUAD">{{Resource.quadSnap}}</option>
+        <option value="NONE">{{ Resource.onePort }}</option>
+        <option value="HORIZONTAL">{{ Resource.horizontalSnap }}</option>
+        <option value="VERTICAL">{{ Resource.verticalSnap }}</option>
+        <option value="TRIPLE">{{ Resource.tripeSnap }}</option>
+        <option value="QUAD">{{ Resource.quadSnap }}</option>
       </select>
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.sceneFlood}}</label>
+      <label class="label-container">{{ Resource.sceneFlood }}</label>
       <br />
       <div class="flexbox">
-        <label class="sm-viewshed-label-right">{{Resource.openSceneFlood}}</label>
+        <label class="sm-viewshed-label-right">{{
+          Resource.openSceneFlood
+        }}</label>
         <input type="checkbox" v-model="openSceneFlood" />
-        <div style="width:45%"></div>
+        <div style="width: 45%"></div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.threshold}}</label>
-        <input class="sm-input-long" min="0" max="1" step="0.01" type="number" v-model="threshold" />
+        <label class="label-container">{{ Resource.threshold }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          max="1"
+          step="0.01"
+          type="number"
+          v-model="threshold"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.bloomIntensity}}</label>
+        <label class="label-container">{{ Resource.bloomIntensity }}</label>
         <input
           class="sm-input-long"
           min="0"
@@ -42,30 +51,86 @@
         />
       </div>
     </div>
-    <label class="label-container">{{Resource.split}}</label>
+    <label class="label-container">{{ Resource.split }}</label>
     <div class="flexbox">
-      <label class="sm-viewshed-label-right">{{Resource.useRoller}}</label>
+      <label class="sm-viewshed-label-right">{{ Resource.useRoller }}</label>
       <input type="checkbox" v-model="useRoller" />
-      <label class="sm-viewshed-label-right">{{Resource.imageryRoller}}</label>
+      <label class="sm-viewshed-label-right">{{
+        Resource.imageryRoller
+      }}</label>
       <input type="checkbox" v-model="imageryRoller" />
     </div>
     <div class="sm-function-module-sub-section flexbox">
-      <label class="label-container rollerLaber" for="lrRoller">{{Resource.lrRoller}}</label>
-      <input type="radio" name="lrtbRoller" id="lrRoller" value="lrRoller" v-model="lrtbRoller" />
-      <label class="label-container rollerLaber" for="tbRoller">{{Resource.tbRoller}}</label>
-      <input type="radio" name="lrtbRoller" id="tbRoller" value="tbRoller" v-model="lrtbRoller" />
+      <label class="label-container rollerLaber" for="lrRoller">{{
+        Resource.lrRoller
+      }}</label>
+      <input
+        type="radio"
+        name="lrtbRoller"
+        id="lrRoller"
+        value="lrRoller"
+        v-model="lrtbRoller"
+      />
+      <label class="label-container rollerLaber" for="tbRoller">{{
+        Resource.tbRoller
+      }}</label>
+      <input
+        type="radio"
+        name="lrtbRoller"
+        id="tbRoller"
+        value="tbRoller"
+        v-model="lrtbRoller"
+      />
     </div>
-    <div class="sm-function-module-sub-section flexbox" v-show="lrtbRoller== 'lrRoller'">
-      <label class="label-container rollerLaber" for="leftRoller">{{Resource.leftRoller}}</label>
-      <input type="radio" name="lrRoller" id="leftRoller" value="leftRoller" v-model="lrRoller" />
-      <label class="label-container rollerLaber" for="rightRoller">{{Resource.rightRoller}}</label>
-      <input type="radio" name="lrRoller" id="rightRoller" value="rightRoller" v-model="lrRoller" />
+    <div
+      class="sm-function-module-sub-section flexbox"
+      v-show="lrtbRoller == 'lrRoller'"
+    >
+      <label class="label-container rollerLaber" for="leftRoller">{{
+        Resource.leftRoller
+      }}</label>
+      <input
+        type="radio"
+        name="lrRoller"
+        id="leftRoller"
+        value="leftRoller"
+        v-model="lrRoller"
+      />
+      <label class="label-container rollerLaber" for="rightRoller">{{
+        Resource.rightRoller
+      }}</label>
+      <input
+        type="radio"
+        name="lrRoller"
+        id="rightRoller"
+        value="rightRoller"
+        v-model="lrRoller"
+      />
     </div>
-    <div class="sm-function-module-sub-section flexbox" v-show="lrtbRoller== 'tbRoller'">
-      <label class="label-container rollerLaber" for="topRoller">{{Resource.topRoller}}</label>
-      <input type="radio" name="tbRoller" id="topRoller" value="topRoller" v-model="tbRoller" />
-      <label class="label-container rollerLaber" for="bomRoller">{{Resource.bottomRoller}}</label>
-      <input type="radio" name="tbRoller" id="bomRoller" value="bomRoller" v-model="tbRoller" />
+    <div
+      class="sm-function-module-sub-section flexbox"
+      v-show="lrtbRoller == 'tbRoller'"
+    >
+      <label class="label-container rollerLaber" for="topRoller">{{
+        Resource.topRoller
+      }}</label>
+      <input
+        type="radio"
+        name="tbRoller"
+        id="topRoller"
+        value="topRoller"
+        v-model="tbRoller"
+      />
+      <label class="label-container rollerLaber" for="bomRoller">{{
+        Resource.bottomRoller
+      }}</label>
+      <input
+        type="radio"
+        name="tbRoller"
+        id="bomRoller"
+        value="bomRoller"
+        v-model="tbRoller"
+      />
     </div>
   </div>
 </template>
@@ -116,7 +181,7 @@ export default {
     if (this.SceneAtttributeShow && this.otherOptions) {
       this.init();
     }
-    this.multiViewport = store.state.splitType
+    this.multiViewport = store.state.splitType;
     this.bus.$on("setImageryRoller", this.setImageryRollers);
   },
   methods: {
@@ -181,19 +246,24 @@ export default {
       }
     },
     setImageryRollerMode: function () {
-      store.setrollerType(rollerShutterConfig.splitDirection)
+      store.setrollerType(rollerShutterConfig.splitDirection);
       // let imageryLayers = viewer.imageryLayers;
       // for (let i = 0; i < imageryLayers.length; i++) {
       //   let imageryLayer = imageryLayers.get(i);
       //   if (this.imageryRoller) this.setImageryRoller(imageryLayer)
       //   else this.hideImageryRoller(imageryLayer)
       // }
+      
+      //案例展示
+      let imageryLayer = viewer.imageryLayers.get(1);
+      if (this.imageryRoller) this.setImageryRoller(imageryLayer);
+      else this.hideImageryRoller(imageryLayer);
     },
-    setImageryRollers(imageryLayer){
-      if (this.imageryRoller) this.setImageryRoller(imageryLayer)
-      else this.hideImageryRoller(imageryLayer)
+    setImageryRollers(imageryLayer) {
+      if (this.imageryRoller) this.setImageryRoller(imageryLayer);
+      else this.hideImageryRoller(imageryLayer);
     },
-    
+
     setImageryRoller: function (imageryLayer) {
       switch (rollerShutterConfig.splitDirection) {
         case Cesium.SplitDirection.LEFT:
@@ -332,7 +402,7 @@ export default {
     },
     multiViewport(value) {
       scene.multiViewportMode = Cesium.MultiViewportMode[value];
-      store.setsplitType(value)
+      store.setsplitType(value);
     },
     openSceneFlood(val) {
       viewer.scene.bloomEffect.show = val;