11

src/router/index.js

@@ -204,6 +204,20 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/system/guide',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:parking:list'],
+    children: [
+      {
+        path: 'index/:areaId(\\d+)',
+        component: () => import('@/views/system/area/guide'),
+        name: 'Data',
+        meta: { title: '导览地图', activeMenu: '/system/area' }
+      }
+    ]
+  },
   {
     path: '/system/area-noriding',
     component: Layout,

src/views/system/area/guide.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="container">
+    <div class="input-card-right">
+      <div class="img">
+        <image-upload v-model="picture" />
+      </div>
+
+      <el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
+        点击右上角坐标
+      </el-button>
+
+      <el-button :style="bottomLeftCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('bottomLeft')">
+        点击左下角坐标
+      </el-button>
+
+      <el-button @click="generateMap" :disabled="!canGenerateMap">
+        生成导览地图
+      </el-button>
+    </div>
+    <!-- <el-table-column label="导览地图" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <router-link :to="'/system/guide/index/' + scope.row.areaId" class="link-type">
+            <span>去设置</span>
+          </router-link>
+        </template>
+      </el-table-column> -->
+    <div id="amap-container" class="map-container"></div>
+
+    <div class="coordinates">
+      <div v-if="topRightCoord">右上角: {{ topRightCoord }}</div>
+      <div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import globalConfig from '@/utils/config/globalConfig';
+import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
+export default {
+  name: "NewPage",
+  data() {
+    return {
+      map: null,
+      clickType: null,
+      topRightCoord: null,
+      bottomLeftCoord: null,
+      markers: [],
+      picture: '',
+      buttonStyleActive: 'background-color: #409EFF; color: white;',
+      buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
+    };
+  },
+  computed: {
+    canGenerateMap() {
+      return this.picture && this.topRightCoord && this.bottomLeftCoord;
+    }
+  },
+  created() {
+    const areaId = this.$route.params && this.$route.params.areaId;
+    this.getArea(areaId);
+    // this.getAreaList();
+  },
+  mounted() {
+    this.initMap();
+  },
+  methods: {
+    /** 查询运营区域详细 */
+    getArea(areaId) {
+      getArea(areaId).then(response => {
+        this.queryParams.areaId = response.data.areaId;
+        this.areaLon = response.data.longitude;
+        this.areaLat = response.data.latitude;
+        this.defaultAreaId = response.data.areaId;
+        this.getList();
+      });
+    },
+    initMap() {
+      AMapLoader.load({
+        key: globalConfig.aMap.key,
+        version: "2.0",
+        plugins: [
+          "AMap.ToolBar",
+          "AMap.Driving",
+          "AMap.PolygonEditor",
+          "AMap.PlaceSearch",
+        ],
+      }).then((AMap) => {
+        this.map = new AMap.Map("amap-container", {
+          viewMode: "3D",
+          zoom: 13,
+        });
+        this.map.setFitView();
+        this.map.on('click', this.handleMapClick);
+      }).catch((e) => {
+        console.error(e);
+      });
+    },
+    setClickType(type) {
+      this.clickType = type;
+    },
+    handleMapClick(event) {
+      const lnglat = event.lnglat;
+
+      if (this.clickType === 'topRight') {
+        this.topRightCoord = lnglat;
+      } else if (this.clickType === 'bottomLeft') {
+        this.bottomLeftCoord = lnglat;
+      }
+
+      // 创建标记
+      const marker = new AMap.Marker({
+        position: lnglat,
+      });
+      this.map.add(marker);
+      this.markers.push(marker);
+
+      // 清除点击类型
+      this.clickType = null;
+    },
+    clearMarkers() {
+      this.markers.forEach(marker => {
+        this.map.remove(marker);
+      });
+      this.markers = [];
+      this.topRightCoord = null;
+      this.bottomLeftCoord = null;
+    },
+    generateMap() {
+      if (!this.canGenerateMap) {
+        this.$message.error('请上传图片并选择两个坐标点');
+        return;
+      }
+
+      // 确保坐标精度
+      const lnglatToFixed = (lnglat) => ({
+        lng: lnglat.lng.toFixed(6),
+        lat: lnglat.lat.toFixed(6)
+      });
+
+      const topRight = lnglatToFixed(this.topRightCoord);
+      const bottomLeft = lnglatToFixed(this.bottomLeftCoord);
+
+      // 计算边界
+      const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);
+
+      // 创建图片图层
+      const imageLayer = new AMap.ImageLayer({
+        url: this.picture,
+        bounds: bounds,
+        zooms: [15, 20]
+      });
+
+      // 清除现有图层
+      this.map.getLayers().forEach(layer => {
+        if (layer instanceof AMap.ImageLayer) {
+          this.map.remove(layer);
+        }
+      });
+
+      // 添加图片图层
+      this.map.add(imageLayer);
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.map-container {
+  width: 100%;
+  height: 90vh;
+}
+
+.container {
+  position: relative;
+  border: 1px solid rgb(204, 204, 204);
+}
+
+.input-card-right {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  // justify-content: center;
+  margin-bottom: 10px;
+}
+
+.img {
+  width: 150px;
+  height: 150px;
+}
+
+.coordinates {
+  position: absolute;
+  bottom: 15px;
+  left: 15px;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 10px;
+  border-radius: 5px;
+}
+</style>