feat: 点云密度控制

public/smart-viewer.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
         <link rel="icon" type="image/svg+xml" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico" />
         <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/ext/iconfont/iconfont.css" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3693743_qnz6eozqyvk.css" />
+        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3693743_j4ly3fuf3y.css" />
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/mobile-detect.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/base64.min.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/lib/three.js/build/three.min.js"></script>

src/pages/Viewer.vue

@@ -6,12 +6,29 @@
                 <iframe ref="sourceFrame" v-if="sourceURL" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
                 <div class="tools" v-if="source" v-show="!showAdjust && !fscChecked && (dbsChecked || (!target && !bimChecked))">
                     <div class="item-date">
-                        <calendar name="source" :count="scenes.length" :controls="controls" :value="sourceDate" :highlighted="sourceDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
+                        <calendar
+                            name="source"
+                            :count="scenes.length"
+                            :controls="controls"
+                            :value="sourceDate"
+                            :highlighted="sourceDays"
+                            @selected="onSelected"
+                            @pick="onPickDate"
+                            @prev="onPrevDate"
+                            @next="onNextDate"
+                        ></calendar>
                     </div>
                     <div class="item-mode" v-if="source.type == 2">
                         <div class="iconfont icon-show_roaming" :class="{ active: mode == 0 }" @click="onModeChange(0)"></div>
                         <div class="iconfont icon-show_plane" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
                     </div>
+                    <div class="item-density" v-if="(source.type == 2 && mode == 1)" :class="{active:showDensity}" @click="showDensity=!showDensity">
+                        <span>{{densityType.text}}</span>
+                        <i class="iconfont icon-arrows_down"></i>
+                        <ul>
+                            <li v-for="density in densityTypes" @click="onDensityChange(density)">{{density.text}}</li>
+                        </ul>
+                    </div>
                 </div>
                 <div class="points" v-if="showAdjust">
                     <div :class="{ active: points.p1 }" @click="onP1Click('left')">
@@ -28,12 +45,22 @@
                 <iframe ref="targetFrame" :src="targetURL" frameborder="0" @load="onLoadTarget"></iframe>
                 <div class="tools" v-show="!fscChecked && !bimChecked">
                     <div class="item-date target">
-                        <calendar name="target" :count="scenes.length" :controls="controls" :value="targetDate" :highlighted="targetDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
+                        <calendar
+                            name="target"
+                            :count="scenes.length"
+                            :controls="controls"
+                            :value="targetDate"
+                            :highlighted="targetDays"
+                            @selected="onSelected"
+                            @pick="onPickDate"
+                            @prev="onPrevDate"
+                            @next="onNextDate"
+                        ></calendar>
                     </div>
                 </div>
                 <div class="points" v-if="showAdjust">
                     <div :class="{ active: points.p1 }" @click="onP1Click('right')">
-                        <i class="iconfont"  :class="[points.p1 ? 'icon-positioning01' : 'icon-positioning02']"></i>
+                        <i class="iconfont" :class="[points.p1 ? 'icon-positioning01' : 'icon-positioning02']"></i>
                         <span>P1</span>
                     </div>
                     <div :class="{ active: points.p2 }" @click="onP2Click('right')">
@@ -43,13 +70,13 @@
                 </div>
             </div>
             <div class="model" v-show="!showAdjust">
-                <div class="bim" :class="{ active: bimChecked, disable: bimDisable }" v-show="!fscChecked  && !showBim">
+                <div class="bim" :class="{ active: bimChecked, disable: bimDisable }" v-show="!fscChecked && !showBim">
                     <div @click="onBimChecked">
                         <i class="iconfont icon-BIM"></i>
                         <span>BIM</span>
                     </div>
                 </div>
-                <div class="dbs" :class="{ active: dbsChecked, disable: dbsDisable }"  v-show="!fscChecked && !showBim">
+                <div class="dbs" :class="{ active: dbsChecked, disable: dbsDisable }" v-show="!fscChecked && !showBim">
                     <div @click="onDbsChecked">
                         <i class="iconfont icon-split_screen"></i>
                         <span>分屏</span>
@@ -72,7 +99,7 @@ import browser from '@/utils/browser'
 import Toast from '@/components/dialog/Toast'
 import AppHeader from '@/components/header'
 import Calendar from '@/components/calendar'
-import sync, { laserChangeMode, beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2} from '@/utils/sync'
+import sync, { laserChangeMode, beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2 } from '@/utils/sync'
 const isDev = process.env.VUE_APP_TEST == 1
 // 是否BIM模式
 const showBim = ref(browser.urlHasValue('bim'))
