Merge branch 'xj' of http://192.168.0.115:3000/bill/fuse-code into xj

src/model/app.vue

@@ -11,6 +11,10 @@
       <span class="taggle switch" v-if="full === 'scene'" @click="full = 'map'">
         <ui-icon type="f-l" ctrl />
       </span>
+
+      <span class="scale" :style="{ width: scaleInfo.width + 'px' }">
+        {{ getShowScale(scaleInfo.actual) }}
+      </span>
     </div>
   </div>
 </template>
@@ -21,6 +25,8 @@ import { SceneType } from "@/store";
 import { params } from "@/env";
 import { fuseModel, modelProps } from "./index";
 import { modelSDKFactory } from "./platform";
+import { sdk, ZoomInfo } from "@/sdk";
+import { round } from "@/utils";
 
 const typeChange = () => {
   const oldType = modelProps.type;
@@ -159,7 +165,53 @@ export const Model = defineComponent({
       { flush: "post", immediate: true }
     );
 
+    const mapInfo = ref<ZoomInfo>();
+    const updateScaleInfo = (consult = 125) => {
+      if (!mapInfo.value)
+        return {
+          width: 100,
+          actual: 100,
+        };
+      const meterPerPixel = mapInfo.value.meterPerPixel;
+      const maxWidth = 70;
+      const minWidth = 60;
+      let width = consult / meterPerPixel;
+      if (width > maxWidth) {
+        return updateScaleInfo(consult / 5);
+      } else {
+        if (width < minWidth) {
+          const consultRaw = consult < 1 ? 1 : consult;
+          consult = meterPerPixel * minWidth;
+          consult = (Math.floor(consult / consultRaw) + 1) * consultRaw;
+          // width = minWidth
+          width = consult / meterPerPixel;
+        }
+        return {
+          width,
+          actual: round(consult, 2),
+        };
+      }
+    };
+
+    const scaleInfo = computed(() => updateScaleInfo());
+    setTimeout(() => {
+      mapInfo.value = sdk.getMapZoomLevel && sdk.getMapZoomLevel();
+      sdk.sceneBus.on("mapZoomLevelChange", (m) => (mapInfo.value = m));
+    }, 1400);
+
+    const getShowScale = (len: number) => {
+      const retain = len < 1 ? 2 : len < 10 ? 1 : 0;
+      const unit = len < 1 ? "cm" : len < 10 ? "dm" : "m";
+      const rlen = round(len, retain) * Math.pow(10, retain);
+
+      // return `${rlen} ${unit}`
+
+      return `${unit === "dm" ? rlen / 10 : unit === "cm" ? rlen / 100 : rlen}m`;
+    };
+
     return {
+      getShowScale,
+      scaleInfo,
       iframeRef,
       full: ref("scene"),
       fuseRef,
@@ -241,4 +293,32 @@ export default Model;
   border-radius: 3px;
   cursor: pointer;
 }
+
+.scale {
+  --size: 1px;
+  text-align: center;
+  border-bottom: var(--size) solid currentColor;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  color: #fff;
+  z-index: 1;
+
+  &::after,
+  &::before {
+    content: "";
+    position: absolute;
+    height: 6px;
+    width: var(--size);
+    bottom: 0;
+    background-color: currentColor;
+  }
+
+  &::before {
+    left: 0;
+  }
+  &::after {
+    right: 0;
+  }
+}
 </style>

src/sdk/association.ts

@@ -564,4 +564,5 @@ export const setMap = (open: boolean, type:string = 'satellite') => {
   }
 
   sdk.switchMapType && sdk.switchMapType(type)
-}
+}
+

src/sdk/cover/index.js

@@ -25,7 +25,7 @@ export const enter = (dom, mapDom, isLocal, lonlat) => {
     
     
     
-    const mapBus = mitt(), sceneBus = mitt()
+    const sceneBus = mitt()
      
     
     const tagLimitDis = 8;
@@ -262,7 +262,14 @@ export const enter = (dom, mapDom, isLocal, lonlat) => {
     
     
     let sdk = {
-        sceneBus, mapBus,
+        sceneBus,
+
+        getMapZoomLevel() {
+            if(!viewer.mapViewer)return
+            let zoomLevel = viewer.mapViewer.mapLayer.maps[0].zoomLevel
+            let meterPerPixel = 1 / viewer.mapViewer.camera.zoom //原本我设定的每像素代表1米， 然后再除以zoom
+            return { zoomLevel, meterPerPixel }
+        },
         getPositionByScreen(pos2d, hopeModelId ){//通过屏幕坐标获取真实坐标 . hopeModelId： 如果指定了模型，优先返回hopeModelId上的intersect
             //console.log('getPositionByScreen',hopeModelId)
             hopeModelId = null
@@ -465,6 +472,21 @@ export const enter = (dom, mapDom, isLocal, lonlat) => {
                     viewer.mapViewer.moveTo(viewer.bound.center, boundSize,  0)
                 },{once:true})
                 
+                
+                //-------
+                
+                let map = viewer.mapViewer.mapLayer.maps.find(e=>e.name == 'map') 
+                let zoom  
+                viewer.mapViewer.addEventListener('camera_changed', e => {
+                    var camera = e.viewport.camera
+                    /* var pos = camera.position
+                    sceneBus.emit('posChange', { x: pos.x, y: pos.y, z: pos.z, rotate: camera.rotation }) */
+                    
+                    if(zoom !== camera.zoom){
+                        let meterPerPixel = 1 / camera.zoom //原本我设定的每像素代表1米， 然后再除以zoom
+                        sceneBus.emit('mapZoomLevelChange', { zoomLevel:map.zoomLevel , meterPerPixel }) 
+                    }
+                })
             } 
         },
 

src/sdk/sdk.ts

@@ -103,9 +103,11 @@ export type StartMeasure<T extends StoreMeasure['type']> = Measure<T> & {
   bus: Emitter<{ submit: [MeasurePosition['point'][], MeasurePosition['modelId'][]]; cancel: void; invalidPoint: string }>
 }
 
+export type ZoomInfo = { zoomLevel: number; meterPerPixel: number }
 export interface SDK {
   layout: HTMLDivElement,
-  sceneBus: Emitter<{ 'cameraChange':  SceneLocalPos }>
+  sceneBus: Emitter<{ 'cameraChange':  SceneLocalPos, mapZoomLevelChange: ZoomInfo }>
+  getMapZoomLevel: () => ZoomInfo
   setBackdrop: (drop: string, type: SettingResourceType, tb: {scale?: number, rotate?: number}) => void
   compassVisibility: (visibility: boolean) => void
   addModel: (props: AddModelProps) => SceneModel

src/views/setting/index.vue

@@ -51,7 +51,8 @@
           width="100%"
           :options="[
             { label: '卫星地图', value: 'satellite' },
-            { label: '矢量地图', value: 'standard' },
+            { label: '浅色-矢量地图', value: 'standard' },
+            { label: '深色-矢量地图', value: 'dark-standard' },
           ]"
           :modelValue="setting!.mapType"
           @update:modelValue="(e: string )=> changeBack(setting!.back, setting!.backType, setting!.openCompass, setting!.mapOpen, e, {scale: setting!.scale!, rotate: setting?.rotate!})"