fence

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Cloud.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",

src/layout/components/Navbar.vue

@@ -9,14 +9,6 @@
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="dragon-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="dragon-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="布局大小" effect="dark" placement="bottom">

src/router/index.js

@@ -89,7 +89,6 @@ export const constantRoutes = [
     ]
   }
 ]
-
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {

src/views/electronicFence/MapContainer.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-text">name: {{ name }}</div>
+    <div id="container"></div>
+    <el-button type="primary" @click="drawPolygon">绘制多边形</el-button>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》, AMapLoader
+import AMapLoader from '@amap/amap-jsapi-loader';
+  export default {
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        name: "map-view",
+        map: null,
+        mouseTool: null,
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      initAMap() {
+        AMapLoader.load({
+          key: "164dc573bc4daf5bf1f1ebcebdae0717", // 申请好的Web端开发者Key，首次调用 load 时必填
+          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          plugins: ['AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        })
+          .then((AMap) => {
+            this.map = new AMap.Map("container", {
+              // 设置地图容器id
+              viewMode: "3D", // 是否为3D地图模式
+              zoom: 11, // 初始化地图级别
+              center: [116.397428, 39.90923], // 初始化地图中心点位置
+            });
+            this.mouseTool = new AMap.MouseTool(this.map)
+            this.mouseTool.on('draw',  this.drawPolygonComplate)
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      },
+      drawPolygon() {
+        this.mouseTool.polygon({
+          strokeColor: "#FF33FF",
+          strokeOpacity: 1,
+          strokeWeight: 6,
+          strokeOpacity: 0.2,
+          fillColor: '#1791fc',
+          fillOpacity: 0.4,
+          // 线样式还支持 'dashed'
+          strokeStyle: "solid",
+          // strokeStyle是dashed时有效
+          // strokeDasharray: [30,10],
+        })
+      },
+      drawPolygonComplate(event){
+        console.log(event.obj.getPath())
+        alert("覆盖对象绘制完成")
+      }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+      this.initAMap();
+    },
+    unmounted() {
+      this.map?.destroy();
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+#container{
+  width: 100%;
+  height: 800px;
+}
+</style>