feat:宁录更新

index.html

@@ -158,7 +158,7 @@
       serviceHost: 'http://47.110.79.22:9000/_AMapService',
     }
   </script>
-  <script src="https://webapi.amap.com/maps?v=2.0&key=b96a1c32b0bb828f1d153b219fa59ecc&plugin=AMap.ElasticMarker"></script>
+  <script src="https://webapi.amap.com/maps?v=2.0&key=b96a1c32b0bb828f1d153b219fa59ecc&plugin=AMap.ElasticMarker,AMap.PolygonEditor,AMap.DistrictSearch,AMap.ToolBar, AMap.Scale, AMap.MouseTool, AMap.Geocoder"></script>
   <script type="text/javascript" src="https://webapi.amap.com/loca?v=2.0.0&key=b96a1c32b0bb828f1d153b219fa59ecc"></script>
   <script src="./static/ezuikit/ezuikit.js"></script>
   <script src="./static/js/js/flv.min.js"></script>

src/components/Index.vue

@@ -26,7 +26,8 @@
           {{ loginInfo.role_header }}
         </div>-->
         <div class="sys-name">
-          <img src="../assets/images/home/logo.png" @click="collapseFun" />
+          <img :src="loginInfo.role_logo" @click="collapseFun" />
+
           {{ newtitle }}
         </div>
         <div class="navbarBtn">

src/components/home/AreaPolygon.vue

