轨迹点、方向、抽稀倍率控制

src/components/easyMap/class/ShipTrack.ts

@@ -26,7 +26,10 @@ class ShipTrack {
     zoom: () => {}
   }
   private zIndex
-  
+  private showTrackPoint = true
+  private showTrackDirection = true
+  private trackRadio = 30
+
   constructor({map, keys = {
     lon: 'targetLongitude',
     lat: 'targetLatitude',
@@ -85,7 +88,7 @@ class ShipTrack {
   }
   getSimplifyData() {
     const resolution = this.map.getView().getResolution()
-    let radio = (30 * resolution);
+    let radio = (this.trackRadio * resolution);
     if (this.map.getView().getZoom() == this.map.getView().getMaxZoom()) {
       radio = 0
     }
@@ -137,6 +140,7 @@ class ShipTrack {
       },
     })
     this.pointLayer.set('layerName', this.uuid + '_point')
+    this.pointLayer.setVisible(this.showTrackPoint)
     this.map.addLayer(this.pointLayer)
     this.directionLayer = new layer.WebGLPoints({
       zIndex: this.zIndex + 1,
@@ -164,6 +168,7 @@ class ShipTrack {
       },
     })
     this.directionLayer.set('layerName', this.uuid + '_direction')
+    this.directionLayer.setVisible(this.showTrackDirection)
     this.map.addLayer(this.directionLayer)
   }
   refreshData() {

src/views/web/track/index.vue

@@ -22,12 +22,35 @@
               {{getDuration(value)}}
             </div>
             <div class="operation">
-              <el-tooltip :enterable="false" placement="top" content="隐藏轨迹" v-if="value.showTrack">
-                <SvgIcon class="__hover" name="eye" size="16" color="#22E622" @click="value.visibleTrack(false)"/>
-              </el-tooltip>
-              <el-tooltip :enterable="false" placement="top" content="显示轨迹" v-else>
-                <SvgIcon class="__hover" name="eye-close" size="16" color="#22E622" @click="value.visibleTrack(true)"/>
-              </el-tooltip>
+<!--              QIONGSANYAYU36304-->
+              <el-popover placement="bottom" effect="dark">
+                <template #reference>
+                  <div style="display: flex;align-items: center">
+                    <el-tooltip :enterable="false" placement="top" content="隐藏轨迹" v-if="value.showTrack">
+                      <SvgIcon class="__hover" name="eye" size="16" color="#22E622" @click="value.visibleTrack(false)"/>
+                    </el-tooltip>
+                    <el-tooltip :enterable="false" placement="top" content="显示轨迹" v-else>
+                      <SvgIcon class="__hover" name="eye-close" size="16" color="#22E622" @click="value.visibleTrack(true)"/>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <div>
+                  <div style="display: flex;align-items: center;color: #FFFFFF;height: 20px;gap: 4px;"><el-checkbox v-model="value.shipTrackClass.showTrackPoint" @change="value.shipTrackClass.refreshStyle()"/>显示轨迹点</div>
+                  <div style="display: flex;align-items: center;color: #FFFFFF;height: 20px;gap: 4px;"><el-checkbox v-model="value.shipTrackClass.showTrackDirection" @change="value.shipTrackClass.refreshStyle()"/>显示轨迹方向</div>
+                </div>
+              </el-popover>
+              <el-popover placement="bottom" effect="dark">
+                <template #reference>
+                  <div style="display: flex;align-items: center">
+                    <el-tooltip :enterable="false" placement="top" content="轨迹抽稀倍率" v-if="[...value.shipTrackClass.historyPoints, ...value.shipTrackClass.realPoints].length > 0">
+                      <SvgIcon class="__hover" name="radio" size="16" color="#48DCFD"/>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <div style="display: flex;align-items: center;gap: 10px;">
+                  <el-slider v-model="value.shipTrackClass.trackRadio" :min="0" :max="50" :show-tooltip="false" @change="value.shipTrackClass.refreshStyle()"/>{{value.shipTrackClass.trackRadio}}
+                </div>
+              </el-popover>
               <el-tooltip :enterable="false" placement="top" content="轨迹分析" v-if="[...value.shipTrackClass.historyPoints, ...value.shipTrackClass.realPoints].length > 0">
                 <SvgIcon class="__hover" name="panel" size="16" color="#48DCFD" @click="onAnalysis(value)"/>
               </el-tooltip>