更新

src/App.vue

@@ -50,7 +50,7 @@ html, body
   overflow hidden
   font-size .1rem
   // background url('@/assets/images/background.jpg') center/cover no-repeat
-  background #000
+  background #001220
   color #fff
 
 /* 设置滚动条的样式 */

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

@@ -43,7 +43,7 @@ export default defineComponent({
         viewMode: '3D',
         center: [1019.614669, 54.167243],
         // center: [-135.98002789627407, -722.1597065437004],
-        zooms: [8, 12],
+        zooms: [7, 12],
         zoom: 8,
         pitch: 45,
         mapStyle: 'smap://styles/dark',
@@ -129,19 +129,22 @@ export default defineComponent({
     // 添加边界
     function addBoundary({
       name = '',
+      type = 'jd_boundary',
       weight = 10,
       count = 10,
       color = 'rgba(51,145,255,.6)',
       maskColor = [0, 17, 33, 0.9],
     }) {
       const boundary = {
-        boundaryType: 'jd_boundary',
+        boundaryType: type,
         boundaryDefinition: `name like '%${name}%'`,
         boundarydistance: weight,
         bounarycount: count,
         boundaryColor: color,
         maskColor: maskColor,
       }
+      console.log('=====', boundary)
+
       const Boundary = new Plugins.MaskBoundary(map.view)
       Boundary.add(boundary)
       return Boundary

src/view/community.vue

@@ -234,6 +234,9 @@ export default defineComponent({
       if (e.classification === '微更新') {
         drawerInfo.value = e
         showDrawer.value = true
+      } else {
+        drawerInfo.value = null
+        showDrawer.value = false
       }
     }
     const isCommunityPointsShowNow = ref(false)
@@ -260,6 +263,13 @@ export default defineComponent({
       focusCenterAndAddLayer().layer()
       loading.value = false
 
+      // setTimeout(() => {
+      //   map.value.cameraTo({ heading: 180 })
+      //   setTimeout(() => {
+      //     map.value.cameraTo({ heading: 360 })
+      //   }, 500)
+      // }, 6000)
+
       // setTimeout(() => {
       //   loading.value = false
       //   setTimeout(() => {
@@ -310,6 +320,8 @@ export default defineComponent({
     const curBtn = ref<string | null>(null)
     const handleClick = async (key: string) => {
       map.value.remove(points.value)
+      drawerInfo.value = null
+      showDrawer.value = false
       if (curBtn.value === key) {
         curBtn.value = null
         return
@@ -403,6 +415,8 @@ export default defineComponent({
     margin-bottom .05rem
     cursor pointer
     transition transform .3s ease
+    $blur()
+    background rgba(0,0,0,.6)
     &:hover
       transform-origin right top
       transform scale(1.2)

src/view/community/site-selector.vue

@@ -38,7 +38,7 @@ export default defineComponent({
       if (store.state.curView.id) {
         store.dispatch('initStationData', store.state.curView.id)
       }
-      if (isNaN(Number(type))) {
+      if (isNaN(+type)) {
         // 小区以外的屏
         router.push({
           name: 'main',

src/view/components/map-btns.vue

 <template>
   <div class="map-btns" :class="{ full: fullScreen }">
-    <!-- <a-checkbox-group :option="options" @change="handleChange" /> -->
     <template v-for="btn in btns">
       <a-tooltip v-if="btn.key === 'polyline'" :key="btn.key" placement="right">
         <img :key="btn.key" :src="btn.icon" draggable="false" />
@@ -310,6 +309,8 @@ $bg = rgba(6,34,67,.4)
     margin-top .05rem
     cursor pointer
     transition .3s ease
+    background rgba(0,0,0,.6)
+    $blur()
     &:hover
       transform scale(1.2)
 </style>

src/view/hooks/useSwitchMap.ts

@@ -22,14 +22,14 @@ export default function useSwitchMap(map: any) {
   watch(
     () => store.state.showCommunityPoints,
     (val) => {
-      val ? setPoints(curViewType.value) : map.value.hideCommunity()
+      val ? setPointsAndBoundary(curViewType.value) : map.value.hideCommunity()
     }
   )
   watch(
     () => curViewType.value,
     (type) => {
       store.commit('SET_SHOW_COMMUNITY_POINTS', false)
-      setPoints(type)
+      setPointsAndBoundary(type)
       if (areaLines.value && areaLines.value.length > 0) {
         map.value.remove(areaLines.value)
       }
@@ -37,29 +37,45 @@ export default function useSwitchMap(map: any) {
       store.commit('SET_MAP_TYPE', '2D')
     }
   )
-
-  // 根据条件显示小区点
-  function setPoints(type: string) {
+  const boundary = ref<any>(null)
+  // 根据条件显示小区点和添加边界
+  function setPointsAndBoundary(type: string) {
+    boundary.value && map.value.remove(boundary.value)
     const show = store.state.showCommunityPoints
     switch (type) {
       case 'work1':
         show && showPoints({ gridId: store.state.workArea1.id })
-        map.value.addBoundary({ name: '第一工作站', color: 'rgba(0,0,0,0)' })
+        boundary.value = map.value.addBoundary({
+          type: 'njdljd_boundary',
+          name: '第一工作站',
+          color: 'rgba(0,0,0,0)',
+        })
         map.value.focus(...store.state.workArea1.center, 8)
         break
       case 'work2':
         show && showPoints({ gridId: store.state.workArea2.id })
-        map.value.addBoundary({ name: '第二工作站', color: 'rgba(0,0,0,0)' })
+        boundary.value = map.value.addBoundary({
+          type: 'njdljd_boundary',
+          name: '第二工作站',
+          color: 'rgba(0,0,0,0)',
+        })
         map.value.focus(...store.state.workArea2.center, 8)
         break
       case 'work3':
         show && showPoints({ gridId: store.state.workArea3.id })
-        map.value.addBoundary({ name: '第三工作站', color: 'rgba(0,0,0,0)' })
+        boundary.value = map.value.addBoundary({
+          type: 'njdljd_boundary',
+          name: '第三工作站',
+          color: 'rgba(0,0,0,0)',
+        })
         map.value.focus(...store.state.workArea3.center, 8)
         break
       case 'street':
         show && showPoints()
-        map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
+        boundary.value = map.value.addBoundary({
+          name: '南京东路街道',
+          color: 'rgba(0,0,0,0)',
+        })
         map.value.focus(207.9006154792994, 71.67111885454233, 8)
         break
       default:
@@ -75,7 +91,7 @@ export default function useSwitchMap(map: any) {
   }
 
   const handleMapComplete = async () => {
-    setPoints(curViewType.value)
+    setPointsAndBoundary(curViewType.value)
     if (curMapType.value === '3D') {
       if (curViewType.value === 'work1') {
         map.value.layer('model_white_zw').visible = false

src/view/main.vue

@@ -103,6 +103,12 @@ export default defineComponent({
     onMounted(async () => {
       await nextTick()
       map.value.initMap({ viewMode: '2D' })
+      if (!isNaN(+store.state.curView.type)) {
+        store.commit('SET_CURRENT_VIEW', {
+          name: '南京东路街道',
+          type: 'street',
+        })
+      }
     })
     const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
     return {