Browse Source

调整了PC端地图的初始视图范围

napier 3 years ago
parent
commit
3b8c89b70a
2 changed files with 23 additions and 17 deletions
  1. 19 16
      src/components/map.vue
  2. 4 1
      src/pages/home.vue

+ 19 - 16
src/components/map.vue

@@ -219,19 +219,22 @@ export default {
       let leftTop = [104.134737921, 30.6924231322]
       let leftTop = [104.134737921, 30.6924231322]
       let rightBottom = [104.155317192, 30.6466570878]
       let rightBottom = [104.155317192, 30.6466570878]
       rightBottom = this.getExtentFromPNG(leftTop, rightBottom)
       rightBottom = this.getExtentFromPNG(leftTop, rightBottom)
-      // console.log('top:' + leftTop)
-      // console.log('bottom:' + rightBottom)
       leftTop = olProj.fromLonLat(leftTop)
       leftTop = olProj.fromLonLat(leftTop)
       rightBottom = olProj.fromLonLat(rightBottom)
       rightBottom = olProj.fromLonLat(rightBottom)
       // 根据设备的不同设置地图范围
       // 根据设备的不同设置地图范围
       const MOBILE = [leftTop[0], rightBottom[1], rightBottom[0], leftTop[1]]
       const MOBILE = [leftTop[0], rightBottom[1], rightBottom[0], leftTop[1]]
-      // const MOBILE = [11591641.84, 3587409, 11594985.96, 3594153.87]
-      const PC = [11589871, 3589520, 11599383, 3592463]
+      // const PC = [11591064, 3589994, 11595665, 3592078]
+      const PC = [11591064, 3589994, 11596565, 3592078]
       let extent = this.$store.state.isMobile ? MOBILE : PC
       let extent = this.$store.state.isMobile ? MOBILE : PC
       let center = [
       let center = [
-        (leftTop[0] + rightBottom[0]) / 2,
-        (leftTop[1] + rightBottom[1]) / 2
+        (extent[0] + extent[2]) / 2,
+        (extent[1] + extent[3]) / 2
       ]
       ]
+      // let center = [
+      //   (leftTop[0] + rightBottom[0]) / 2,
+      //   (leftTop[1] + rightBottom[1]) / 2
+      // ]
+      let zoom = this.$store.state.isMobile ? 14.5 : 15.5
 
 
       map = new Map({
       map = new Map({
         target: 'mapview',
         target: 'mapview',
@@ -278,16 +281,16 @@ export default {
         }),
         }),
         view: new View({
         view: new View({
           center: center,
           center: center,
-          zoom: 14.5,
+          zoom: zoom,
           extent: extent,
           extent: extent,
           maxZoom: 18.5
           maxZoom: 18.5
         }),
         }),
-        controls: control.defaults({
-          // zoom: false
-        })
-        // controls: control.defaults().extend([
-        //   new control.MousePosition()
-        // ])
+        // controls: control.defaults({
+        //   // zoom: false
+        // }),
+        controls: control.defaults().extend([
+          new control.MousePosition()
+        ])
       })
       })
       map.updateSize()
       map.updateSize()
     },
     },
@@ -332,7 +335,7 @@ export default {
      * @description:构建popup覆盖层
      * @description:构建popup覆盖层
      * @returns {void}
      * @returns {void}
      */
      */
-    initOverLay: function () {
+    initPopupOverLay: function () {
       var container = document.getElementById('pcPopup')
       var container = document.getElementById('pcPopup')
 
 
       this.popup = new Overlay({
       this.popup = new Overlay({
@@ -905,7 +908,7 @@ export default {
       function onMouseWheel (ev) {
       function onMouseWheel (ev) {
         window.setTimeout(function () {
         window.setTimeout(function () {
           let zoom = map.getView().getZoom()
           let zoom = map.getView().getZoom()
-          // console.log('zoom:' + zoom)
+          console.log('zoom:' + zoom)
           if (zoom > 15.3) {
           if (zoom > 15.3) {
             // slogan[0].style.display = 'none'
             // slogan[0].style.display = 'none'
             that.slogan.isShow = false
             that.slogan.isShow = false
@@ -1024,7 +1027,7 @@ export default {
   },
   },
   mounted () {
   mounted () {
     this.initMap()
     this.initMap()
-    this.initOverLay()
+    this.initPopupOverLay()
     this.busOnAction()
     this.busOnAction()
     this.loadRecentReports(7)
     this.loadRecentReports(7)
     this.loadRecentNotices(7)
     this.loadRecentNotices(7)

+ 4 - 1
src/pages/home.vue

@@ -12,7 +12,7 @@
     <div class="box" v-else style="display:flex;">
     <div class="box" v-else style="display:flex;">
       <!-- PC端 控制模块 -->
       <!-- PC端 控制模块 -->
       <PC class="pc"></PC>
       <PC class="pc"></PC>
-        <!-- 地图模块 -->
+      <!-- 地图模块 -->
       <Map class="map"></Map>
       <Map class="map"></Map>
     </div>
     </div>
   </div>
   </div>
@@ -45,9 +45,12 @@ export default {
 }
 }
  .pc {
  .pc {
    height: 100%;
    height: 100%;
+   width:310px
  }
  }
  .map {
  .map {
    height: 100%;
    height: 100%;
+   flex: 1;
+   /* width: calc(100% - 310px); */
  }
  }
  .mobile {
  .mobile {
    position: absolute;
    position: absolute;