@@ -95,8 +122,18 @@ const target = ref(null)
 const project = ref(null)
 const points = ref({ p1: null, p2: null })
 
+const densityTypes = ref([
+    {type:'high',text:'高'},
+    {type:'middle',text:'中'},
+    {type:'low',text:'低'}
+])
+
+const densityType = ref(densityTypes.value[0])
+
 const showTips = ref(null)
 
+const showDensity = ref(false)
+
 const scenes = computed(() => {
     if (!project.value) {
         return []
@@ -109,30 +146,29 @@ const scenes = computed(() => {
         }
     })
 })
-const controls = computed(()=>{
-    if(bimChecked.value){
-        return scenes.value.length>1
+const controls = computed(() => {
+    if (bimChecked.value) {
+        return scenes.value.length > 1
     }
-    return dbsChecked.value? scenes.value.length>2: scenes.value.length>1
+    return dbsChecked.value ? scenes.value.length > 2 : scenes.value.length > 1
 })
 const sourceURL = computed(() => {
-
-    beforeChangeURL('source' ) 
+    beforeChangeURL('source')
 
     if (bimChecked.value && !dbsChecked.value) {
         return `smart-bim.html?m=${project.value.bimData.bimOssFilePath}`
     }
-       
-    if(!source.value){
+
+    if (!source.value) {
         return
     }
 
     if (source.value.type < 2) {
         // 看看、看见场景
-        return `smart-kankan.html?m=${source.value.num}${isDev?'&dev':''}`
+        return `smart-kankan.html?m=${source.value.num}${isDev ? '&dev' : ''}`
     } else {
         // 深时场景
-        return `smart-laser.html?m=${source.value.num}${isDev?'&dev':''}`
+        return `smart-laser.html?m=${source.value.num}${isDev ? '&dev' : ''}`
     }
 })
 const targetURL = computed(() => {
@@ -142,10 +178,10 @@ const targetURL = computed(() => {
 
     if (source.value.type < 2) {
         // 看看、看见场景
-        return `smart-kankan.html?m=${target.value.num}${isDev?'&dev':''}`
+        return `smart-kankan.html?m=${target.value.num}${isDev ? '&dev' : ''}`
     } else {
         // 深时场景
-        return `smart-laser.html?m=${target.value.num}${isDev?'&dev':''}`
+        return `smart-laser.html?m=${target.value.num}${isDev ? '&dev' : ''}`
     }
 })
 const sourceDate = computed(() => {
@@ -193,17 +229,19 @@ const targetDays = computed(() => {
     }
 })
 
-const bimDisable = computed(()=>{
-    if(!project.value || !project.value.bimData){
+const bimDisable = computed(() => {
+    if (!project.value || !project.value.bimData) {
         return true
     }
 })
 
-const dbsDisable = computed(()=>{
-    if(scenes.value.length == 0){ // 没有场景的情况
+const dbsDisable = computed(() => {
+    if (scenes.value.length == 0) {
+        // 没有场景的情况
         return 1
     }
-    if(!bimChecked.value && scenes.value.length == 1){ // 只有1个场景的情况
+    if (!bimChecked.value && scenes.value.length == 1) {
+        // 只有1个场景的情况
         return 2
     }
 })
@@ -232,6 +270,14 @@ const onModeChange = targetMode => {
         sync.views.laserChangeMode(mode.value)
     }
 }
+
+const onDensityChange = (density)=>{
+    if (sync.sourceInst) {
+        sync.sourceInst.loaded.then(sdk => sdk.scene.changePointDensity(density.type))
+        densityType.value = density
+    }
+}
+
 const onPickDate = name => {
     datepickName.value = name
 }
@@ -258,7 +304,7 @@ const onSelected = data => {
                 }
             }
         }
-    } else{
+    } else {
         showTips.value = '选择日期未上传场景'
     }
 
@@ -333,10 +379,12 @@ const onNextDate = name => {
     scene.value = scenes.value[index]
 }
 
+
+
 // bim点击
 const onBimChecked = () => {
     if (bimDisable.value) {
-        return showTips.value = '未发现BIM文件'
+        return (showTips.value = '未发现BIM文件')
     }
     if (bimChecked.value) {
         bimChecked.value = false
@@ -364,14 +412,14 @@ const onBimChecked = () => {
 
 // 分屏点击
 const onDbsChecked = () => {
-    if(dbsDisable.value && !dbsChecked.value){
-        return showTips.value = '未发现对比场景'        
+    if (dbsDisable.value && !dbsChecked.value) {
+        return (showTips.value = '未发现对比场景')
     }
     dbsChecked.value = !dbsChecked.value
     if (dbsChecked.value) {
         if (bimChecked.value) {
             // BIM分屏
-            source.value = scenes.value[scenes.value.length-1]
+            source.value = scenes.value[scenes.value.length - 1]
             target.value = project.value.bimData
         } else {
             // 四维看看、激光场景分屏
@@ -418,29 +466,28 @@ const onFscChecked = () => {
     }
 }
 
-const onPointsUpdate = (type,data) => {
+const onPointsUpdate = (type, data) => {
     points.value[type] = data
 }
 
-const onP1Click = (type) =>{
-    if(!points.value.p1){
+const onP1Click = type => {
+    if (!points.value.p1) {
         showTips.value = '您还未选择关联位置'
         return
     }
     console.log(points.value.p1)
     // todo 定位
-     
+
     flyToP1P2(points.value.p1)
-    
 }
 
-const onP2Click = (type) =>{
-    if(!points.value.p2){
+const onP2Click = type => {
+    if (!points.value.p2) {
         showTips.value = '您还未选择关联位置'
         return
     }
     // todo 定位
-    
+
     flyToP1P2(points.value.p2)
 }
 
@@ -458,31 +505,28 @@ onMounted(() => {
                             points.value.p1 = response.data.panos.p1
                             points.value.p2 = response.data.panos.p2
                             setPanoWithBim(response.data.panos)
-                        
                         } catch (error) {
                             console.error(error)
                         }
- 
                     }
                     project.value = response.data
                     if (showBim.value) {
                         onBimChecked()
-                    }
-                    else if (project.value.sceneList.length) {
+                    } else if (project.value.sceneList.length) {
                         if (num) {
                             source.value = project.value.sceneList.find(c => c.num == num)
                         } else {
-                            source.value = project.value.sceneList[project.value.sceneList.length-1]
+                            source.value = project.value.sceneList[project.value.sceneList.length - 1]
                         }
                         if (!source.value) {
-                           return  showTips.value = '当前场景已被删除，无法进行查看'
+                            return (showTips.value = '当前场景已被删除，无法进行查看')
                         }
                         if (showAdjust.value || showSplit.value) {
                             onBimChecked()
                             nextTick(() => onDbsChecked())
                         }
                     } else {
-                        return  showTips.value = '当前场景已被删除，无法进行查看'
+                        return (showTips.value = '当前场景已被删除，无法进行查看')
                     }
                 }
             } else {
@@ -492,7 +536,6 @@ onMounted(() => {
                 } else {
                     showTips.value = response.message
                 }
-                
             }
         })
         .catch(() => {
@@ -570,7 +613,7 @@ main {
             transform: translateX(-50%);
 
             div {
-                cursor:pointer;
+                cursor: pointer;
                 margin-left: 20px;
                 width: 70px;
                 height: 88px;
@@ -676,6 +719,55 @@ main {
                 color: #0076f6;
             }
         }
+        .item-density {
+            position: relative;
+            cursor: pointer;
+            height: 50px;
+            width: 68px;
+            background: rgba(27, 27, 28, 0.8);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+            border-radius: 47px 47px 47px 47px;
+            border: 1px solid #000000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 10px;
+            margin-right: 10px;
+            font-size: 16px;
+            padding: 0 16px;
+            &.active{
+                ul{
+                    display: block;
+                }
+            }
+            span {
+                margin-right: 4px;
+            }
+            i {
+                transform: scale(0.8);
+                font-size: 14px;
+            }
+            ul {
+                display: none;
+                position: absolute;
+                left: 0;
+                bottom: calc(100% + 10px);
+                width: 68px;
+                padding: 10px 0;
+                border-radius: 12px;
+                text-align: center;
+                background: rgba(27, 27, 28, 0.8);
+                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+                border: 1px solid #000000;
+                list-style: none;
+                li{
+                    padding: 5px 0;
+                    &:hover{
+                        color: #0076f6;
+                    }
+                }
+            }
+        }
     }
 }
 </style>
@@ -717,16 +809,16 @@ main {
 .vuejs3-datepicker__calendar header .next:not(.disabled):hover {
     background: rgba(0, 0, 0, 0.3);
 }
-.vuejs3-datepicker__calendar .cell{
-    font-size:16px !important;
-    border-radius:4px;
+.vuejs3-datepicker__calendar .cell {
+    font-size: 16px !important;
+    border-radius: 4px;
 }
 .highlighted {
-    color:#076EDE !important;
+    color: #076ede !important;
     background: transparent !important;
 }
 .selected {
-    color:#fff !important;
+    color: #fff !important;
     background: #0076f6 !important;
 }
 </style>