行政区域地图切换为高德

ebike-operate/package-lock.json

@@ -8,6 +8,7 @@
       "name": "ebike-operate",
       "version": "0.0.0",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@ant-design/icons-vue": "^7.0.1",
         "ant-design-vue": "^4.2.6",
         "axios": "^1.8.4",
@@ -32,6 +33,12 @@
         "vite": "^6.2.0"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==",
+      "license": "MIT"
+    },
     "node_modules/@ant-design/colors": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-6.0.0.tgz",

ebike-operate/package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.6",
     "axios": "^1.8.4",

ebike-operate/src/views/Urban/OperateRegion/index.vue

@@ -212,7 +212,6 @@
     <!-- 地图 -->
     <operateRegionMap
       ref="editORMapModel"
-      :onCallBack="onORMapCallBack"
       :openTitle="openORMapTitle"
     ></operateRegionMap>
     <!-- 编辑区域简称 -->
@@ -526,9 +525,7 @@ const handleEditORMap = (record) => {
   editORMapModel.value.showModal(data);
 }
 
-const onORMapCallBack = () => {
 
-}
 
 const handleAdd = () => {
   router.push('/Urban/OperateRegionAdd');

ebike-operate/src/views/Urban/OperateRegionMap/index.vue

@@ -9,21 +9,32 @@
       :footer="null"
       :afterClose="handleClose"
     >
+       <div class="divWorn" >
+          <label v-if="drawType=='add'">
+            在地图上请点击鼠标【左键】进行绘制多边形，完成绘制后请点击鼠标【右键】。
+          </label>
+          <label v-if="drawType=='edit'">
+            请鼠标选中绘制区域的点并拖动。
+          </label>
+      </div>
+
+
       <div class="button-panel">
-        <a-button
+         <a-button
           type="primary"
-          @click="onEditorClear"
+          @click="clearDraw"
         >{{ buttonName }}</a-button>
         <a-button
           type="primary"
           @click="onEditorComplete"
-        >完成</a-button>
+        >保存</a-button>
       </div>
       <div
         class="map-container"
-        style="width: auto; height: auto;"
+        style="width: auto; height: 100%;"
       >
-        <tlbs-map
+     <amap ref="mapref" :drawType="drawType" :points="arrPoint" @ondraw="onDraw"/>
+        <!-- <tlbs-map
           ref="mapRef"
           :api-key="config.map.apiKey"
           :center="center"
@@ -42,19 +53,111 @@
             @adjust_error="onAdjustError"
             @delete_complete="onDeleteComplete"
           />
-        </tlbs-map>
+        </tlbs-map> -->
+     
       </div>
     </a-modal>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, defineProps } from 'vue'
+import { ref, reactive, onMounted,watch} from 'vue'
 import { callOperate } from '@/apis/call.js'
 import { message } from 'ant-design-vue'
 import { isNullOrEmpty } from '@/utils/tools.js'
