暂存

src/App.vue

@@ -33,7 +33,7 @@ export default defineComponent({
   src url(./assets/font/zcool.ttf)
 
 html, body
-  background rgba(0,0,0,0.5)
+  background #001220
   font-family DIN, Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale

src/components/MyComponent/MyMap/my-map.vue

 <template>
-  <div id="MapContainer" />
+  <div id="MapContainer" :style="`width:${width}`" />
 </template>
 
 <script lang="ts">
@@ -25,6 +25,10 @@ export default defineComponent({
       type: Object as PropType<{ [key: string]: unknown }>,
       default: null,
     },
+    width: {
+      type: String as PropType<string>,
+      default: '67vw',
+    },
   },
   emits: ['complete', 'event'],
   setup(props, ctx) {
@@ -39,21 +43,24 @@ export default defineComponent({
         viewMode: '3D',
         center: [1019.614669, 54.167243],
         // center: [-135.98002789627407, -722.1597065437004],
-        zooms: [5, 10],
-        zoom: 7,
+        zooms: [8, 12],
+        zoom: 8,
         pitch: 45,
         mapStyle: 'smap://styles/dark',
         showBuildingBlock: true,
         ...config,
         ...props.config,
       }).on(SMap.MapEvent.maploaded, () => {
-        map.enableMouseEvent(false)
+        setMouseEvent(false)
         // setBuildingBlock()
         ctx.emit('complete', map)
         addListener()
         hideCommunity()
       })
     }
+    function setMouseEvent(val: boolean) {
+      map.enableMouseEvent(val)
+    }
     function layer(name: string) {
       return map.getLayer(name)
     }
@@ -109,13 +116,16 @@ export default defineComponent({
         console.error('传入的坐标点不能为空')
         return
       }
-      console.log('focus', x, y)
-
       curMapType.value === '3D'
         ? map.setZoomAndCenter(zoom, [+x, +y, 0])
         : map.setZoomAndCenter(zoom, [+x, +y])
     }
 
+    function zoom(type: string) {
+      if (type === 'in') map.zoomIn()
+      else map.zoomOut()
+    }
+
     // 添加边界
     function addBoundary({
       name = '',
@@ -247,6 +257,8 @@ export default defineComponent({
     return {
       initMap,
       focus,
+      zoom,
+      setMouseEvent,
       layer,
       setBuildingBlock,
       hideCommunity,
@@ -266,7 +278,6 @@ export default defineComponent({
 <style lang="stylus" scoped>
 #MapContainer
   position fixed
-  width 100%
   height 100vh
   top 0
   left 0

src/store/index.ts

@@ -65,6 +65,7 @@ export interface GlobalStateProps {
   curView: ViewType
   curMapType: string
   showCommunityPoints: boolean
+  mapDragable: boolean
   readonly zhenxing: any
   readonly weihai: any
   readonly workArea1: any

src/store/mutations.ts

@@ -26,6 +26,9 @@ export default {
   SET_SHOW_COMMUNITY_POINTS(state: GlobalStateProps, val: boolean): void {
     state.showCommunityPoints = val
   },
+  SET_MAP_DRAGABLE(state: GlobalStateProps, val: boolean): void {
+    state.mapDragable = val
+  },
   SET_PROPERTY_SUMMARY(
     state: GlobalStateProps,
     val: { [key: string]: number }

src/store/state.ts

@@ -5,6 +5,7 @@ export default {
   curMapType: '2D',
   curView: { name: '南京东路街道', type: 'street' },
   showCommunityPoints: false,
+  mapDragable: false,
   viewOptions: [
     { name: '南京东路街道', type: 'street' },
     { name: '第一工作站', type: 'work1', id: '01001' },
@@ -60,7 +61,7 @@ export default {
       y: -660.07,
     },
     id: '01001',
-    center: [361.095476, -559.449126],
+    center: [57.65912693980181, -545.9925561181099],
     paths: [
       [-448.329953822261, -293.460812442785],
       [-431.7521211874291, -671.2658974800385],
@@ -105,7 +106,7 @@ export default {
       y: 678.9654976442117,
     },
     id: '01002',
-    center: [1291.532466, 175.263969],
+    center: [494.2089963530598, 170.15832727829968],
     paths: [
       [62.564369398678764, 740.5887328698475],
       [137.63177213765096, 581.9293660719472],
@@ -140,7 +141,7 @@ export default {
       x: -57.84609277641425,
       y: 261.561716873108,
     },
-    center: [609.931363, 342.166777],
+    center: [59.44810057514178, 386.009149840996],
     id: '01003',
     paths: [
       [-827.6197677404292, 863.6615701613555],

src/view/community.vue

@@ -12,8 +12,7 @@
     <m-map
       ref="map"
       :config="{
-        center: [-75.5563452697323, -718.3061904627932],
-        zoom: 8,
+        zoom: 10,
       }"
       @complete="handleComplete"
       @event="handleMapClick"
@@ -37,19 +36,55 @@
     <SiteSelector />
     <div class="operates">
       <a-tooltip placement="left">
-        <img src="@/assets/images/map-btn5.png" @click="rotateAngle" />
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn5.png"
+          @click="rotateAngle"
+        />
         <template #title>旋转90度</template>
       </a-tooltip>
       <a-tooltip placement="left">
-        <img src="@/assets/images/map-btn4.png" @click="showMonitor = true" />
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn4.png"
+          @click="showMonitor = true"
+        />
         <template #title>电瓶车入梯报警</template>
       </a-tooltip>
       <a-tooltip placement="left">
-        <img src="@/assets/images/map-btn6.png" @click="showCommunityPoints" />
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn6.png"
+          @click="showCommunityPoints"
+        />
         <template #title>
           {{ isCommunityPointsShowNow ? '隐藏' : '显示' }}小区点
         </template>
       </a-tooltip>
+      <a-tooltip placement="left">
+        <img
+          draggable="false"
+          src="@/assets/images/zoom-in.png"
+          @click="zoomMap('in')"
+        />
+        <template #title> 放大地图 </template>
+      </a-tooltip>
+      <a-tooltip placement="left">
+        <img
+          draggable="false"
+          src="@/assets/images/zoom-out.png"
+          @click="zoomMap('out')"
+        />
+        <template #title> 缩小地图 </template>
+      </a-tooltip>
+      <a-tooltip placement="left">
+        <img
+          draggable="false"
+          src="@/assets/images/map-btn8.png"
+          @click="setMapDrag"
+        />
+        <template #title> 开启/关闭地图拖拽 </template>
+      </a-tooltip>
     </div>
     <m-modal
       v-model="showMonitor"
@@ -68,11 +103,27 @@
           <p class="title">[ {{ drawerInfo.relationName }} ]</p>
           <div v-if="drawerInfo.afterPhoto">
             <p>整改后</p>
-            <img :src="drawerInfo.afterPhoto" />
+            <img
+              :src="
+                drawerInfo.afterPhoto.replace(
+                  'http://zhongbang.omniview.pro/' ||
+                    'https://zhongbang.omniview.pro/',
+                  prefix
+                )
+              "
+            />
           </div>
           <div v-if="drawerInfo.beforPhoto">
             <p>整改前</p>
-            <img :src="drawerInfo.beforPhoto" />
+            <img
+              :src="
+                drawerInfo.beforPhoto.replace(
+                  'http://zhongbang.omniview.pro/' ||
+                    'https://zhongbang.omniview.pro/',
+                  prefix
+                )
+              "
+            />
           </div>
         </div>
       </m-card>
@@ -104,6 +155,7 @@ export default defineComponent({
   name: 'Main',
   components: { LeftSection, RightSection, SiteSelector, VideoComponent },
   setup() {
+    const prefix = computed(() => api.SOURCE_URL)
     const rotation = ref(0)
     const rotateAngle = () => {
       rotation.value += 90
@@ -168,25 +220,19 @@ export default defineComponent({
       if (!curId.value) return
       const result: any = {
         '527635870583459840': {
-          zoom: 9.7608,
+          zoom: 11,
           layer: () =>
             (map.value.layer('model_white_zhenxing2').visible = true),
-          '0': [-135.98002789627407, -722.1597065437004],
-          '90': [-261.131359, -858.028878],
-          '180': [-404.248674, -746.05425],
-          '270': [-276.2336, -653.842881],
+          center: [-275.8968464073082, -748.2824253933684],
         },
         '527635870583459841': {
-          zoom: 10,
+          zoom: 11,
           layer: () => (map.value.layer('model_white_WEIHAI33').visible = true),
-          '0': [-38.73075358777865, -569.7527629458657],
-          '90': [-136.813679, -682.12363],
-          '180': [-275.05377, -587.065673],
-          '270': [-187.394221, -483.549497],
+          center: [-177.8293302195628, -588.2622422909122],
         },
       }
       const cur = result[curId.value as string]
-      map.value.focus(...cur[rotation.value], cur.zoom)
+      map.value.focus(...cur.center, cur.zoom)
       return cur
     }
     const showDrawer = ref(false)
@@ -315,7 +361,16 @@ export default defineComponent({
         message.success('短信发送成功！')
       }
     }
+    const zoomMap = (type: string) => {
+      map.value.zoom(type)
+    }
+    const dragAble = ref(false)
+    const setMapDrag = () => {
+      dragAble.value = !dragAble.value
+      map.value.setMouseEvent(dragAble.value)
+    }
     return {
+      prefix,
       rotation,
       rotateAngle,
       loading,
@@ -333,6 +388,8 @@ export default defineComponent({
       handleAlarm,
       isCommunityPointsShowNow,
       showCommunityPoints,
+      zoomMap,
+      setMapDrag,
     }
   },
 })

src/view/community/community-photo.vue

@@ -5,7 +5,10 @@
       :key="item.name"
       :style="`background:url(${
         item.photo &&
-        item.photo.replace('http://zhongbang.omniview.pro/', prefix)
+        item.photo.replace(
+          'http://zhongbang.omniview.pro/' || 'https://zhongbang.omniview.pro/',
+          prefix
+        )
       }) 100% / 100% 100% no-repeat`"
       @click="handleClick(item.video)"
     >
@@ -58,26 +61,26 @@ export default defineComponent({
       if (curId.value === '527635870583459840') {
         // 振兴小区
         return [
-          {
-            name: '重庆北路177弄64号',
-            photo:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
-            video:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
-          },
           {
             name: '重庆北路后门',
             photo:
               'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
             video:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AaCAPxQuAJBKkDzXu6A359.mp4',
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9PlmAH8-oAEmHxWhriqw954.mov',
           },
           {
             name: '大沽路大门',
             photo:
               'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
             video:
-              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AbiAQSm8AFcZgGM-DsE721.mp4',
+              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9QE6AckoPAEM3swvgmFQ182.mov',
+          },
+          {
+            name: '重庆北路177弄64号',
+            photo:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
+            video:
+              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
           },
         ]
       }
@@ -87,21 +90,21 @@ export default defineComponent({
           photo:
             'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5GdOAW6qQAAvNhxSqO-g179.jpg',
           video:
-            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB8_neAFTSLAfLx1EXkWbg945.mp4',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9OkmAFxVMAS7MAmRH2Xc004.mp4',
         },
         {
           name: '62弄朝东',
           photo:
-            'https://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
           video:
-            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AKeAStEUAYtR_B1xies646.mp4',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9QIiAaz9fAS3gvWsrxYQ927.mp4',
         },
         {
           name: '62弄朝南',
           photo:
             'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
           video:
-            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KrSAB6piAV39_CAFs0Y956.mp4',
+            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9P1mALYigATKoQQw6Y8k841.mp4',
         },
       ]
     })

src/view/community/left-section.vue

@@ -232,14 +232,14 @@ export default defineComponent({
 
 .info
   display flex
-  height .8rem
+  height .9rem
   margin .05rem 0
   >div
     flex 1
     color #ccc
     text-align justify
     &:first-child
-      flex .56
+      flex 0.8
       $center()
       background url('@/assets/images/border3.png') 50% 50% / 100% 100% no-repeat
       margin-right .1rem

src/view/components/map-btns.vue

@@ -14,13 +14,10 @@
           </div>
         </template>
       </a-tooltip>
-      <img
-        v-else
-        :key="btn.key"
-        :src="btn.icon"
-        draggable="false"
-        @click="handleClick(btn.key)"
-      />
+      <a-tooltip v-else :key="btn.key" placement="right">
+        <img :src="btn.icon" draggable="false" @click="handleClick(btn.key)" />
+        <template #title>{{ btn.title }}</template>
+      </a-tooltip>
     </template>
   </div>
   <m-modal v-model="searchModal" title="搜索" width="30%" offset="-70%">
@@ -68,24 +65,30 @@ import btn4 from '@/assets/images/map-btn4.png'
 import btn5 from '@/assets/images/map-btn5.png'
 import btn6 from '@/assets/images/map-btn6.png'
 import btn7 from '@/assets/images/map-btn7.png'
+import btn8 from '@/assets/images/map-btn8.png'
 import d2 from '@/assets/images/2d.png'
 import d3 from '@/assets/images/3d.png'
+import zoomIn from '@/assets/images/zoom-in.png'
+import zoomOut from '@/assets/images/zoom-out.png'
 import store from '@/store'
 
 export default defineComponent({
   name: 'MapBtns',
-  emits: ['full', 'change'],
+  emits: ['full', 'change', 'zoom'],
   setup(_, ctx) {
     const btns = computed(() => {
       const mapType =
         store.state.curMapType === '2D'
-          ? { key: '3D', icon: d3 }
-          : { key: '2D', icon: d2 }
+          ? { key: '3D', icon: d3, title: '开启3D地图' }
+          : { key: '2D', icon: d2, title: '开启2D地图' }
       const list = [
         // { key: 'search', icon: btn1 },
-        { key: 'full', icon: btn2 },
-        { key: 'points', icon: btn6 },
+        { key: 'in', icon: zoomIn, title: '放大地图' },
+        { key: 'out', icon: zoomOut, title: '缩小地图' },
+        { key: 'full', icon: btn2, title: '全屏' },
+        { key: 'points', icon: btn6, title: '显示/隐藏小区点' },
         { key: 'polyline', icon: btn7 },
+        { key: 'dragable', icon: btn8, title: '开启/关闭拖拽功能' },
         // { key: '', icon: btn4 },
         // { key: '', icon: btn5 },
         // { key: '', icon: btn6 },
@@ -109,12 +112,18 @@ export default defineComponent({
         case 'search':
           searchModal.value = true
           break
+        case 'in':
+        case 'out':
+          ctx.emit('zoom', key)
+          break
         case 'points':
           store.commit(
             'SET_SHOW_COMMUNITY_POINTS',
             !store.state.showCommunityPoints
           )
           break
+        case 'dragable':
+          store.commit('SET_MAP_DRAGABLE', !store.state.mapDragable)
         default:
           break
       }
@@ -294,7 +303,7 @@ $bg = rgba(6,34,67,.4)
   transition left .3s ease
   &.full
     left .05rem
-  >img
+  img
     display block
     width .2rem
     height @width

src/view/components/video-component.vue

@@ -41,7 +41,10 @@ export default defineComponent({
       () => props.videoSrc && props.videoSrc.indexOf('m3u8') >= 0
     )
     const isMP4 = computed(
-      () => props.videoSrc && props.videoSrc.indexOf('mp4') >= 0
+      () =>
+        props.videoSrc &&
+        (props.videoSrc.indexOf('mp4') >= 0 ||
+          props.videoSrc.indexOf('mov') >= 0)
     )
     const init = () => {
       if (!videoRef.value) return

src/view/hooks/useSwitchMap.ts

@@ -13,6 +13,12 @@ export default function useSwitchMap(map: any) {
     },
     { immediate: true }
   )
+  watch(
+    () => store.state.mapDragable,
+    (val) => {
+      map.value.setMouseEvent(val)
+    }
+  )
   watch(
     () => store.state.showCommunityPoints,
     (val) => {
@@ -38,20 +44,19 @@ export default function useSwitchMap(map: any) {
     switch (type) {
       case 'work1':
         show && showPoints({ gridId: store.state.workArea1.id })
-        map.value.focus(...store.state.workArea1.center, 7.660867453405492)
+        map.value.focus(...store.state.workArea1.center, 8)
         break
       case 'work2':
         show && showPoints({ gridId: store.state.workArea2.id })
-        map.value.focus(...store.state.workArea2.center, 7)
+        map.value.focus(...store.state.workArea2.center, 8)
         break
       case 'work3':
         show && showPoints({ gridId: store.state.workArea3.id })
-        map.value.focus(...store.state.workArea3.center, 7)
+        map.value.focus(...store.state.workArea3.center, 8)
         break
       case 'street':
         show && showPoints()
-        map.value.focus(990.973466, 10.295931, 7)
-        // map.value.focus(1019.614669, 54.167243, 6.5)
+        map.value.focus(207.9006154792994, 71.67111885454233, 8)
         break
       default:
         break
@@ -105,8 +110,12 @@ export default function useSwitchMap(map: any) {
       }
     )
   }
+  const handleZoom = (type: string) => {
+    map.value.zoom(type)
+  }
   return {
     handleMapComplete,
     selectArea,
+    handleZoom,
   }
 }

src/view/main.vue

@@ -6,7 +6,7 @@
     gap="0.05rem"
   >
     <m-title area="title">南东城运</m-title>
-    <m-map ref="map" @complete="handleMapComplete" />
+    <m-map ref="map" width="71vw" @complete="handleMapComplete" />
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
     </m-animate>
@@ -38,7 +38,11 @@
       />
     </m-animate>
     <ViewSelector />
-    <MapBtns @change="selectArea" @full="fullScreen = $event" />
+    <MapBtns
+      @change="selectArea"
+      @full="fullScreen = $event"
+      @zoom="handleZoom"
+    />
     <m-drawer v-model="showDrawer">
       <CaseDrawer />
       <!-- <PopulationDrawer /> -->
@@ -100,7 +104,7 @@ export default defineComponent({
       await nextTick()
       map.value.initMap({ viewMode: '2D' })
     })
-    const { handleMapComplete, selectArea } = useSwitchMap(map)
+    const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
     return {
       map,
       curViewType,
@@ -110,6 +114,7 @@ export default defineComponent({
       showDrawer,
       handleMapComplete,
       selectArea,
+      handleZoom,
     }
   },
 })