@@ -0,0 +1,484 @@
+<template>
+  <div>
+    <div class="searchBox">
+      <el-input
+        placeholder="请输入位置"
+        v-model.lazy="searchAddr"
+        style="width: auto"
+        @change="searchFun"
+        clearable
+        class="input-with-select"
+      >
+        <el-button
+          style="color: white"
+          class="searchBtn"
+          slot="append"
+          icon="el-icon-search"
+          @click="searchFun"
+        >
+          搜索
+        </el-button>
+      </el-input>
+
+      <el-button v-if="!isDrawing" class="drawBtn" @click="drawFun" round icon="el-icon-star-off"
+        >开始绘制</el-button
+      >
+      <el-button v-else class="drawBtn" @click="stopDraw" round icon="el-icon-close"
+        >结束绘制</el-button
+      >
+      <el-button v-if="isEditing" class="drawBtn" @click="stopEditPolygon" round icon="el-icon-edit"
+        >停止编辑</el-button
+      >
+      <el-button
+        v-if="overlays.length > 0"
+        type="danger"
+        @click="clearArea"
+        round
+        icon="el-icon-delete"
+        >清除区域</el-button
+      >
+
+      <el-button type="primary" round @click="confirmArea">确定并退出</el-button>
+    </div>
+    <div style="height: 70vh" class="amap-demo" id="mapContainer" tabindex="0"></div>
+  </div>
+</template>
+
+<script>
+import AMap from 'AMap'
+
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      default: true
+    },
+    coordinates: {
+      type: String,
+      default: '[]'
+    },
+    isVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      address: {
+        sheng: '',
+        shi: '',
+        qu: ''
+      },
+      cityValue: [],
+      isDrawing: false,
+      isEditing: false,
+      props: {
+        expandTrigger: 'hover',
+        value: 'value'
+      },
+      cropperVisible: false,
+      projectAreaTableData: [], // 项目区域列表
+      map: '',
+      searchAddr: '', // 检索的地址
+      styles: {
+        // 基地的样式 多边形
+        basePolygon: {
+          fillColor: '#000000',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: '#6FBD79',
+          fillOpacity: '0.3',
+          zIndex: 50
+        },
+        // 地块的样式 多边形
+        landPolygon: {
+          fillColor: 'red',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: '#6FBD79',
+          fillOpacity: '0.3',
+          zIndex: 50
+        },
+        // 高亮显示的地块
+        landPolygonAcitve: {
+          fillColor: 'yellow',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: 'yellow',
+          fillOpacity: '0.3',
+          zIndex: 52
+        }
+      },
+      addBaseDialogVisible: false,
+      base_name: '',
+      basePolygon: null,
+      overlays: [],
+      addBaseTitle: '新建基地',
+      currentRowData: {},
+      polyEditor: null,
+      mouseTool: null,
+      postPolygon: []
+    }
+  },
+  watch: {
+    isVisible: {
+      handler(val) {
+        // if (this.isAdd) {
+        //   this.clearArea()
+        // }
+      }
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.clearArea()
+    this.$nextTick(() => {
+      this.initMap()
+    })
+  },
+  methods: {
+    stopDraw() {
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close()
+        this.map.setDefaultCursor('default')
+      }
+    },
+    stopEdit() {
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close()
+      }
+    },
+    clearArea() {
+      console.log('清除区域', this.map)
+
+      this.map && this.map.remove(this.overlays)
+      this.overlays = []
+      // 停止编辑
+      if (this.polyEditor) {
+        this.polyEditor.close()
+      }
+
+      // 停止绘制
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close(true)
+        this.map.setDefaultCursor('default')
+      }
+    },
+    initMap() {
+      var map = new AMap.Map('mapContainer', {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 15,
+        layers: [new AMap.TileLayer.Satellite()],
+        lang: 'en'
+      })
+      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.Geocoder'], () => {
+        map.addControl(new AMap.ToolBar())
+        map.addControl(new AMap.Scale())
+
+        this.geocoder = new AMap.Geocoder({
+          city: '全国',
+          radius: 1000
+        })
+      })
+
+      this.map = map
+
+      this.map.plugin(['AMap.DistrictSearch'], () => {
+        this.setAdmin()
+      })
+      if (this.coordinates) {
+        this.editMap()
+      }
+    },
+    drawFun() {
+      this.isDrawing = true
+      this.mouseTool = new AMap.MouseTool(this.map)
+      this.mouseTool.on('draw', this.drawBaseEnd)
+      // this.mouseTool.measureArea({
+      //   ...this.styles.basePolygon
+      // })
+      this.mouseTool.polygon({
+        ...this.styles.basePolygon
+      })
+      this.map.setDefaultCursor('crosshair')
+    },
+    stopEditPolygon() {
+      this.stopDraw()
+
+      if (this.polyEditor) {
+        this.polyEditor.close()
+        this.polyEditor = null
+      }
+      this.selectedPolygon = null
+      this.isEditing = false
+
+      // 移除多边形的点击事件
+      this.overlays.forEach((polygon) => {
+        polygon.off('click')
+      })
+    },
+    editMap() {
+      if (!this.coordinates) {
+        return
+      }
+
+      var coordinates = JSON.parse(this.coordinates)
+      coordinates.forEach((item) => {
+        let basePolygon = new AMap.Polygon({
+          path: item.path,
+          ...this.styles.basePolygon
+        })
+        this.addPolygonContextMenu(basePolygon)
+        basePolygon.on('click', (e) => {
+          // 停止之前的编辑
+          this.stopEditPolygon()
+          this.polyEditor = new AMap.PolygonEditor(this.map, basePolygon, {
+            editOptions: this.styles.landPolygon
+          })
+          this.polyEditor.open()
+          this.isEditing = true
+          this.selectedPolygon = basePolygon
+          // this.polyEditor.on('end', (event) => {
+          //   const index = this.overlays.indexOf(basePolygon)
+          //   console.log('index', index)
+          //   if (index > -1) {
+          //     this.overlays.splice(index, 1, event.target)
+          //   }
+          //   console.log(this.overlays)
+          // })
+        })
+
+        this.overlays.push(basePolygon)
+        this.map.add(basePolygon)
+      })
+
+      // this.polyEditor = new AMap.PolygonEditor(this.map, this.basePolygon, {
+      //   editOptions: this.styles.landPolygon
+      // })
+      // this.polyEditor.on('addnode', this.drawLandNode) // 增加一个节点时触发此事件
+      // this.polyEditor.on('add', this.drawLandEnd) // 创建一个覆盖物之后触发该事件
+      // // this.polyEditor.addAdsorbPolygons(this.basePolygon)
+      // this.polyEditor.open()
+      this.map.setFitView()
+    },
+    searchFun() {
+      // console.log(this.marker)
+      if (this.marker) {
+        this.map.remove(this.marker)
+      }
+      if (!this.searchAddr) {
+        return false
+      }
+      this.marker = new AMap.Marker()
+      this.geocoder.getLocation(this.searchAddr, (status, result) => {
+        if (status === 'complete' && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location
+          this.marker.setPosition(lnglat)
+          this.map.add(this.marker)
+          this.map.setFitView(this.marker)
+        } else {
+          this.$message.error('根据地址查询位置失败')
+        }
+      })
+    },
+
+    confirmArea() {
+      this.$confirm('您当前绘制' + this.overlays.length + '个区域，确定要保存并退出吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.overlays.forEach((polygon) => {
+          let arr = polygon.getPath()
+          let path = arr.map((item) => {
+            return [item.lng, item.lat]
+          })
+          this.postPolygon.push({
+            path: path
+          })
+        })
+
+        this.$emit('drawBaseEnd', JSON.stringify(this.postPolygon))
+      })
+    },
+    drawBaseEnd(event) {
+      const polygon = event.obj
+      polygon.on('click', (e) => {
+        // 停止之前的编辑
+        this.stopEditPolygon()
+        this.polyEditor = new AMap.PolygonEditor(this.map, polygon, {
+          editOptions: this.styles.landPolygon
+        })
+        this.polyEditor.open()
+        this.isEditing = true
+        this.selectedPolygon = polygon
+      })
+      this.overlays.push(polygon)
+
+      // 添加右键菜单删除功能
+      this.addPolygonContextMenu(polygon)
+    },
+    addPolygonContextMenu(polygon) {
+      // 添加右键菜单删除功能
+      polygon.on('rightclick', (e) => {
+        this.stopDraw()
+        // 创建右键菜单
+        const menu = new AMap.ContextMenu()
+
+        menu.addItem(
+          '删除此区域',
+          () => {
+            // 从地图移除
+            polygon.setMap(null)
+            this.stopEditPolygon()
+
+            // 从数组中移除
+            const index = this.overlays.indexOf(polygon)
+            if (index > -1) {
+              this.overlays.splice(index, 1)
+            }
+          },
+          0
+        )
+
+        // 在点击位置打开菜单
+        menu.open(this.map, e.lnglat)
+      })
+    },
+    setAdmin() {
+      var city = ''
+      var tier = ''
+      if (this.address.qu != '') {
+        tier = 'district'
+        city = this.address.qu
+      } else if (this.address.shi != '') {
+        tier = 'city'
+        city = this.address.shi
+      } else if (this.address.sheng != '') {
+        tier = 'province'
+        city = this.address.sheng
+      } else {
+        return
+      }
+
+      var district = null
+      if (!district) {
+        // 实例化DistrictSearch
+        var opts = {
+          subdistrict: 0, // 获取边界不需要返回下级行政区
+          extensions: 'all', // 返回行政区边界坐标组等具体信息
+          level: 'district' // 查询行政级别为 市
+        }
+        district = new AMap.DistrictSearch(opts)
+      }
+      district.setLevel(tier)
+      district.search(city, (status, result) => {
+        if (this.polygon) {
+          this.map.remove(this.polygon) // 清除上次结果
+          this.polygon = null
+        }
+        var bounds = result.districtList[0].boundaries
+        if (bounds) {
+          // 生成行政区划polygon
+          for (var i = 0; i < bounds.length; i += 1) {
+            // 构造MultiPolygon的path
+            bounds[i] = [bounds[i]]
+          }
+          this.polygon = new AMap.Polygon({
+            strokeWeight: 2,
+            path: bounds,
+            fillOpacity: 0.2,
+            // fillColor: '#0064fc',
+            // strokeColor: '#0064fc'
+            fillColor: '#000',
+            strokeColor: '#0064fc'
+          })
+          this.map.add(this.polygon)
+          if (this.isAdd) {
+            // 新增
+            this.map.setFitView(this.polygon) // 视口自适应
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.card {
+  min-height: 80vh;
+  .form {
+    // width: 50%;
+    // 头像上传
+    .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 150px;
+      height: 150px;
+      line-height: 150px !important;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+    .hint {
+      font-size: 12px;
+      color: #707070;
+    }
+    .el-input {
+      width: 220px;
+    }
+  }
+}
+
+.searchBox {
+  position: absolute;
+  left: 30px;
+  top: 100px;
+  z-index: 9;
+  display: flex;
+  /deep/.el-input__inner {
+    border-top-left-radius: 50px;
+    border-bottom-left-radius: 50px;
+    width: 280px;
+  }
+  /deep/.el-input.is-active .el-input__inner,
+  /deep/.el-input__inner:focus {
+    border-color: #3eb984;
+    outline: 0;
+  }
+  /deep/.el-input-group__append {
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    border: 1px solid #3eb984;
+    background-color: #3eb984;
+  }
+  .searchBtn {
+    background: #3eb984;
+    color: #fff;
+  }
+  .drawBtn {
+    background-color: #3eafb9;
+    border-radius: 18px;
+    color: #fff;
+    border-color: #3eafb9;
+    margin-left: 20px;
+  }
+}
+</style>

src/components/home/AreaPolygonShow.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <div
+      style="height: 200px; width: 700px"
+      class="amap-demo"
+      id="mapContainer1"
+      tabindex="0"
+    ></div>
+  </div>
+</template>
+
+<script>
+import AMap from 'AMap'
+
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      default: true
+    },
+    coordinates: {
+      type: String,
+      default: '[]'
+    },
+    isVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      address: {
+        sheng: '',
+        shi: '',
+        qu: ''
+      },
+      cityValue: [],
+      isDrawing: false,
+      isEditing: false,
+      props: {
+        expandTrigger: 'hover',
+        value: 'value'
+      },
+      cropperVisible: false,
+      projectAreaTableData: [], // 项目区域列表
+      map: '',
+      searchAddr: '', // 检索的地址
+      styles: {
+        // 基地的样式 多边形
+        basePolygon: {
+          fillColor: '#000000',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: '#6FBD79',
+          fillOpacity: '0.3',
+          zIndex: 50
+        },
+        // 地块的样式 多边形
+        landPolygon: {
+          fillColor: 'red',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: '#6FBD79',
+          fillOpacity: '0.3',
+          zIndex: 50
+        },
+        // 高亮显示的地块
+        landPolygonAcitve: {
+          fillColor: 'yellow',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: 'yellow',
+          fillOpacity: '0.3',
+          zIndex: 52
+        }
+      },
+      addBaseDialogVisible: false,
+      base_name: '',
+      basePolygon: null,
+      overlays: [],
+      addBaseTitle: '新建基地',
+      currentRowData: {},
+      polyEditor: null,
+      mouseTool: null,
+      postPolygon: []
+    }
+  },
+  watch: {
+    isVisible: {
+      handler(val) {
+        // if (this.isAdd) {
+        //   this.clearArea()
+        // }
+      }
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.clearArea()
+    this.$nextTick(() => {
+      this.initMap()
+    })
+  },
+  methods: {
+    stopDraw() {
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close()
+        this.map.setDefaultCursor('default')
+      }
+    },
+    stopEdit() {
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close()
+      }
+    },
+    clearArea() {
+      console.log('清除区域', this.map)
+
+      this.map && this.map.remove(this.overlays)
+      this.overlays = []
+      // 停止编辑
+      if (this.polyEditor) {
+        this.polyEditor.close()
+      }
+
+      // 停止绘制
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close(true)
+        this.map.setDefaultCursor('default')
+      }
+    },
+    initMap() {
+      var map = new AMap.Map('mapContainer1', {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 15,
+        layers: [new AMap.TileLayer.Satellite()],
+        lang: 'en'
+      })
+      // AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.Geocoder'], () => {
+      //   map.addControl(new AMap.ToolBar())
+      //   map.addControl(new AMap.Scale())
+
+      //   this.geocoder = new AMap.Geocoder({
+      //     city: '全国',
+      //     radius: 1000
+      //   })
+      // })
+
+      this.map = map
+
+      this.editMap()
+    },
+    drawFun() {
+      this.isDrawing = true
+      this.mouseTool = new AMap.MouseTool(this.map)
+      this.mouseTool.on('draw', this.drawBaseEnd)
+      this.mouseTool.measureArea({
+        ...this.styles.basePolygon
+      })
+      this.map.setDefaultCursor('crosshair')
+    },
+    stopEditPolygon() {
+      this.stopDraw()
+
+      if (this.polyEditor) {
+        this.polyEditor.close()
+        this.polyEditor = null
+      }
+      this.selectedPolygon = null
+      this.isEditing = false
+
+      // 移除多边形的点击事件
+      this.overlays.forEach((polygon) => {
+        polygon.off('click')
+      })
+    },
+    editMap() {
+      if (!this.coordinates) {
+        return
+      }
+
+      var coordinates = JSON.parse(this.coordinates)
+      coordinates.forEach((item) => {
+        let basePolygon = new AMap.Polygon({
+          path: item.path,
+          ...this.styles.basePolygon
+        })
+        this.overlays.push(basePolygon)
+        this.map.add(basePolygon)
+      })
+      this.map.setFitView()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.card {
+  min-height: 80vh;
+  .form {
+    // width: 50%;
+    // 头像上传
+    .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 150px;
+      height: 150px;
+      line-height: 150px !important;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+    .hint {
+      font-size: 12px;
+      color: #707070;
+    }
+    .el-input {
+      width: 220px;
+    }
+  }
+}
+
+.searchBox {
+  position: absolute;
+  left: 30px;
+  top: 100px;
+  z-index: 9;
+  display: flex;
+  /deep/.el-input__inner {
+    border-top-left-radius: 50px;
+    border-bottom-left-radius: 50px;
+    width: 280px;
+  }
+  /deep/.el-input.is-active .el-input__inner,
+  /deep/.el-input__inner:focus {
+    border-color: #3eb984;
+    outline: 0;
+  }
+  /deep/.el-input-group__append {
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
+    overflow: hidden;
+    border: 1px solid #3eb984;
+    background-color: #3eb984;
+  }
+  .searchBtn {
+    background: #3eb984;
+    color: #fff;
+  }
+  .drawBtn {
+    background-color: #3eafb9;
+    border-radius: 18px;
+    color: #fff;
+    border-color: #3eafb9;
+    margin-left: 20px;
+  }
+}
+</style>

src/components/home/Home03.vue

@@ -19,15 +19,6 @@
         <!-- :src= `'../../assets/images/home/home03/天气(2x+4x)/${weather}.png'` -->
         <div class="weather02">
           <div class="weather02Left">
-            <!-- <img
-              :src="
-                'http://www.hnyfwlw.com:8006/bigdata_app/img/weather/' +
-                  weather +
-                  '.png'
-              "
-              alt=""
-            /> -->
-
             <img
               v-if="wea_img == '' || wea_img == null ? false : true"
               :src="'/static/images/homeWeather/' + wea_img + '.png'"
@@ -207,8 +198,8 @@
             />
           </div>
 
-          <div class="add" @click="handleAdd">新增项目</div>
-          <div class="edit" @click="handleEdit">项目编辑</div>
+          <div v-if="list.length == 0" class="add" @click="handleAdd">新增项目</div>
+          <div v-else class="edit" @click="handleEdit">项目编辑</div>
         </div>
       </el-card>
     </div>
@@ -429,6 +420,12 @@
           </el-dialog>
           <div class="hint">只能上传jpg/png/jpeg,且不超过2M,最多3张图片</div>
         </el-form-item>
+        <el-form-item label="项目区域:">
+          <el-button type="text" @click="editProjectArea"> 编辑项目区域 </el-button>
+          <div v-if="polygons">
+            <AreaPolygonShow v-if="!areaDialogVisible" :coordinates="polygons" />
+          </div>
+        </el-form-item>
       </el-form>
 
       <div slot="footer" class="dialog-footer">
@@ -531,6 +528,13 @@
           </el-dialog>
           <div class="hint">只能上传jpg/png,且不超过1M,最多3张图片</div>
         </el-form-item>
+        <el-form-item label="项目范围:">
+          <el-button type="text" @click="addProjectArea"> 新增项目区域 </el-button>
+          位置{{ polygons }}
+          <div v-if="polygons">
+            <AreaPolygonShow v-if="!areaDialogVisible" :coordinates="polygons" />
+          </div>
+        </el-form-item>
       </el-form>
 
       <div slot="footer" class="dialog-footer">
@@ -565,6 +569,20 @@
         <el-button type="primary" @click="finish">确认</el-button>
       </div>
     </el-dialog>
+    <el-dialog
+      width="85vw"
+      title="项目区域"
+      :close-on-click-modal="false"
+      :visible.sync="areaDialogVisible"
+    >
+      <area-polygon
+        v-if="areaDialogVisible"
+        :isAdd="isAdd"
+        :isVisible="areaDialogVisible"
+        :coordinates="polygons"
+        @drawBaseEnd="drawBaseEnd"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -572,10 +590,20 @@
 import cityArr from '@/pages/personage/citydata.js'
 import echarts from 'echarts'
 import { myEcharts } from './chart.js'
+import AreaPolygon from './AreaPolygon.vue'
+import AreaPolygonShow from './AreaPolygonShow.vue'
+
 export default {
   name: 'home',
+  components: {
+    AreaPolygon,
+    AreaPolygonShow
+  },
   data() {
     return {
+      isAdd: true,
+      polygons: '',
+      areaDialogVisible: false,
       dialogAddFormVisible: false,
       dialogEditFormVisible: false,
       // projectForm: {
@@ -598,13 +626,13 @@ export default {
         // },
         address: [],
         image: '',
-        imageArr: [],
+        imageArr: []
       },
       cityValue: [],
       options: cityArr,
       props: {
         expandTrigger: 'hover',
-        value: 'value',
+        value: 'value'
       },
 
       rules: {
@@ -613,13 +641,13 @@ export default {
           {
             required: true,
             message: '请填写项目信息,不超过500字',
-            trigger: 'blur',
-          },
+            trigger: 'blur'
+          }
         ],
         pics: [{ required: true }],
         // cityValue: [{ required: true }],
         address: [{ required: true, message: '请选择项目地址', trigger: 'change' }],
-        image: [{ required: true, message: '请上传项目图片', trigger: 'blur' }],
+        image: [{ required: true, message: '请上传项目图片', trigger: 'blur' }]
       },
       weaRegion: '', // 天气区域
       region: '', // 地区
@@ -634,7 +662,6 @@ export default {
       warning: '', // 预警信息
       swiperList: [], // 轮播图
       selectValue: '', // select的值
-      region: '', // 项目风貌的地址
       projectMessage: '', // 项目描述
       dialogFormVisible: false, // 新增项目的弹窗
       echartsArr: [], // echarts数组
@@ -661,7 +688,7 @@ export default {
         canMoveBox: false, // 截图框能否拖动
         original: false, // 上传图片按照原始比例渲染
         centerBox: false, // 截图框是否被限制在图片里面
-        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
       },
       file: '', // 上传的图片
       projectId: '', // 项目id
@@ -670,7 +697,7 @@ export default {
       myDevicetitindex: 1,
       offnone: false,
       offtype: '',
-      offdevice_type_id: '',
+      offdevice_type_id: ''
     }
   },
   // require
@@ -703,6 +730,19 @@ export default {
   },
 
   methods: {
+    drawBaseEnd(payload) {
+      console.log('绘制结束', payload)
+      this.polygons = payload
+      this.areaDialogVisible = false
+    },
+    editProjectArea() {
+      this.isAdd = false
+      this.areaDialogVisible = true
+    },
+    addProjectArea() {
+      this.isAdd = true
+      this.areaDialogVisible = true
+    },
     // 在线离线跳转
     goStatusFun(type) {
       // 当前需要跳转，设备类型对应的路由
@@ -712,7 +752,7 @@ export default {
         4: '/index/xycb',
         5: '/index/envi',
         7: '/index/bzy',
-        12: '/index/xct',
+        12: '/index/xct'
       }
       if (routerObj[this.offtype] == undefined) {
         return
@@ -720,8 +760,8 @@ export default {
       this.$router.push({
         path: routerObj[this.offtype],
         query: {
-          is_online: type,
-        },
+          is_online: type
+        }
       })
     },
     deleteImg(index) {
@@ -764,7 +804,7 @@ export default {
         this.$axios({
           method: 'POST',
           url: '/api/v2/util/upload/img/',
-          data: form,
+          data: form
         }).then((res) => {
           // console.log(res);
 
@@ -791,7 +831,7 @@ export default {
           } else {
             this.$message({
               message: '上传失败',
-              type: 'error',
+              type: 'error'
             })
           }
         })
@@ -820,7 +860,7 @@ export default {
     getWeatherData() {
       this.$axios({
         method: 'POST',
-        url: '/api/v2/home/weather/',
+        url: '/api/v2/home/weather/'
         // data: this.qs.stringify({
         //   lat:34.81522,
         //   lng:113.67291
@@ -842,7 +882,7 @@ export default {
     getItemsList() {
       this.$axios({
         method: 'POST',
-        url: '/api/v2/home/project/list/?page_size=1000&page_num=1',
+        url: '/api/v2/home/project/list/?page_size=1000&page_num=1'
       }).then((res) => {
         // console.log("项目列表");
         // console.log(res);
@@ -853,6 +893,7 @@ export default {
           this.region = this.list[0].region
           this.projectMessage = this.list[0].project_msg
           this.projectId = this.list[0].project_id
+          this.polygons = this.list[0].area
         }
       })
     },
@@ -865,6 +906,8 @@ export default {
       this.projectMessage = this.list.find((v) => v.project_name == e).project_msg
       this.swiperList = this.list.find((v) => v.project_name == e).img_list
       this.projectId = this.list.find((v) => v.project_name == e).project_id
+      this.polygons = this.list.find((v) => v.project_name == e).area
+
       // console.log(this.projectId);
     },
     // 添加地址选择地区
@@ -902,15 +945,15 @@ export default {
       this.$confirm('此操作将永久删除此项目信息, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
-        type: 'warning',
+        type: 'warning'
       })
         .then(() => {
           this.$axios({
             method: 'POST',
             url: '/api/v2/home/project/delete/',
             data: this.qs.stringify({
-              project_id: this.projectId,
-            }),
+              project_id: this.projectId
+            })
           }).then((res) => {
             // console.log(res);
             if (res.data.msg == '成功') {
@@ -926,7 +969,7 @@ export default {
         .catch(() => {
           this.$resetMessage({
             type: 'info',
-            message: '已取消删除',
+            message: '已取消删除'
           })
         })
     },
@@ -952,7 +995,8 @@ export default {
                   ? this.projectForm.address[0]
                   : this.projectForm.address[2],
               img_list: this.projectForm.imageArr,
-            }),
+              area: this.polygons
+            })
           }).then((res) => {
             // console.log(res);
             if (res.data.msg == '成功') {
@@ -992,7 +1036,8 @@ export default {
                   ? this.projectForm.address[0]
                   : this.projectForm.address[2],
               img_list: this.projectForm.imageArr,
-            }),
+              area: this.polygons
+            })
           }).then((res) => {
             // console.log(res);
             if (res.data.msg == '成功') {
@@ -1023,7 +1068,9 @@ export default {
         province: '',
         city: '',
         district: '',
+        area: ''
       }
+      this.polygons = ''
       // this.cityValue = [];
     },
     // 编辑项目
@@ -1059,7 +1106,7 @@ export default {
         this.projectForm.address = [
           regions.split('市')[0],
           regions.split('市')[1],
-          regions.split('市')[2],
+          regions.split('市')[2]
         ]
         let one = this.list.find((v) => v.project_id == this.projectId).region.split('市')[0] + '市'
         let two = this.list.find((v) => v.project_id == this.projectId).region.split('市')[1]
@@ -1104,7 +1151,7 @@ export default {
     getDeviceTypeList() {
       this.$axios({
         method: 'POST',
-        url: '/api/v2/home/device/type/?page_size=100&page_num=1',
+        url: '/api/v2/home/device/type/?page_size=100&page_num=1'
       }).then((res) => {
         // console.log(res);
         this.deviceTypeList = res.data.data.items
@@ -1135,8 +1182,8 @@ export default {
         url: '/api/v2/home/device/?page_size=5&page_num=1',
         data: this.qs.stringify({
           device_model: device_model,
-          device_type_id: id,
-        }),
+          device_type_id: id
+        })
       }).then((res) => {
         // console.log(res);
         this.deviceList = res.data.data.items
@@ -1159,8 +1206,8 @@ export default {
       this.$router.push({
         path: `/index/${filterData.menu_name}`,
         query: {
-          id: id,
-        },
+          id: id
+        }
       })
       // console.log(id);
       // if (this.selectTypeValue == '杀虫灯') {
@@ -1381,7 +1428,7 @@ export default {
     getEchartsData() {
       this.$axios({
         method: 'POST',
-        url: '/api/v2/home/device/statistic/',
+        url: '/api/v2/home/device/statistic/'
       }).then((res) => {
         // console.log(res);
         this.echartsArr = res.data.data.items.result
@@ -1412,20 +1459,20 @@ export default {
         method: 'POST',
         url: '/api/api_gateway?method=home.homes.device_offf_on_status',
         data: this.qs.stringify({
-          device_type_id: this.offdevice_type_id,
-        }),
+          device_type_id: this.offdevice_type_id
+        })
       }).then((res) => {
         if (res.data.message == '') {
           this.offnone = false
           var arr = [
             {
               value: 0,
-              name: '在线',
+              name: '在线'
             },
             {
               value: 0,
-              name: '离线',
-            },
+              name: '离线'
+            }
           ]
           arr[0].value = res.data.data.on_nums
           arr[1].value = res.data.data.off_nums
@@ -1441,12 +1488,12 @@ export default {
       var option = {
         tooltip: {
           trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
         legend: {
           show: false,
           orient: 'vertical',
-          left: 'right',
+          left: 'right'
         },
         series: [
           {
@@ -1462,35 +1509,35 @@ export default {
                 formatter: '{c} : {d}%',
                 textStyle: {
                   color: '#fff',
-                  fontSize: 14,
-                },
-              },
+                  fontSize: 14
+                }
+              }
             },
             labelLine: {
               normal: {
-                show: false,
-              },
+                show: false
+              }
             },
             itemStyle: {
               normal: {
                 borderWidth: 4,
-                borderColor: '#ffffff',
+                borderColor: '#ffffff'
               },
               emphasis: {
                 borderWidth: 0,
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
-              },
-            },
-          },
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
         ],
         color: ['#73c0de', '#ee6666'],
-        backgroundColor: '#fff',
+        backgroundColor: '#fff'
       }
       echarts.init(document.getElementById('baseoffbox')).setOption(option)
-    },
-  },
+    }
+  }
 }
 </script>
 

src/pages/bigdata/combine/MyMap/index.vue

@@ -115,7 +115,8 @@ export default {
       groupDataList: {},
       currentActiveBlockList: [],
       infoWindowMap: {},
-      typelist: []
+      typelist: [],
+      polygons: []
     }
   },
   watch: {
@@ -181,9 +182,11 @@ export default {
     },
 
     initMapData() {
+      this.map.remove(this.polygonList)
       switch (this.activeRouterName) {
         case 'xmgk':
           this.getBaseList()
+          this.getItemsList()
           break
         case 'znjc':
           this.getbasetype()
@@ -543,6 +546,36 @@ export default {
         }
       })
     },
+    // 获取项目列表
+    getItemsList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/v2/home/project/list/?page_size=1000&page_num=1'
+      }).then((res) => {
+        // console.log("项目列表");
+        // console.log(res);
+        const data = res.data.data.items
+        if (data.length > 0) {
+          const polygons = data[0].area ? JSON.parse(data[0].area) : '[]'
+          polygons.forEach((item) => {
+            let paths = item.path
+            let polygon = new AMap.Polygon({
+              path: paths,
+              fillColor: '#000000',
+              strokeOpacity: 0.6,
+              fillOpacity: 0.3,
+              strokeColor: '#6FBD79',
+              strokeWeight: 2,
+              strokeStyle: 'solid',
+              cursor: 'pointer',
+              strokeDasharray: [5, 5]
+            })
+            this.map.add(polygon)
+            this.polygonList.push(polygon)
+          })
+        }
+      })
+    },
     changeMapCenter() {
       // 根据基地id改变地图中心点
       const baseInfo = this.deviceList.find((item) => item.id === this.baseId)
@@ -883,7 +916,9 @@ export default {
           cursor: 'pointer',
           strokeDasharray: [5, 5]
         })
+        this.map.add(polygon)
 
+        this.polygonList.push(polygon)
         this.blockPolygonMap[item.blockId] = index
 
         polygon.on('mouseover', (ev) => {

src/pages/bigdata/combine/comp/Weather.vue

@@ -104,6 +104,24 @@
 
 <script>
 export default {
+  props: {
+    lng: {
+      type: String,
+      default: '0'
+    },
+    lat: {
+      type: String,
+      default: '0'
+    }
+  },
+  watch: {
+    lng: {
+      handler(val) {
+        this.getWeatherData()
+      },
+      deep: true
+    }
+  },
   computed: {
     // 生成高温温度曲线的坐标点（格式："x1,y1 x2,y2 x3,y3..."）
     getTempPoints() {
@@ -151,8 +169,6 @@ export default {
       forecastData: [],
       chartWidth: 396, // SVG 画布宽度
       chartHeight: 60 // SVG 画布高度
-      // minTemp: 2, // 温度范围最小值（用于坐标映射）
-      // maxTemp: 36 // 温度范围最大值（用于坐标映射）
     }
   },
   methods: {
@@ -193,11 +209,14 @@ export default {
 
       return style
     },
-    getList() {
+    getWeatherData() {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=home.screen.seven_day_weather',
-        data: this.qs.stringify({})
+        data: this.qs.stringify({
+          lng: this.lng,
+          lat: this.lat
+        })
       }).then((res) => {
         if (res.data.message == '') {
           const equipList = res.data.data.content
@@ -362,7 +381,7 @@ export default {
     }
   },
   created() {
-    this.getList()
+    // this.getWeatherData()
   },
   mounted() {}
 }

src/pages/bigdata/combine/xmgk/index.vue

@@ -6,7 +6,7 @@
     <plow-center :plowData="plowData"></plow-center>
     <div class="screen-content-right">
       <div style="height: 618px">
-        <weather></weather>
+        <weather :lng="lng" :lat="lat"></weather>
       </div>
       <div class="pie-chart-box">
         <grow-plants @deviceCount="deviceCount" />
@@ -50,7 +50,9 @@ export default {
         base_area: 0,
         deviceCount: 0
       },
-      baseId: ''
+      baseId: '',
+      lng: '',
+      lat: ''
     }
   },
   computed: {
@@ -70,6 +72,8 @@ export default {
     baseChange(payload) {
       this.plowData.base_area = payload.base_area
       this.baseId = payload.id
+      this.lng = payload.lng
+      this.lat = payload.lat
     },
     deviceCount(payload) {
       this.plowData.deviceCount = payload

src/pages/forecasting/nlcb/xydatainfo.vue

@@ -10,9 +10,7 @@
       <div class="basicsbox_title">
         <div class="basicsbox_title_left">
           <p class="title">基础数据</p>
-          <el-button type="primary" size="mini" @click="refresh"
-            >更新数据</el-button
-          >
+          <el-button type="primary" size="mini" @click="refresh">更新数据</el-button>
         </div>
         <div class="basicsbox_title_box">
           <el-select
@@ -20,7 +18,7 @@
             placeholder="请选择"
             size="small"
             @change="yearchange"
-            style="width:80px;"
+            style="width: 80px"
           >
             <el-option
               v-for="item in yesroptions"
@@ -65,22 +63,15 @@
         <div class="btn" @click="setbait">设置诱芯</div>
       </div>
       <div class="monitordatabox_text">
-        <div
-          v-for="(item, index) in monitordata"
-          :key="index"
-          class="monitordatabox_text_item"
-        >
+        <div v-for="(item, index) in monitordata" :key="index" class="monitordatabox_text_item">
           <p
             v-if="
-              (item.key == 'xy_uptime' || item.key == 'xy_expire_time') &&
-                timedata[item.key] != ''
+              (item.key == 'xy_uptime' || item.key == 'xy_expire_time') && timedata[item.key] != ''
             "
           >
             {{ (timedata[item.key] * 1000) | formatTime }}
           </p>
-          <p
-            v-else-if="item.key == 'xy_expire_time' && timedata[item.key] == ''"
-          >
+          <p v-else-if="item.key == 'xy_expire_time' && timedata[item.key] == ''">
             <span>未设置诱芯到期时间</span>
           </p>
           <p v-else>
@@ -91,11 +82,11 @@
       </div>
     </div>
     <div class="highbox">
-      <div class="anahbox" v-loading="linetf">
+      <!-- <div class="anahbox" v-loading="linetf">
         <p class="title">环境温湿度变化</p>
         <highcharts :options="options" class="highcharts"></highcharts>
         <div class="tishi" v-show="linedatatf">暂无数据</div>
-      </div>
+      </div> -->
       <div class="wormbox" v-loading="linetf2">
         <div class="title_box">
           <p class="title">害虫数据分析</p>
@@ -111,12 +102,7 @@
         <div class="btn" @click="exportxy">导 出</div>
       </div>
       <div class="tablebox_text" v-loading="tabletf">
-        <el-table
-          :data="tableData"
-          stripe
-          style="width: 100%"
-          v-if="$QueryPermission(266)"
-        >
+        <el-table :data="tableData" stripe style="width: 100%" v-if="$QueryPermission(266)">
           <el-table-column
             v-for="(item, index) in tableHeadTxt"
             :key="index"
@@ -165,18 +151,9 @@
       width="500px"
     >
       <div class="baitbox">
-        <el-form
-          ref="form"
-          :rules="rules"
-          :model="baitdata"
-          label-width="120px"
-        >
+        <el-form ref="form" :rules="rules" :model="baitdata" label-width="120px">
           <el-form-item label="诱芯名称" prop="name">
-            <el-input
-              v-model="baitdata.name"
-              size="mini"
-              maxlength="10"
-            ></el-input>
+            <el-input v-model="baitdata.name" size="mini" maxlength="10"></el-input>
           </el-form-item>
           <el-form-item label="诱芯到期时间">
             <el-date-picker
@@ -541,19 +518,7 @@ export default {
       if (second < 10) {
         second = '0' + second
       }
-      return (
-        year +
-        '-' +
-        month +
-        '-' +
-        date +
-        ' ' +
-        hours +
-        ':' +
-        minute +
-        ':' +
-        second
-      )
+      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
     },
     // 年份发生改变
     yearchange(e) {
@@ -672,7 +637,7 @@ export default {
       this.sliderchange2(e)
     },
     // 滑块更改后地值
-    sliderchange2: Debounce(function(e) {
+    sliderchange2: Debounce(function (e) {
       var state = this.formatTooltip(e[0])
       var end = this.formatTooltip(e[1])
       state = state.replace('月', '-')
@@ -703,7 +668,7 @@ export default {
           device_id: this.device_id,
           page: 1
         })
-      }).then(res => {
+      }).then((res) => {
         if (res.data.message == '') {
           if (res.data.data) {
             // //console.log(res.data.data)
@@ -720,8 +685,7 @@ export default {
       this.linetf = true
       this.$axios({
         method: 'post',
-        url:
-          '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
+        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
         data: this.qs.stringify({
           device_id: this.device_id,
           start_time: this.start_time,
@@ -729,7 +693,7 @@ export default {
           status: 'at_ah',
           device_code: this.device_code
         })
-      }).then(res => {
+      }).then((res) => {
         this.linetf = false
         if (res.data.message == '') {
           if (res.data.data) {
@@ -743,14 +707,8 @@ export default {
               var arr = []
               var arr2 = []
               for (var i = 0; i < data.length; i++) {
-                arr.push([
-                  +new Date(data[i].xy_addtime) + 8 * 60 * 60 * 1000,
-                  Number(data[i].at)
-                ])
-                arr2.push([
-                  +new Date(data[i].xy_addtime) + 8 * 60 * 60 * 1000,
-                  Number(data[i].ah)
-                ])
+                arr.push([+new Date(data[i].xy_addtime) + 8 * 60 * 60 * 1000, Number(data[i].at)])
+                arr2.push([+new Date(data[i].xy_addtime) + 8 * 60 * 60 * 1000, Number(data[i].ah)])
               }
               // console.log(arr);
               this.ChartData = [
@@ -786,8 +744,7 @@ export default {
       this.linetf2 = true
       this.$axios({
         method: 'post',
-        url:
-          '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
+        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_line_chart',
         data: this.qs.stringify({
           device_id: this.device_id,
           start_time: this.start_time,
@@ -795,7 +752,7 @@ export default {
           status: 'pest',
           device_code: this.device_code
         })
-      }).then(res => {
+      }).then((res) => {
         this.linetf2 = false
         if (res.data.message == '') {
           if (res.data.data) {
@@ -811,10 +768,7 @@ export default {
             var arr = []
             if (data.length != 0) {
               for (var i = 0; i < data.length; i++) {
-                arr.push([
-                  +new Date(data[i].xy_addtime),
-                  Number(data[i].pest_num)
-                ])
+                arr.push([+new Date(data[i].xy_addtime), Number(data[i].pest_num)])
               }
 
               // console.log(this.ChartData2);
@@ -856,7 +810,7 @@ export default {
           page_size: 10,
           device_code: this.device_code
         })
-      }).then(res => {
+      }).then((res) => {
         this.tabletf = false
         console.log('res.data')
         if (res.data.message == '') {
@@ -886,8 +840,8 @@ export default {
           if (arr.length > 0) {
             let obj = arr[0]
             let newHeader = []
-            Object.keys(obj).forEach(key => {
-              let matchItem = this.tableHeadTxt.filter(item => {
+            Object.keys(obj).forEach((key) => {
+              let matchItem = this.tableHeadTxt.filter((item) => {
                 return item[1] === key
               })
               if (matchItem.length > 0) {
@@ -911,13 +865,12 @@ export default {
         data: this.qs.stringify({
           d_id: this.d_id
         })
-      }).then(res => {
+      }).then((res) => {
         if (res.data.message == '') {
           if (res.data.data) {
             // console.log(res.data.data);
             this.timedata = res.data.data[0]
-            this.timedata['state'] =
-              this.baseinfo.is_online == 0 ? '离线' : '在线'
+            this.timedata['state'] = this.baseinfo.is_online == 0 ? '离线' : '在线'
             this.timedata['pest_count'] = this.pest_count
           }
         }
@@ -930,7 +883,7 @@ export default {
     },
     sumbit() {
       // console.log(this.baitdata.time);
-      this.$refs['form'].validate(valid => {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           var time = ''
           if (this.baitdata.time == '') {
@@ -947,7 +900,7 @@ export default {
               decoy: this.baitdata.name,
               expire_time: time
             })
-          }).then(res => {
+          }).then((res) => {
             this.dialogVisible = false
             if (res.data.message == '') {
               if (res.data.data.status) {
@@ -977,7 +930,7 @@ export default {
       } else {
         arr = this.tableHeadTxt2
       }
-      arr.forEach(item => {
+      arr.forEach((item) => {
         table_header = table_header + '' + item[1] + '|'
       })
       table_header = table_header.substring(0, table_header.length - 1)
@@ -1152,12 +1105,12 @@ export default {
   .title {
     font-weight: 700;
   }
-  .anahbox,
+
   .wormbox {
     background-color: #fff;
     padding: 20px 30px;
     box-sizing: border-box;
-    width: 49.5%;
+    width: 100%;
     position: relative;
     .title_box {
       width: 100%;

src/pages/fourMoodBase/baseManage.vue

@@ -358,7 +358,7 @@ export default {
         cascaderEquipArr: [{ required: true, message: '请选择基地设备', trigger: 'change' }],
         address: [{ required: true, message: '请选择基地地址', trigger: 'change' }],
         baseIntro: [
-          { max: 200, message: '基地描述不能超过200个字符', trigger: 'blur' },
+          { max: 700, message: '基地描述不能超过700个字符', trigger: 'blur' },
           {
             pattern: /^[A-Za-z0-9\u4e00-\u9fa5_,-.。;!？?]+$/,
             message: '不允许输入空格等特殊符号'

test.html

@@ -3,8 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SVG Path 平滑曲线实现</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <title>Vue2 高德地图地区查询与绘制</title>
+    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
+  <script src="https://webapi.amap.com/maps?v=2.0&key=b96a1c32b0bb828f1d153b219fa59ecc&plugin=AMap.ElasticMarker,AMap.PolygonEditor,AMap.DistrictSearch,AMap.ToolBar, AMap.Scale, AMap.MouseTool, AMap.Geocoder,AMap.Zoom"></script>
+
     <style>
         * {
             margin: 0;
@@ -14,424 +16,524 @@
         }
 
         body {
-            background: linear-gradient(135deg, #1a2a6c, #0d1b36);
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
-            color: #fff;
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
         }
 
         .container {
-            width: 100%;
-            max-width: 900px;
-            background: rgba(13, 27, 54, 0.8);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(76, 201, 240, 0.3);
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
         }
 
-        h1 {
+        header {
             text-align: center;
-            color: #4cc9f0;
             margin-bottom: 30px;
-            text-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
+            padding: 20px;
+            background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
+            color: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
-        .chart-container {
-            width: 100%;
-            height: 400px;
-            background: rgba(30, 45, 80, 0.5);
-            border-radius: 10px;
-            padding: 20px;
-            margin-bottom: 30px;
-            position: relative;
+        h1 {
+            font-size: 2.2rem;
+            margin-bottom: 10px;
         }
 
-        .chart {
-            width: 100%;
-            height: 100%;
+        .subtitle {
+            font-size: 1.1rem;
+            opacity: 0.9;
         }
 
-        .controls {
+        .app-container {
             display: flex;
-            justify-content: center;
-            gap: 15px;
-            margin-bottom: 20px;
+            flex-direction: column;
+            gap: 20px;
         }
 
-        .control-btn {
-            background: rgba(76, 201, 240, 0.3);
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            color: white;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s;
+        .search-panel {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
         }
 
-        .control-btn:hover {
-            background: rgba(76, 201, 240, 0.5);
+        .search-box {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
         }
 
-        .control-btn.active {
-            background: rgba(76, 201, 240, 0.7);
-            box-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
+        .search-input {
+            flex: 1;
+            padding: 12px 15px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 16px;
+            transition: border-color 0.3s;
         }
 
-        .code-section {
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 10px;
-            padding: 20px;
-            margin-top: 30px;
+        .search-input:focus {
+            outline: none;
+            border-color: #1e5799;
+            box-shadow: 0 0 0 2px rgba(30, 87, 153, 0.2);
         }
 
-        .code-title {
-            color: #a5b4fc;
-            margin-bottom: 15px;
+        .search-btn, .draw-btn, .clear-btn, .edit-btn {
+            padding: 12px 20px;
+            background: #1e5799;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background 0.3s;
         }
 
-        .code-block {
-            background: #1e1e1e;
-            border-radius: 8px;
-            padding: 15px;
-            font-family: 'Courier New', monospace;
-            overflow-x: auto;
-            line-height: 1.5;
+        .search-btn:hover, .draw-btn:hover, .edit-btn:hover {
+            background: #16457a;
         }
 
-        .comment {
-            color: #6a9955;
+        .clear-btn {
+            background: #e74c3c;
         }
 
-        .property {
-            color: #9cdcfe;
+        .clear-btn:hover {
+            background: #c0392b;
         }
 
-        .value {
-            color: #ce9178;
+        .edit-btn.active {
+            background: #27ae60;
         }
 
-        .explanation {
-            background: rgba(30, 30, 60, 0.5);
-            padding: 15px;
-            border-radius: 8px;
-            margin-top: 20px;
-            border-left: 4px solid #4cc9f0;
+        .map-container {
+            height: 500px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
-        .explanation h3 {
-            color: #a5b4fc;
-            margin-bottom: 10px;
+        .controls {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+            flex-wrap: wrap;
         }
 
-        .point {
-            fill: #4cc9f0;
-            stroke: #fff;
-            stroke-width: 2;
+        .results-panel {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            max-height: 200px;
+            overflow-y: auto;
+        }
+
+        .result-item {
+            padding: 10px 15px;
+            border-bottom: 1px solid #eee;
             cursor: pointer;
-            transition: all 0.3s;
+            transition: background 0.2s;
         }
 
-        .point:hover {
-            r: 8;
-            fill: #ff6b6b;
+        .result-item:hover {
+            background: #f0f7ff;
         }
 
-        .point-label {
-            font-size: 0.8rem;
-            fill: #fff;
-            text-anchor: middle;
-            font-weight: bold;
+        .result-item:last-child {
+            border-bottom: none;
         }
 
-        .grid-line {
-            stroke: rgba(255, 255, 255, 0.1);
-            stroke-width: 1;
+        .instructions {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            margin-top: 20px;
         }
 
-        .axis-label {
-            font-size: 0.8rem;
-            fill: #a0c8ff;
+        .instructions h3 {
+            color: #1e5799;
+            margin-bottom: 10px;
+        }
+
+        .instructions ul {
+            padding-left: 20px;
         }
 
-        .curve-high {
-            stroke: #ff6b6b;
-            stroke-width: 3;
-            fill: none;
+        .instructions li {
+            margin-bottom: 8px;
         }
 
-        .curve-low {
-            stroke: #4facfe;
-            stroke-width: 3;
-            fill: none;
+        .status {
+            margin-top: 10px;
+            padding: 10px;
+            border-radius: 6px;
+            background: #e8f4fd;
+            color: #1e5799;
         }
 
-        .curve-area {
-            fill: url(#gradient);
-            opacity: 0.3;
+        .drawing-status {
+            background: #fff8e1;
+            color: #ff9800;
         }
 
-        .chart-title {
-            font-size: 1.2rem;
-            fill: #a5b4fc;
-            text-anchor: middle;
+        .editing-status {
+            background: #e8f6f3;
+            color: #27ae60;
+        }
+
+        @media (min-width: 768px) {
+            .app-container {
+                flex-direction: row;
+            }
+
+            .search-panel {
+                width: 300px;
+                flex-shrink: 0;
+            }
+
+            .map-container {
+                flex: 1;
+            }
         }
     </style>
 </head>
 <body>
-    <div id="app">
-        <div class="container">
-            <h1>SVG Path 平滑曲线实现</h1>
-
-            <div class="controls">
-                <button class="control-btn" :class="{active: curveType === 'linear'}" @click="curveType = 'linear'">线性曲线</button>
-                <button class="control-btn" :class="{active: curveType === 'quadratic'}" @click="curveType = 'quadratic'">二次贝塞尔曲线</button>
-                <button class="control-btn" :class="{active: curveType === 'cubic'}" @click="curveType = 'cubic'">三次贝塞尔曲线</button>
-                <button class="control-btn" :class="{active: curveType === 'catmull'}" @click="curveType = 'catmull'">Catmull-Rom曲线</button>
-            </div>
+    <div id="app" class="container">
+        <header>
+            <h1>Vue2 高德地图地区查询与绘制</h1>
+            <p class="subtitle">搜索地区并在高德地图上绘制区域边界</p>
+        </header>
+
+        <div class="app-container">
+            <div class="search-panel">
+                <h3>地区搜索</h3>
+                <div class="search-box">
+                    <input
+                        type="text"
+                        class="search-input"
+                        placeholder="输入地区名称，如：北京市朝阳区"
+                        v-model="searchKeyword"
+                        @keyup.enter="searchPlace"
+                    >
+                    <button class="search-btn" @click="searchPlace">搜索</button>
+                </div>
 
-            <div class="chart-container">
-                <svg class="chart" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet">
-                    <!-- 定义渐变 -->
-                    <defs>
-                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                            <stop offset="0%" stop-color="#ff6b6b" />
-                            <stop offset="100%" stop-color="#4facfe" />
-                        </linearGradient>
-                    </defs>
-
-                    <!-- 网格线 -->
-                    <g v-for="i in 5" :key="'grid-'+i">
-                        <line class="grid-line"
-                              :x1="0" :y1="i * 80"
-                              :x2="800" :y2="i * 80" />
-                    </g>
-
-                    <!-- X轴标签 -->
-                    <g v-for="(day, index) in forecast" :key="'label-'+index">
-                        <text class="axis-label"
-                              :x="getXPosition(index)"
-                              :y="390"
-                              text-anchor="middle">
-                            {{ day.day }}
-                        </text>
-                    </g>
-
-                    <!-- Y轴标签 -->
-                    <g v-for="i in 5" :key="'y-label-'+i">
-                        <text class="axis-label" x="20" :y="i * 80" text-anchor="end">
-                            {{ 40 - i * 5 }}℃
-                        </text>
-                    </g>
-
-                    <!-- 曲线区域填充 -->
-                    <path class="curve-area" :d="areaPath" />
-
-                    <!-- 高温曲线 -->
-                    <path class="curve-high" :d="highCurvePath" />
-
-                    <!-- 低温曲线 -->
-                    <path class="curve-low" :d="lowCurvePath" />
-
-                    <!-- 数据点 -->
-                    <g v-for="(day, index) in forecast" :key="'point-'+index">
-                        <circle class="point"
-                                :cx="getXPosition(index)"
-                                :cy="getTemperatureY(parseInt(day.highTemp))"
-                                r="5" />
-                        <circle class="point"
-                                :cx="getXPosition(index)"
-                                :cy="getTemperatureY(parseInt(day.lowTemp))"
-                                r="5" />
-
-                        <!-- 数值标签 -->
-                        <text class="point-label"
-                              :x="getXPosition(index)"
-                              :y="getTemperatureY(parseInt(day.highTemp)) - 15">
-                            {{ day.highTemp }}
-                        </text>
-                        <text class="point-label"
-                              :x="getXPosition(index)"
-                              :y="getTemperatureY(parseInt(day.lowTemp)) + 20">
-                            {{ day.lowTemp }}
-                        </text>
-                    </g>
-
-                    <!-- 图表标题 -->
-                    <text class="chart-title" x="400" y="30">7天温度变化曲线</text>
-                </svg>
-            </div>
+                <div class="controls">
+                    <button class="draw-btn" @click="toggleDrawingMode">
+                        {{ drawingMode ? '退出绘制模式' : '进入绘制模式' }}
+                    </button>
+                    <button class="edit-btn" :class="{active: editingMode}" @click="toggleEditingMode">
+                        {{ editingMode ? '退出编辑模式' : '进入编辑模式' }}
+                    </button>
+                    <button class="clear-btn" @click="clearMap">清除地图</button>
+                </div>
 
-            <div class="code-section">
-                <h3 class="code-title">当前曲线代码</h3>
-                <div class="code-block">
-                    <span class="comment">// {{ curveType }} 曲线路径</span><br>
-                    <span class="property">高温曲线</span>: <span class="value">{{ highCurvePath }}</span><br><br>
-                    <span class="property">低温曲线</span>: <span class="value">{{ lowCurvePath }}</span>
+                <div class="status" :class="statusClass">
+                    {{ statusMessage }}
                 </div>
 
-                <div class="explanation">
-                    <h3>曲线类型说明</h3>
-                    <p><strong>线性曲线</strong>：使用直线连接各点，简单但不够平滑。</p>
-                    <p><strong>二次贝塞尔曲线</strong>：使用单个控制点创建平滑曲线。</p>
-                    <p><strong>三次贝塞尔曲线</strong>：使用两个控制点创建更平滑的曲线。</p>
-                    <p><strong>Catmull-Rom曲线</strong>：通过所有点的曲线，特别适合数据可视化。</p>
+                <div class="results-panel" v-if="searchResults.length > 0">
+                    <h4>搜索结果 ({{ searchResults.length }})</h4>
+                    <div
+                        class="result-item"
+                        v-for="(result, index) in searchResults"
+                        :key="index"
+                        @click="selectResult(result)"
+                    >
+                        <strong>{{ result.name }}</strong><br>
+                        <small>{{ result.district }}{{ result.address }}</small>
+                    </div>
                 </div>
             </div>
+
+            <div class="map-container" id="map-container"></div>
         </div>
-    </div>
 
+        <div class="instructions">
+            <h3>使用说明</h3>
+            <ul>
+                <li>在搜索框中输入地区名称（如"北京市朝阳区"）并点击搜索或按Enter键</li>
+                <li>点击搜索结果项可在地图上定位到该地区</li>
+                <li>点击"进入绘制模式"可手动在地图上绘制多边形区域</li>
+                <li>绘制完成后，点击第一个点或双击可完成绘制</li>
+                <li>点击"进入编辑模式"可选择并编辑已绘制的区域</li>
+                <li>点击"清除地图"可移除所有标记和绘制区域</li>
+            </ul>
+        </div>
+    </div>
+    <script type="text/javascript">
+      window._AMapSecurityConfig = {
+        serviceHost: 'http://47.110.79.22:9000/_AMapService',
+      }
+    </script>
     <script>
+        // 请替换为您的高德地图API密钥
+        const AMAP_KEY = 'b96a1c32b0bb828f1d153b219fa59ecc';
+
         new Vue({
             el: '#app',
             data: {
-                curveType: 'catmull',
-                forecast: [
-                    { day: '周三', highTemp: '32', lowTemp: '21' },
-                    { day: '周四', highTemp: '28', lowTemp: '24' },
-                    { day: '周五', highTemp: '36', lowTemp: '22' },
-                    { day: '周六', highTemp: '30', lowTemp: '23' },
-                    { day: '周日', highTemp: '31', lowTemp: '25' },
-                    { day: '周一', highTemp: '29', lowTemp: '20' },
-                    { day: '周二', highTemp: '27', lowTemp: '19' }
-                ]
+                map: null,
+                searchKeyword: '',
+                searchResults: [],
+                drawingMode: false,
+                editingMode: false,
+                mouseTool: null,
+                polygonEditor: null,
+                polygons: [],
+                markers: [],
+                selectedPolygon: null,
+                statusMessage: '请输入地区名称进行搜索',
+                statusClass: ''
             },
             computed: {
-                highCurvePath() {
-                    return this.generateCurvePath(this.forecast.map(day => parseInt(day.highTemp)));
+                statusClass() {
+                    if (this.drawingMode) return 'drawing-status';
+                    if (this.editingMode) return 'editing-status';
+                    return '';
+                }
+            },
+            mounted() {
+                this.initMap();
+            },
+            methods: {
+                initMap() {
+                    // 初始化地图
+                    this.map = new AMap.Map('map-container', {
+                        zoom: 10,
+                        center: [116.397428, 39.90923], // 默认中心点（北京）
+                        viewMode: '3D'
+                    });
+
+                    // 添加缩放控件
+                    // this.map.addControl(new AMap.Zoom());
+
+                    // 添加比例尺控件
+                    this.map.addControl(new AMap.Scale());
+
+                    // 初始化鼠标工具
+                    this.mouseTool = new AMap.MouseTool(this.map);
+
+                    // 监听绘制完成事件
+                    this.mouseTool.on('draw', (event) => {
+                        if (event.obj instanceof AMap.Polygon) {
+                            const polygon = event.obj;
+                            this.polygons.push(polygon);
+
+                            // 添加右键菜单删除功能
+                            this.addPolygonContextMenu(polygon);
+
+                            this.statusMessage = `已绘制区域，顶点数: ${polygon.getPath().length}`;
+
+                            // 自动退出绘制模式
+                            this.drawingMode = false;
+                        }
+                    });
+
+                    this.statusMessage = '地图加载完成，请输入地区名称进行搜索';
                 },
-                lowCurvePath() {
-                    return this.generateCurvePath(this.forecast.map(day => parseInt(day.lowTemp)));
+
+                searchPlace() {
+                    if (!this.searchKeyword.trim()) {
+                        this.statusMessage = '请输入搜索关键词';
+                        return;
+                    }
+
+                    this.statusMessage = '搜索中...';
+
+                    // 使用高德地图PlaceSearch插件进行搜索
+                    AMap.plugin('AMap.PlaceSearch', () => {
+                        const placeSearch = new AMap.PlaceSearch({
+                            pageSize: 10,
+                            pageIndex: 1,
+                            citylimit: false
+                        });
+
+                        placeSearch.search(this.searchKeyword, (status, result) => {
+                            if (status === 'complete' && result.poiList && result.poiList.pois) {
+                                this.searchResults = result.poiList.pois;
+                                this.statusMessage = `找到 ${this.searchResults.length} 个结果`;
+                            } else {
+                                this.searchResults = [];
+                                this.statusMessage = '未找到相关结果，请尝试其他关键词';
+                            }
+                        });
+                    });
                 },
-                areaPath() {
-                    const highPoints = this.forecast.map((day, i) => ({
-                        x: this.getXPosition(i),
-                        y: this.getTemperatureY(parseInt(day.highTemp))
-                    }));
 
-                    const lowPoints = this.forecast.map((day, i) => ({
-                        x: this.getXPosition(i),
-                        y: this.getTemperatureY(parseInt(day.lowTemp))
-                    })).reverse();
+                selectResult(result) {
+                    // 清除之前的标记
+                    this.clearMarkers();
 
-                    let path = `M ${highPoints[0].x} ${highPoints[0].y}`;
+                    // 添加标记
+                    const marker = new AMap.Marker({
+                        position: [result.location.lng, result.location.lat],
+                        title: result.name,
+                        map: this.map
+                    });
 
-                    // 生成高温曲线
-                    path += this.generateCurveSegment(highPoints);
+                    this.markers.push(marker);
 
-                    // 连接到低温曲线终点
-                    path += ` L ${lowPoints[0].x} ${lowPoints[0].y}`;
+                    // 移动到标记位置
+                    this.map.setZoom(15);
+                    this.map.setCenter([result.location.lng, result.location.lat]);
 
-                    // 生成低温曲线（反向）
-                    path += this.generateCurveSegment(lowPoints);
+                    this.statusMessage = `已定位到: ${result.name}`;
+                },
 
-                    // 闭合路径
-                    path += ' Z';
+                toggleDrawingMode() {
+                    if (this.editingMode) {
+                        this.toggleEditingMode(); // 先退出编辑模式
+                    }
 
-                    return path;
-                }
-            },
-            methods: {
-                getXPosition(index) {
-                    return 100 + index * (600 / (this.forecast.length - 1));
+                    this.drawingMode = !this.drawingMode;
+
+                    if (this.drawingMode) {
+                        // 进入绘制模式
+                        this.mouseTool.polygon({
+                            strokeColor: '#1e5799',
+                            strokeOpacity: 1,
+                            strokeWeight: 3,
+                            fillColor: '#1e5799',
+                            fillOpacity: 0.3,
+                            strokeStyle: 'solid'
+                        });
+
+                        this.statusMessage = '绘制模式：请在地图上点击绘制多边形区域，双击或点击第一个点完成绘制';
+                    } else {
+                        // 退出绘制模式
+                        this.mouseTool.close(true);
+                        this.statusMessage = '已退出绘制模式';
+                    }
                 },
 
-                getTemperatureY(temperature) {
-                    // 温度范围：15-40℃，映射到图表高度
-                    const minTemp = 15;
-                    const maxTemp = 40;
-                    const normalized = (temperature - minTemp) / (maxTemp - minTemp);
-                    return 350 - (normalized * 300);
+                toggleEditingMode() {
+                    if (this.drawingMode) {
+                        this.toggleDrawingMode(); // 先退出绘制模式
+                    }
+
+                    this.editingMode = !this.editingMode;
+
+                    if (this.editingMode) {
+                        this.statusMessage = '编辑模式：请点击要编辑的多边形区域';
+
+                        // 为所有多边形添加点击事件
+                        this.polygons.forEach(polygon => {
+                            polygon.on('click', () => {
+                                this.startEditPolygon(polygon);
+                            });
+                        });
+                    } else {
+                        this.stopEditPolygon();
+                        this.statusMessage = '已退出编辑模式';
+                    }
                 },
 
-                generateCurvePath(values) {
-                    const points = values.map((value, i) => ({
-                        x: this.getXPosition(i),
-                        y: this.getTemperatureY(value)
-                    }));
+                startEditPolygon(polygon) {
+                    // 停止之前的编辑
+                    this.stopEditPolygon();
 
-                    let path = `M ${points[0].x} ${points[0].y}`;
+                    // 开始编辑选中的多边形
+                    this.selectedPolygon = polygon;
 
-                    path += this.generateCurveSegment(points);
+                    // 加载PolyEditor插件
+                    AMap.plugin('AMap.PolyEditor', () => {
+                        this.polygonEditor = new AMap.PolyEditor(this.map, polygon);
+                        this.polygonEditor.open();
 
-                    return path;
+                        this.statusMessage = '正在编辑多边形，拖动顶点或边进行调整';
+
+                        // 监听编辑事件
+                        this.polygonEditor.on('adjust', (event) => {
+                            this.statusMessage = '正在调整多边形顶点';
+                        });
+
+                        this.polygonEditor.on('end', (event) => {
+                            this.statusMessage = `编辑完成，当前顶点数: ${polygon.getPath().length}`;
+                        });
+                    });
                 },
 
-                generateCurveSegment(points) {
-                    if (points.length < 2) return '';
+                stopEditPolygon() {
+                    if (this.polygonEditor) {
+                        this.polygonEditor.close();
+                        this.polygonEditor = null;
+                    }
+                    this.selectedPolygon = null;
 
-                    let path = '';
+                    // 移除多边形的点击事件
+                    this.polygons.forEach(polygon => {
+                        polygon.off('click');
+                    });
+                },
 
-                    switch (this.curveType) {
-                        case 'linear':
-                            // 线性曲线 - 直接连接各点
-                            for (let i = 1; i < points.length; i++) {
-                                path += ` L ${points[i].x} ${points[i].y}`;
-                            }
-                            break;
-
-                        case 'quadratic':
-                            // 二次贝塞尔曲线
-                            for (let i = 1; i < points.length; i++) {
-                                const prev = points[i-1];
-                                const curr = points[i];
-
-                                // 控制点为两点中点
-                                const controlX = (prev.x + curr.x) / 2;
-                                const controlY = (prev.y + curr.y) / 2;
-
-                                if (i === 1) {
-                                    path += ` Q ${controlX} ${controlY} ${curr.x} ${curr.y}`;
-                                } else {
-                                    path += ` T ${curr.x} ${curr.y}`;
-                                }
-                            }
-                            break;
+                addPolygonContextMenu(polygon) {
+                    // 添加右键菜单删除功能
+                    polygon.on('rightclick', (e) => {
+                        // 创建右键菜单
+                        const menu = new AMap.ContextMenu();
 
-                        case 'cubic':
-                            // 三次贝塞尔曲线
-                            for (let i = 1; i < points.length; i++) {
-                                const prev = points[i-1];
-                                const curr = points[i];
+                        menu.addItem("删除此区域", () => {
+                            // 从地图移除
+                            polygon.setMap(null);
 
-                                // 控制点1为前一点向右偏移
-                                const control1X = prev.x + (curr.x - prev.x) * 0.3;
-                                const control1Y = prev.y;
+                            // 从数组中移除
+                            const index = this.polygons.indexOf(polygon);
+                            if (index > -1) {
+                                this.polygons.splice(index, 1);
+                            }
 
-                                // 控制点2为当前点向左偏移
-                                const control2X = curr.x - (curr.x - prev.x) * 0.3;
-                                const control2Y = curr.y;
+                            this.statusMessage = '已删除选中区域';
 
-                                path += ` C ${control1X} ${control1Y}, ${control2X} ${control2Y}, ${curr.x} ${curr.y}`;
+                            // 如果正在编辑此多边形，停止编辑
+                            if (this.selectedPolygon === polygon) {
+                                this.stopEditPolygon();
+                                this.editingMode = false;
                             }
-                            break;
+                        }, 0);
 
-                        case 'catmull':
-                        default:
-                            // Catmull-Rom样条曲线
-                            for (let i = 1; i < points.length; i++) {
-                                const p0 = i > 1 ? points[i-2] : points[i-1];
-                                const p1 = points[i-1];
-                                const p2 = points[i];
-                                const p3 = i < points.length - 1 ? points[i+1] : points[i];
+                        // 在点击位置打开菜单
+                        menu.open(this.map, e.lnglat);
+                    });
+                },
 
-                                // 计算控制点
-                                const control1X = p1.x + (p2.x - p0.x) / 6;
-                                const control1Y = p1.y + (p2.y - p0.y) / 6;
+                clearMap() {
+                    // 清除所有标记
+                    this.clearMarkers();
 
-                                const control2X = p2.x - (p3.x - p1.x) / 6;
-                                const control2Y = p2.y - (p3.y - p1.y) / 6;
+                    // 清除所有多边形
+                    this.clearPolygons();
 
-                                path += ` C ${control1X} ${control1Y}, ${control2X} ${control2Y}, ${p2.x} ${p2.y}`;
-                            }
-                            break;
+                    // 退出绘制和编辑模式
+                    if (this.drawingMode) {
+                        this.drawingMode = false;
+                        this.mouseTool.close(true);
                     }
 
-                    return path;
+                    if (this.editingMode) {
+                        this.editingMode = false;
+                        this.stopEditPolygon();
+                    }
+
+                    this.statusMessage = '地图已清除';
+                },
+
+                clearMarkers() {
+                    this.markers.forEach(marker => {
+                        marker.setMap(null);
+                    });
+                    this.markers = [];
+                },
+
+                clearPolygons() {
+                    this.polygons.forEach(polygon => {
+                        polygon.setMap(null);
+                    });
+                    this.polygons = [];
                 }
             }
         });