切图工具显示操作优化

hookehuyr
Commit 70bfb3dd65bd7edf2e886998ddab7e69843227e0 70bfb3dd 1 parent 0118b3ce
Showing 1 changed file with 34 additions and 5 deletions
src/views/tools.vue
--- a/src/views/tools.vue
View file @70bfb3d
+++ b/src/views/tools.vue
View file @70bfb3d
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-03-22 15:25:02
+ * @LastEditTime: 2024-07-11 15:02:28
  * @FilePath: /map-demo/src/views/tools.vue
  * @Description: 公众地图主体页面
 -->
@@ -13,6 +13,11 @@
       <van-field v-model="filter_lat" label="纬度" placeholder="请输入纬度" />
       <van-button @click="handleQuery" type="primary" block size="small" style="width: 10rem;">快速定位</van-button>
       <van-button @click="queryLngLat" type="warning" block size="small" style="width: 10rem; margin-left: 1rem;">坐标查询</van-button>
+      <van-button @click="setRotation(-10)" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转-10</van-button>
+      <van-button @click="setRotation(10)" type="default" block size="small" style="width: 10rem; margin-left: 1rem;">旋转+10</van-button>
+    </div>
+    <div v-if="log_lnglat" style="position: fixed; top: 5rem; left: 1rem; color: white;">
+      <div style="display: flex;">点击经纬度：{{ log_lnglat }}</div>
     </div>
     <!-- <div class="nav-bar-wrapper">
       <div class="hideScrollBar nav-bar-content">
@@ -248,6 +253,11 @@ export default {
       open_current_location: true,
       filter_lng: '', // 经度
       filter_lat: '', // 纬度
+      data_center: [], // 接口获取-地图中心点
+      data_zoom: '', // 接口获取-地图默认缩放
+      data_zooms: '', // 接口获取-地图默认缩放范围
+      data_rotation: 0, // 接口获取-地图旋转角度
+      log_lnglat: '', // 获取当前地址经纬度
     }
   },
   async mounted() {
@@ -258,6 +268,10 @@ export default {
     this.mapTiles = data.level; // 获取图层
     this.navKey = data.list[0]['id']; // 默认选中 第一个 id
     this.navList = data.list.filter(item => item.id === this.navKey)[0]['list']; // 返回默认选中项的实体信息
+    this.data_center = data.map.center.map(item => Number(item)); // 地图中心点
+    this.data_zoom = data.map.zoom; // 地图默认缩放
+    this.data_rotation = data.map.rotation; // 地图旋转角度
+    this.data_zooms = data.map.zooms.map(item => Number(item)); // 地图默认缩放范围
     // 初始化地图
     this.initMap();
     // this.setMapBoundary();
@@ -321,14 +335,14 @@ export default {
         showLabel: true, // 是否展示地图文字和 POI 信息
         zoom: 18, // 设置地图显示的缩放级别
         pitch: 0, // 俯仰角度，默认 0，最大值根据地图当前 zoom 级别不断增大，2D地图下无效 。
-        rotation: 0, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
+        rotation: this.data_rotation, // 地图顺时针旋转角度，取值范围 [0-360] ，默认值：0
-        center: [120.587382, 31.313900], // 设置地图中心点坐标
+        center: this.data_center, // 设置地图中心点坐标
         // center: [120.289523,32.835938], // 设置地图中心点坐标
         forceVector: false,
         // rotateEnable: true,
         layers: [
           // new AMap.TileLayer.RoadNet(),
-          new AMap.TileLayer.Satellite(),
+          // new AMap.TileLayer.Satellite(),
         ],
         features: ['bg', 'road'], // 设置地图上显示的元素种类
         animateEnable: false, // 地图平移过程中是否使用动画
@@ -340,6 +354,16 @@ export default {
       this.loadMaker(this.navKey);
       // 地图设置旋转6度
       // this.map.setRotation(6, true);
+      // 添加控件
+      // AMap.plugin(['AMap.ControlBar'], () => {
+      //   this.map.addControl(new AMap.ControlBar({
+      //       position: {
+      //           right: '20px',
+      //           top: '20px'
+      //       },
+      //       showControlButton: true,  // 是否显示倾斜、旋转按钮。默认为 true
+      //   }));
+      // });
     },
     setNavLayer({ id }, index) { // 选择地图图层显示
       this.isActive = index;
@@ -350,7 +374,7 @@ export default {
       setTimeout(() => {
         // 地图zooms调整
         this.map.setZoom(this.defaultZoom);
-        this.map.setZoomAndCenter(this.defaultZoom, this.defaultCenter);
+        this.map.setZoomAndCenter(this.defaultZoom, this.data_center);
       }, 100);
       this.removeNavRoute();
     },
@@ -930,6 +954,7 @@ export default {
         e.lnglat.getLat() +
         "],"
       console.log(text);
+      this.log_lnglat = text;
       // 点击空白处 关闭弹框
       this.closeInfoWindow();
       // 关闭弹出底部导航弹框
@@ -1175,6 +1200,10 @@ export default {
     },
     queryLngLat () {
       window.open('https://lbs.amap.com/tools/picker')
+    },
+    setRotation (deg) {
+      this.data_rotation = this.data_rotation + deg;
+      this.map.setRotation(this.data_rotation);
     }
   }
 }