-import config from '@/utils/config.js'
-const props = defineProps({
+import config from '@/utils/config.js';
+import amap from "../../common/amap.vue";
+const props=defineProps(["openTitle"]);
+const emit=defineEmits(["callback"])
+
+const open = ref(false);
+const mapref=ref(null);
+const buttonName=ref("");
+const formData=ref({
+  points:[]
+});
+let drawType=ref("");
+const arrPoint=ref([]);
+
+const showModal = (data={}) => {
+  open.value=true;
+  const {operationRegionId}=data;
+  if(operationRegionId){
+      buttonName.value="重置";
+      drawType.value="edit";
+      getMapData(operationRegionId);
+  }
+  else{
+    buttonName.value="取消";
+    drawType.value="add";
+     //mapref.value.addPolygons();
+  }
+ 
+};
+
+const getMapData=(operationRegionId)=>{
+   callOperate("/ebikeRegion/getOperationById?regionId=" + operationRegionId, {}, "get").then((res) => {
+        if (res.code != 200) {
+          message.error(res.message)
+          return
+        }
+        const { operationRegionName, simpleName, zoneId, points, shapeType, radius } = res.data;
+        arrPoint.value=points;
+        formData.value = {
+          "operationRegionId": operationRegionId,
+          "operationRegionName": operationRegionName,
+          "simpleName": simpleName,
+          "zoneId": zoneId,
+          "points": points,
+          "shapeType": shapeType, // 1:圆形 2:多边形
+          "radius": radius, // 圆形半径	
+        }
+        //mapref.value.editPolygons(points);
+      });
+}
+ 
+
+
+
+const onEditorComplete = () => {
+
+  const points=mapref.value.getPolygons();
+  if(drawType.value=="add"){
+    if(points.length==0){
+       message.error("请先绘制区域！");
+       return;
+    }
+    open.value=false;
+    emit("callback",points);
+    return;
+  }
+  const params={
+      ...formData.value,
+      points:points
+  }
+  callOperate("/ebikeRegion/updateOperation",params, "post").then(res=>{
+          if (res.code == 200) {
+            message.success(res.message, 3, handleClose);
+          } else {
+            message.error(res.message, 10);
+          }
+  });
+}
+
+const handleClose=()=>{
+    open.value=false;
+}
+
+const onDraw=(res)=>{
+  arrPoint.value=res;
+}
+
+const clearDraw=()=>{
+  mapref.value.clearDraw();
+}
+
+
+/* const props = defineProps({
   onCallBack: {
     type: Function,
     required: true
@@ -64,7 +167,8 @@ const props = defineProps({
     default: '' // Default value in case no openTitle is provided
   }
 });
-const open = ref(false);
+
+
 const showModal = (data) => {
   if (data) {
     loadMap(data);
@@ -97,6 +201,7 @@ const loadMap = (dataRegion) => {
     if (dataRegion) {
       const { operationRegionId } = dataRegion;
       callOperate("/ebikeRegion/getOperationById?regionId=" + operationRegionId, {}, "get").then((res) => {
+        console.log("5555555555555555555555555555",res);
         if (res.code != 200) {
           message.error(res.message)
           return
@@ -308,7 +413,12 @@ const onDeleteComplete = (geomeytry) => {
     // editorRef.value.circle.setGeometries([]);
     // editorRef.value.polygon.setGeometries([]);
   }
-};
+}; */
+
+
+
+defineExpose({showModal})
+
 </script>
 
 <style>
@@ -343,4 +453,14 @@ const onDeleteComplete = (geomeytry) => {
   border-radius: 0px !important;
   margin-bottom: 10px;
 }
+
+.divWorn{
+    position: absolute;
+    z-index: 1000;
+    font-size: 16px;
+    color: #b90b0b;
+    font-weight: bold;
+    top: 20px;
+    right: 50px;
+    }
 </style>

ebike-operate/src/views/common/amap.vue

@@ -0,0 +1,196 @@
+<template>
+   <div style="height: 100%;width: 100%;">
+      <div id="container" style="height: 100%;width: 100%;">
+      </div>
+    
+   </div>
+</template>
+<script setup>
+    import { onMounted,ref,watch } from 'vue';
+    import AMapLoader from '@amap/amap-jsapi-loader';
+    import {isEqualWith,cloneDeep} from "lodash";
+    
+    const props=defineProps(["drawType","points"]);
+    const emit=defineEmits(["ondraw"])
+
+    let oAMap=null;
+    let map=null;
+    let mouseTool=null;
+    let polyEditor=null;
+    //const drawType=ref("");
+    let drawTool="";
+    let isload=false;
+    let arrPoint=[];
+    
+    const options__polygon={
+        strokeColor: "#e41309", 
+        strokeOpacity: 1,
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillColor: '#e41309',
+        fillOpacity: 0.1,
+        strokeStyle: "solid",
+      };
+
+    watch(()=>props.points,(nval=[],oval=[])=>{
+      if(!isload) return;
+      const b=checkPoints(nval,oval);
+      if(!b) return;
+      switch(props.drawType){
+        case "edit":
+          editPolygons(nval);
+          break;
+          
+      }
+     
+    })
+
+    const checkPoints=(nval,oval)=>{
+        if(nval.length!=oval.length) return true;
+        let b=false;
+        for(let i=0;i<nval.length;i++){
+          const{longitude:nlng,latitude:nlat}=nval[i];
+          const{longitude:olng,latitude:olat}=oval[i];
+          if(nlng!=olng||nlat!=olat) {
+            b=true;
+            break;
+          }
+        }
+        return b;
+    }
+
+
+    
+    onMounted(() => {
+      
+      window._AMapSecurityConfig = {
+        securityJsCode: "b85d17b7e0fa98864d495a9a52f162e4",
+      };
+
+    AMapLoader.load({
+      key: "0e6910fae6848722b0e57f0c01597499", // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", 
+      plugins: ["AMap.Geolocation","AMap.MouseTool","AMap.Polygon","AMap.PolygonEditor"], 
+    })
+    .then((AMap) => {
+      isload=true;
+      oAMap=AMap;
+      map = new oAMap.Map("container", {
+        // 设置地图容器id
+        zoom: 18, // 初始化地图级别
+      });
+
+      // // 初始化定位控件
+      // const geolocation = new oAMap.Geolocation({
+      //   enableHighAccuracy: true, // 是否使用高精度定位
+      //   timeout: 10000, // 超时时间（毫秒）
+      //   showButton: true, // 显示定位按钮
+      //   buttonPosition: 'LT', // 按钮位置
+      //   //buttonOffset: new AMap.Pixel(50, -60), // 按钮偏移量
+      //   buttonSize:"16px"
+      // });
+ 
+      // // 将定位控件添加到地图
+      // map.addControl(geolocation);
+      switch(props.drawType){
+        case "add":
+          
+           addPolygons();
+          break;
+        case "edit":
+          editPolygons(props.points)
+          break;
+      }
+     
+
+}) .catch((e) => {
+      console.log(e);
+    });
+
+});
+
+  const editPolygons=(points)=>{
+   map.clearMap();
+   if(polyEditor) polyEditor.close();
+   arrPoint=points;
+
+   if(points.length==0) return;
+   
+    const polygon = new oAMap.Polygon(getPolygonOption(points));
+    map.add([polygon]);
+    map.setFitView([polygon]);
+     polyEditor = new oAMap.PolygonEditor(map, polygon);
+     polyEditor.open();
+  }
+
+  const getPolygonOption=(points)=>{
+      let path=points.map(item=>{
+        const{longitude,latitude}=item;
+        return[longitude,latitude];
+      });
+      path.splice(path.length,1);
+    const options={...options__polygon,path:path};
+    return options;
+  }
+
+  const addPolygons=()=>{
+       drawTool="polygon";
+       //drawType.value="add";
+        mouseTool = new oAMap.MouseTool(map);
+        mouseTool.on('draw', onDraw);
+       mouseTool.polygon(options__polygon);
+  }
+
+  const onDraw=({type,obj})=>{
+    const arrPath=obj.getPath();
+    arrPoint=[];
+    if(arrPath.length>0&&drawTool=="polygon"){
+        arrPath.push(arrPath[0]);
+    }
+    arrPath.map(item=>{
+     arrPoint.push ({
+            "latitude": item.lat,
+            "longitude": item.lng,
+          })
+    });
+  }
+
+  const clearDraw=()=>{
+    switch(props.drawType){
+      case "add":
+        mouseTool.close(true);
+        addPolygons();
+        break;
+      case "edit":
+        editPolygons(props.points);
+        break;
+
+    }
+  }
+
+  const getPolygons=()=>{
+      switch(props.drawType){
+        case "add":
+          return arrPoint;
+          break;
+        case "edit":
+          const polygon=polyEditor.getTarget();
+          const path=polygon.getPath();
+          path.push(path[0]);
+          arrPoint=path.map(item=>{
+            const{lng,lat}=item;
+            return {
+            "latitude": lat,
+            "longitude": lng,
+          }
+          });
+          return arrPoint;
+          break;
+      }
+  }
+
+  defineExpose({addPolygons,editPolygons,getPolygons,clearDraw})
+</script>
+<style scoped>
+    
+</style>

ebike-operate/src/views/form/operateregion/operateconfig/OperateAddForm.vue

@@ -118,7 +118,7 @@
   </a-spin>
   <operateRegionMap
     ref="editORMapModel"
-    :onCallBack="onORMapCallBack"
+    @callback="onORMapCallBack"
     :openTitle="openORMapTitle"
   ></operateRegionMap>
 </template>
@@ -138,6 +138,8 @@ const props = defineProps({
   }
 });
 
+
+
 const formRef = ref();
 const spinning = ref(false);
 const tipContent = ref("加载中...");
@@ -237,9 +239,9 @@ const selectMap = () => {
 
 const onORMapCallBack = (data) => {
   const { points, shapeType, radius } = data;
-  form.value.points = points;
-  form.value.shapeType = shapeType;
-  form.value.radius = radius;
+  form.value.points = data;
+  form.value.shapeType = 2;
+  form.value.radius = null;
 }
 
 const formSave = (callBack) => {