web-component-gallery 0.1.77 → 0.1.78

package/dist/amap.umd.js

@@ -8527,7 +8527,7 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   AmapDrawProps: function() { return /* binding */ AmapDrawProps; }\n/* harmony export */ });\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/AmapSearch/index.jsx */ \"./plugins/lib/amap/components/AmapSearch/index.jsx\");\n/* harmony import */ var ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue/es/_util/vue-types */ \"./node_modules/ant-design-vue/es/_util/vue-types/index.js\");\n/* harmony import */ var _AmapDraw_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AmapDraw.less */ \"./plugins/lib/amap/AmapDraw.less\");\n\n\n\n\nconst AmapDrawProps = {\n  /** drawEl为地图容器实例名称 */\n  drawEl: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('AmapDraw'),\n  /** drawType为绘制类型\r\n   *  可选值（point点 | line线 | polygon面） \r\n   */\n  drawType: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('point'),\n  /** 绘制图标 （只在point类型下生效 */\n  drawIcon: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].any,\n  /** drawCount为绘制物绘制个数 */\n  drawCount: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].number.def(1),\n  /** drawOptions为绘制物配置项 */\n  drawOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** drawInfo为绘制物信息 */\n  drawInfo: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].array]),\n  /** drawInfoAll为所有不同类型绘制物信息(用于回显地图图层) \r\n   *  格式: { point: ([]||{}), line: ([]||{}) }\r\n  */\n  drawInfoAll: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object,\n  /** 限制区域 */\n  drawLimitArea: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string]),\n  /** 限制区域样式配置 */\n  drawLimitAreaOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** 是否为纯地图展示数据 */\n  isExhibition: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].bool.def(false)\n};\nconst AmapDraw = {\n  name: 'AmapDraw',\n  props: AmapDrawProps,\n  model: {\n    prop: 'drawInfo',\n    event: 'getAMapLayersInfo'\n  },\n  data() {\n    return {\n      amap: null,\n      drawArea: null,\n      drawLayers: null,\n      drawMouseTool: null,\n      buttonProps: [],\n      drawButtonProps: [{\n        type: 'primary',\n        text: '绘制',\n        event: {\n          click: this.AmapDraw\n        }\n      }, {\n        text: '清除',\n        event: {\n          click: this.AmapDrawClear\n        }\n      }],\n      saveButtonProps: [{\n        type: 'primary',\n        text: '保存',\n        event: {\n          click: this.AmapDrawSave\n        }\n      }, {\n        text: '取消',\n        event: {\n          click: this.AmapDrawReset\n        }\n      }]\n    };\n  },\n  computed: {\n    drawLayersInfo: {\n      get() {\n        return this.drawInfo;\n      },\n      set(newValue) {\n        this.$emit('getAMapLayersInfo', newValue);\n      }\n    }\n  },\n  watch: {\n    // drawInfo: {\n    //   handler(newVal, oldVal) {\n    //     newVal && this.echoDrawLayers()\n    //   },\n    //   deep: true\n    // },\n    drawInfoAll(newValue) {\n      newValue && this.echoDrawLayers();\n    },\n    drawOptions(newValue) {\n      /** 检测options覆盖物配置是否更改，更改后要同步到地图上 */\n      Object.keys(newValue).length && this.setOverlayOptions(newValue);\n    },\n    drawLimitArea(newValue) {\n      newValue && this.setDrawLimitArea();\n    }\n  },\n  mounted() {\n    const timer = setTimeout(() => {\n      this.$initAMap({\n        el: this.drawEl\n      }, amap => {\n        this.amap = amap;\n        this.buttonProps = [].concat(this.drawButtonProps);\n        this.echoDrawLayers(this.drawType);\n        /** 如果有限制区域，则描绘在地图上 */\n        this.drawLimitArea && this.setDrawLimitArea();\n        clearTimeout(timer);\n      });\n    }, 60);\n  },\n  destroyed() {\n    this.AmapDrawClear();\n  },\n  methods: {\n    /** 绘制 */\n    AmapDraw() {\n      console.log('进入');\n      this.buttonProps = [].concat(this.saveButtonProps);\n      this.drawMouseTool = new this.$amap.MouseTool(this.amap);\n      this.AmapDrawClear();\n      this.setDrawLayers(this.drawType);\n      this.drawMouseTool.on('draw', ({\n        obj\n      }) => {\n        if (this.drawArea && !this[`is${this.drawType}InRing`](obj)) return this.amap.remove(obj), this.$message.error('未在范围内描绘！');\n        /** 暂未支持一次性绘制多个 */\n        this.drawCount > 1 ? (this.drawLayers = this.drawLayers || [], this.drawLayers.push(obj)) : this.drawLayers = obj;\n        if (this.drawLayers && (this.drawLayers.length == this.drawCount || this.drawCount == 1)) {\n          return this.drawMouseTool.close();\n        }\n      });\n    },\n    /** 清空绘制 / 清空搜索 */\n    AmapDrawClear() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && this.amap.remove(layerItem));\n      // this.amap.clearMap()\n      this.drawLayers = null;\n      this.drawLayersInfo = {};\n    },\n    /** 保存当前绘制 */\n    AmapDrawSave() {\n      this.assignDrawLayers(this.drawType);\n      this.buttonProps = [].concat(this.drawButtonProps);\n    },\n    /** 取消当前绘制 */\n    AmapDrawReset() {\n      this.buttonProps = [].concat(this.drawButtonProps);\n      this.AmapDrawClear();\n    },\n    /** 搜索地址 */\n    searchChoose(searchMarker, searchInfo) {\n      this.AmapDrawClear();\n      searchMarker.setMap(this.amap);\n      this.amap.setZoomAndCenter(15, searchMarker.getPosition());\n      this.drawType == 'point' && (this.drawLayersInfo = searchInfo);\n      // this.$emit('getAMapLayersInfo', this.drawLayersInfo)\n    },\n    /** 检测覆盖物配置信息并同步 */\n    setOverlayOptions(options) {\n      if (!this.drawLayers) return;\n      this.drawCount > 1 ? this.drawLayers.forEach(drawItem => drawItem.setOptions(options)) : this.drawLayers.setOptions(options);\n    },\n    /** 绘制限定区域 */\n    setDrawLimitArea() {\n      let areaRange = [];\n      try {\n        areaRange = JSON.parse(this.drawLimitArea);\n      } catch {\n        areaRange = this.drawLimitArea;\n      }\n      this.drawArea && this.amap.remove(this.drawArea);\n      /** 判断目前地图上存在的所绘制覆盖物是否在限制范围内 */\n      this.setMapArea(areaRange);\n      this.judgeOverlays();\n    },\n    /** 绘制地图区域范围 */\n    setMapArea(jurisdictionRange) {\n      this.drawArea = new this.$amap.Polygon({\n        map: this.amap,\n        path: jurisdictionRange,\n        extData: 'Area',\n        strokeWeight: 6,\n        ...this.drawLimitAreaOptions\n      });\n      const {\n        lng,\n        lat\n      } = this.drawArea.getBounds().getCenter();\n      this.amap.setZoomAndCenter(15, [lng, lat]);\n    },\n    /** 判断一个线段是否在面内 */\n    islineInRing(polyline) {\n      const paths = polyline.getPath();\n      return paths.every(pointItem => this.ispointInRing(pointItem));\n    },\n    /** 判断一个点是否在面内 */\n    ispointInRing(point) {\n      let position;\n      try {\n        position = point.getPosition();\n      } catch {\n        position = point;\n      }\n      return this.$amap.GeometryUtil.isPointInRing(position, this.drawArea.getPath());\n    },\n    /** 判断地图上所覆盖物是否在限制范围内 */\n    judgeOverlays() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && !this[`is${this.drawType}InRing`](layerItem) && this.removeOverlay(layerItem));\n    },\n    /** 清除单个覆盖物（或 不符合区域范围的覆盖物 */\n    removeOverlay(layerItem) {\n      this.amap.remove(layerItem);\n      this.$message.error('未在区域范围内,请重新描绘！');\n      try {\n        const i = this.drawLayers.findIndex(layer => layer.getExtData() == layerItem.getExtData());\n        this.drawLayers.splice(i, 1);\n      } catch {\n        this.drawLayers = null;\n        this.drawLayersInfo = {};\n      }\n    },\n    /** 根据类型处理不同数据 */\n    setDrawLayers(drawType) {\n      const type = {\n        point: 'marker',\n        line: 'polyline',\n        polygon: 'polygon'\n      };\n\n      /** 图层基础配置 */\n      const drawOptions = drawType == 'point' ? this.$amapLayers.setMarker(this.drawIcon).getOptions() : {\n        strokeWeight: 8\n      };\n      this.drawMouseTool[type[drawType]]({\n        ...drawOptions,\n        ...this.drawOptions\n      });\n    },\n    /** 赋值不同图层数据 */\n    assignDrawLayers(drawType) {\n      if (drawType == 'point') {\n        const {\n          lng,\n          lat\n        } = this.drawLayers.getPosition();\n        const position = {\n          longitude: lng,\n          latitude: lat\n        };\n        this.$amapMethods.getMapAddress(position, address => {\n          this.drawLayersInfo = {\n            ...position,\n            ...address\n          };\n        });\n        return;\n      }\n      const range = this.drawLayers.getPath().map(({\n        lng,\n        lat\n      }) => [lng, lat]);\n      this.drawLayersInfo = {\n        range\n      };\n    },\n    /** 回显不同类型图层 */\n    echoDrawLayers(drawType) {\n      const drawLayersItem = (drawItem, type, i = 0) => {\n        let layersItem = null;\n        const {\n          longitude,\n          latitude,\n          range\n        } = drawItem;\n        const setOptions = {\n          extData: `draw${type}${i}`,\n          ...this.drawOptions\n        };\n        if (type == 'point') {\n          layersItem = this.$amapLayers.setMarker(this.drawIcon, {\n            position: [longitude, latitude],\n            ...setOptions\n          });\n        } else {\n          const options = {\n            path: range,\n            strokeWeight: 8,\n            ...setOptions\n          };\n          layersItem = type == 'line' ? new this.$amap.Polyline(options) : new this.$amap.Polygon(options);\n        }\n        layersItem.setMap(this.amap);\n      };\n      if (!this.isExhibition) {\n        drawLayersItem(this.drawLayersInfo, drawType);\n        return;\n      }\n      if (this.drawInfoAll) {\n        for (let key in this.drawInfoAll) {\n          const isArray = Array.isArray(this.drawInfoAll[key]);\n          isArray ? this.drawInfoAll[key].forEach((drawItem, i) => {\n            drawLayersItem(drawItem, key, i);\n          }) : drawLayersItem(this.drawInfoAll[key], key);\n        }\n        return;\n      }\n      drawLayersItem(this.drawLayersInfo, drawType);\n    }\n  },\n  render(h) {\n    const {\n      props,\n      drawEl,\n      buttonProps,\n      isExhibition,\n      AmapDrawClear,\n      searchChoose\n    } = this;\n    return h(\"div\", {\n      \"class\": \"AmapDraw\"\n    }, [!isExhibition && h(_components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      \"props\": {\n        ...{\n          ...props,\n          buttonProps\n        }\n      },\n      \"on\": {\n        ...{\n          searchReset: AmapDrawClear,\n          searchChoose: searchChoose\n        }\n      }\n    }), h(\"div\", {\n      \"attrs\": {\n        \"id\": drawEl\n      }\n    })]);\n  }\n};\nAmapDraw.install = function (Vue) {\n  Vue.component('AmapDraw', AmapDraw);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AmapDraw);\n\n//# sourceURL=webpack://mui/./plugins/lib/amap/AmapDraw.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   AmapDrawProps: function() { return /* binding */ AmapDrawProps; }\n/* harmony export */ });\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/AmapSearch/index.jsx */ \"./plugins/lib/amap/components/AmapSearch/index.jsx\");\n/* harmony import */ var ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue/es/_util/vue-types */ \"./node_modules/ant-design-vue/es/_util/vue-types/index.js\");\n/* harmony import */ var _AmapDraw_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AmapDraw.less */ \"./plugins/lib/amap/AmapDraw.less\");\n\n\n\n\nconst AmapDrawProps = {\n  /** drawEl为地图容器实例名称 */\n  drawEl: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('AmapDraw'),\n  /** drawType为绘制类型\r\n   *  可选值（point点 | line线 | polygon面） \r\n   */\n  drawType: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('point'),\n  /** 绘制图标 （只在point类型下生效 */\n  drawIcon: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].any.def('http://qxfa.tpddns.cn:8090/poi/poi-marker-default.png'),\n  /** drawCount为绘制物绘制个数 */\n  drawCount: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].number.def(1),\n  /** drawOptions为绘制物配置项 */\n  drawOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** drawInfo为绘制物信息 */\n  drawInfo: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].array]),\n  /** drawInfoAll为所有不同类型绘制物信息(用于回显地图图层) \r\n   *  格式: { point: ([]||{}), line: ([]||{}) }\r\n  */\n  drawInfoAll: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object,\n  /** 限制区域 */\n  drawLimitArea: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string]),\n  /** 限制区域样式配置 */\n  drawLimitAreaOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** 是否为纯地图展示数据 */\n  isExhibition: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].bool.def(false)\n};\nconst AmapDraw = {\n  name: 'AmapDraw',\n  props: AmapDrawProps,\n  model: {\n    prop: 'drawInfo',\n    event: 'getAMapLayersInfo'\n  },\n  data() {\n    return {\n      amap: null,\n      drawArea: null,\n      drawLayers: null,\n      drawMouseTool: null,\n      buttonProps: [],\n      drawButtonProps: [{\n        type: 'primary',\n        text: '绘制',\n        event: {\n          click: this.AmapDraw\n        }\n      }, {\n        text: '清除',\n        event: {\n          click: this.AmapDrawClear\n        }\n      }],\n      saveButtonProps: [{\n        type: 'primary',\n        text: '保存',\n        event: {\n          click: this.AmapDrawSave\n        }\n      }, {\n        text: '取消',\n        event: {\n          click: this.AmapDrawReset\n        }\n      }]\n    };\n  },\n  computed: {\n    drawLayersInfo: {\n      get() {\n        return this.drawInfo;\n      },\n      set(newValue) {\n        this.$emit('getAMapLayersInfo', newValue);\n      }\n    }\n  },\n  watch: {\n    drawInfo: {\n      handler(newVal, oldVal) {\n        this.drawLayersInfo = newVal;\n        newVal && this.echoDrawLayers(this.drawType);\n      },\n      deep: true\n    },\n    drawInfoAll(newValue) {\n      newValue && this.echoDrawLayers();\n    },\n    drawOptions(newValue) {\n      /** 检测options覆盖物配置是否更改，更改后要同步到地图上 */\n      Object.keys(newValue).length && this.setOverlayOptions(newValue);\n    },\n    drawLimitArea(newValue) {\n      newValue && this.setDrawLimitArea();\n    }\n  },\n  mounted() {\n    const timer = setTimeout(() => {\n      this.$initAMap({\n        el: this.drawEl\n      }, amap => {\n        this.amap = amap;\n        this.buttonProps = [].concat(this.drawButtonProps);\n        this.echoDrawLayers(this.drawType);\n        /** 如果有限制区域，则描绘在地图上 */\n        this.drawLimitArea && this.setDrawLimitArea();\n        clearTimeout(timer);\n      });\n    }, 60);\n  },\n  destroyed() {\n    this.AmapDrawClear();\n  },\n  methods: {\n    /** 绘制 */\n    AmapDraw() {\n      this.buttonProps = [].concat(this.saveButtonProps);\n      this.drawMouseTool = new this.$amap.MouseTool(this.amap);\n      this.AmapDrawClear();\n      this.setDrawLayers(this.drawType);\n      this.drawMouseTool.on('draw', ({\n        obj\n      }) => {\n        if (this.drawArea && !this[`is${this.drawType}InRing`](obj)) return this.amap.remove(obj), this.$message.error('未在范围内描绘！');\n        /** 暂未支持一次性绘制多个 */\n        this.drawCount > 1 ? (this.drawLayers = this.drawLayers || [], this.drawLayers.push(obj)) : this.drawLayers = obj;\n        if (this.drawLayers && (this.drawLayers.length == this.drawCount || this.drawCount == 1)) {\n          return this.drawMouseTool.close();\n        }\n      });\n    },\n    /** 清空绘制 / 清空搜索 */\n    AmapDrawClear() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && this.amap.remove(layerItem));\n      // this.amap.clearMap()\n      this.drawLayers = null;\n      this.drawLayersInfo = {};\n    },\n    /** 保存当前绘制 */\n    AmapDrawSave() {\n      this.assignDrawLayers(this.drawType);\n      this.buttonProps = [].concat(this.drawButtonProps);\n    },\n    /** 取消当前绘制 */\n    AmapDrawReset() {\n      this.buttonProps = [].concat(this.drawButtonProps);\n      this.AmapDrawClear();\n    },\n    /** 搜索地址 */\n    searchChoose(searchMarker, searchInfo) {\n      this.AmapDrawClear();\n      searchMarker.setMap(this.amap);\n      this.amap.setZoomAndCenter(15, searchMarker.getPosition());\n      this.drawType == 'point' && (this.drawLayersInfo = searchInfo);\n      // this.$emit('getAMapLayersInfo', this.drawLayersInfo)\n    },\n    /** 检测覆盖物配置信息并同步 */\n    setOverlayOptions(options) {\n      if (!this.drawLayers) return;\n      this.drawCount > 1 ? this.drawLayers.forEach(drawItem => drawItem.setOptions(options)) : this.drawLayers.setOptions(options);\n    },\n    /** 绘制限定区域 */\n    setDrawLimitArea() {\n      let areaRange = [];\n      try {\n        areaRange = JSON.parse(this.drawLimitArea);\n      } catch {\n        areaRange = this.drawLimitArea;\n      }\n      this.drawArea && this.amap.remove(this.drawArea);\n      /** 判断目前地图上存在的所绘制覆盖物是否在限制范围内 */\n      this.setMapArea(areaRange);\n      this.judgeOverlays();\n    },\n    /** 绘制地图区域范围 */\n    setMapArea(jurisdictionRange) {\n      this.drawArea = new this.$amap.Polygon({\n        map: this.amap,\n        path: jurisdictionRange,\n        extData: 'Area',\n        strokeWeight: 6,\n        ...this.drawLimitAreaOptions\n      });\n      const {\n        lng,\n        lat\n      } = this.drawArea.getBounds().getCenter();\n      this.amap.setZoomAndCenter(15, [lng, lat]);\n    },\n    /** 判断一个线段是否在面内 */\n    islineInRing(polyline) {\n      const paths = polyline.getPath();\n      return paths.every(pointItem => this.ispointInRing(pointItem));\n    },\n    /** 判断一个点是否在面内 */\n    ispointInRing(point) {\n      let position;\n      try {\n        position = point.getPosition();\n      } catch {\n        position = point;\n      }\n      return this.$amap.GeometryUtil.isPointInRing(position, this.drawArea.getPath());\n    },\n    /** 判断地图上所覆盖物是否在限制范围内 */\n    judgeOverlays() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && !this[`is${this.drawType}InRing`](layerItem) && this.removeOverlay(layerItem));\n    },\n    /** 清除单个覆盖物（或 不符合区域范围的覆盖物 */\n    removeOverlay(layerItem) {\n      this.amap.remove(layerItem);\n      this.$message.error('未在区域范围内,请重新描绘！');\n      try {\n        const i = this.drawLayers.findIndex(layer => layer.getExtData() == layerItem.getExtData());\n        this.drawLayers.splice(i, 1);\n      } catch {\n        this.drawLayers = null;\n        this.drawLayersInfo = {};\n      }\n    },\n    /** 根据类型处理不同数据 */\n    setDrawLayers(drawType) {\n      const type = {\n        point: 'marker',\n        line: 'polyline',\n        polygon: 'polygon'\n      };\n\n      /** 图层基础配置 */\n      const drawOptions = drawType == 'point' ? this.$amapLayers.setMarker(this.drawIcon).getOptions() : {\n        strokeWeight: 8\n      };\n      this.drawMouseTool[type[drawType]]({\n        ...drawOptions,\n        ...this.drawOptions\n      });\n    },\n    /** 赋值不同图层数据 */\n    assignDrawLayers(drawType) {\n      if (drawType == 'point') {\n        const {\n          lng,\n          lat\n        } = this.drawLayers.getPosition();\n        const position = {\n          longitude: lng,\n          latitude: lat\n        };\n        this.$amapMethods.getMapAddress(position, address => {\n          this.drawLayersInfo = {\n            ...position,\n            ...address\n          };\n        });\n        return;\n      }\n      const range = this.drawLayers.getPath().map(({\n        lng,\n        lat\n      }) => [lng, lat]);\n      this.drawLayersInfo = {\n        range\n      };\n    },\n    /** 回显不同类型图层 */\n    echoDrawLayers(drawType) {\n      const drawLayersItem = (drawItem, type, i = 0) => {\n        if (!drawItem || !Object.keys(drawItem).length || !this.amap) return;\n        let layersItem = null;\n        const {\n          longitude,\n          latitude,\n          range\n        } = drawItem;\n        const setOptions = {\n          extData: `draw${type}${i}`,\n          ...this.drawOptions\n        };\n        if (type == 'point') {\n          layersItem = this.$amapLayers.setMarker(this.drawIcon, {\n            position: [longitude, latitude],\n            ...setOptions\n          });\n        } else {\n          const options = {\n            path: range,\n            strokeWeight: 8,\n            ...setOptions\n          };\n          layersItem = type == 'line' ? new this.$amap.Polyline(options) : new this.$amap.Polygon(options);\n        }\n        layersItem.setMap(this.amap);\n        this.amap.setFitView();\n      };\n      if (!this.isExhibition) {\n        drawLayersItem(this.drawLayersInfo, drawType);\n        return;\n      }\n      if (this.drawInfoAll) {\n        for (let key in this.drawInfoAll) {\n          const isArray = Array.isArray(this.drawInfoAll[key]);\n          isArray ? this.drawInfoAll[key].forEach((drawItem, i) => {\n            drawLayersItem(drawItem, key, i);\n          }) : drawLayersItem(this.drawInfoAll[key], key);\n        }\n        return;\n      }\n      drawLayersItem(this.drawLayersInfo, drawType);\n    }\n  },\n  render(h) {\n    const {\n      props,\n      drawEl,\n      buttonProps,\n      isExhibition,\n      AmapDrawClear,\n      searchChoose\n    } = this;\n    return h(\"div\", {\n      \"class\": \"AmapDraw\"\n    }, [!isExhibition && h(_components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      \"props\": {\n        ...{\n          ...props,\n          buttonProps\n        }\n      },\n      \"on\": {\n        ...{\n          searchReset: AmapDrawClear,\n          searchChoose: searchChoose\n        }\n      }\n    }), h(\"div\", {\n      \"attrs\": {\n        \"id\": drawEl\n      }\n    })]);\n  }\n};\nAmapDraw.install = function (Vue) {\n  Vue.component('AmapDraw', AmapDraw);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AmapDraw);\n\n//# sourceURL=webpack://mui/./plugins/lib/amap/AmapDraw.jsx?");
 
 /***/ }),
 

package/dist/index.umd.js

@@ -8527,7 +8527,7 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   AmapDrawProps: function() { return /* binding */ AmapDrawProps; }\n/* harmony export */ });\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/AmapSearch/index.jsx */ \"./plugins/lib/amap/components/AmapSearch/index.jsx\");\n/* harmony import */ var ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue/es/_util/vue-types */ \"./node_modules/ant-design-vue/es/_util/vue-types/index.js\");\n/* harmony import */ var _AmapDraw_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AmapDraw.less */ \"./plugins/lib/amap/AmapDraw.less\");\n\n\n\n\nconst AmapDrawProps = {\n  /** drawEl为地图容器实例名称 */\n  drawEl: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('AmapDraw'),\n  /** drawType为绘制类型\r\n   *  可选值（point点 | line线 | polygon面） \r\n   */\n  drawType: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('point'),\n  /** 绘制图标 （只在point类型下生效 */\n  drawIcon: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].any,\n  /** drawCount为绘制物绘制个数 */\n  drawCount: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].number.def(1),\n  /** drawOptions为绘制物配置项 */\n  drawOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** drawInfo为绘制物信息 */\n  drawInfo: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].array]),\n  /** drawInfoAll为所有不同类型绘制物信息(用于回显地图图层) \r\n   *  格式: { point: ([]||{}), line: ([]||{}) }\r\n  */\n  drawInfoAll: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object,\n  /** 限制区域 */\n  drawLimitArea: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string]),\n  /** 限制区域样式配置 */\n  drawLimitAreaOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** 是否为纯地图展示数据 */\n  isExhibition: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].bool.def(false)\n};\nconst AmapDraw = {\n  name: 'AmapDraw',\n  props: AmapDrawProps,\n  model: {\n    prop: 'drawInfo',\n    event: 'getAMapLayersInfo'\n  },\n  data() {\n    return {\n      amap: null,\n      drawArea: null,\n      drawLayers: null,\n      drawMouseTool: null,\n      buttonProps: [],\n      drawButtonProps: [{\n        type: 'primary',\n        text: '绘制',\n        event: {\n          click: this.AmapDraw\n        }\n      }, {\n        text: '清除',\n        event: {\n          click: this.AmapDrawClear\n        }\n      }],\n      saveButtonProps: [{\n        type: 'primary',\n        text: '保存',\n        event: {\n          click: this.AmapDrawSave\n        }\n      }, {\n        text: '取消',\n        event: {\n          click: this.AmapDrawReset\n        }\n      }]\n    };\n  },\n  computed: {\n    drawLayersInfo: {\n      get() {\n        return this.drawInfo;\n      },\n      set(newValue) {\n        this.$emit('getAMapLayersInfo', newValue);\n      }\n    }\n  },\n  watch: {\n    // drawInfo: {\n    //   handler(newVal, oldVal) {\n    //     newVal && this.echoDrawLayers()\n    //   },\n    //   deep: true\n    // },\n    drawInfoAll(newValue) {\n      newValue && this.echoDrawLayers();\n    },\n    drawOptions(newValue) {\n      /** 检测options覆盖物配置是否更改，更改后要同步到地图上 */\n      Object.keys(newValue).length && this.setOverlayOptions(newValue);\n    },\n    drawLimitArea(newValue) {\n      newValue && this.setDrawLimitArea();\n    }\n  },\n  mounted() {\n    const timer = setTimeout(() => {\n      this.$initAMap({\n        el: this.drawEl\n      }, amap => {\n        this.amap = amap;\n        this.buttonProps = [].concat(this.drawButtonProps);\n        this.echoDrawLayers(this.drawType);\n        /** 如果有限制区域，则描绘在地图上 */\n        this.drawLimitArea && this.setDrawLimitArea();\n        clearTimeout(timer);\n      });\n    }, 60);\n  },\n  destroyed() {\n    this.AmapDrawClear();\n  },\n  methods: {\n    /** 绘制 */\n    AmapDraw() {\n      console.log('进入');\n      this.buttonProps = [].concat(this.saveButtonProps);\n      this.drawMouseTool = new this.$amap.MouseTool(this.amap);\n      this.AmapDrawClear();\n      this.setDrawLayers(this.drawType);\n      this.drawMouseTool.on('draw', ({\n        obj\n      }) => {\n        if (this.drawArea && !this[`is${this.drawType}InRing`](obj)) return this.amap.remove(obj), this.$message.error('未在范围内描绘！');\n        /** 暂未支持一次性绘制多个 */\n        this.drawCount > 1 ? (this.drawLayers = this.drawLayers || [], this.drawLayers.push(obj)) : this.drawLayers = obj;\n        if (this.drawLayers && (this.drawLayers.length == this.drawCount || this.drawCount == 1)) {\n          return this.drawMouseTool.close();\n        }\n      });\n    },\n    /** 清空绘制 / 清空搜索 */\n    AmapDrawClear() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && this.amap.remove(layerItem));\n      // this.amap.clearMap()\n      this.drawLayers = null;\n      this.drawLayersInfo = {};\n    },\n    /** 保存当前绘制 */\n    AmapDrawSave() {\n      this.assignDrawLayers(this.drawType);\n      this.buttonProps = [].concat(this.drawButtonProps);\n    },\n    /** 取消当前绘制 */\n    AmapDrawReset() {\n      this.buttonProps = [].concat(this.drawButtonProps);\n      this.AmapDrawClear();\n    },\n    /** 搜索地址 */\n    searchChoose(searchMarker, searchInfo) {\n      this.AmapDrawClear();\n      searchMarker.setMap(this.amap);\n      this.amap.setZoomAndCenter(15, searchMarker.getPosition());\n      this.drawType == 'point' && (this.drawLayersInfo = searchInfo);\n      // this.$emit('getAMapLayersInfo', this.drawLayersInfo)\n    },\n    /** 检测覆盖物配置信息并同步 */\n    setOverlayOptions(options) {\n      if (!this.drawLayers) return;\n      this.drawCount > 1 ? this.drawLayers.forEach(drawItem => drawItem.setOptions(options)) : this.drawLayers.setOptions(options);\n    },\n    /** 绘制限定区域 */\n    setDrawLimitArea() {\n      let areaRange = [];\n      try {\n        areaRange = JSON.parse(this.drawLimitArea);\n      } catch {\n        areaRange = this.drawLimitArea;\n      }\n      this.drawArea && this.amap.remove(this.drawArea);\n      /** 判断目前地图上存在的所绘制覆盖物是否在限制范围内 */\n      this.setMapArea(areaRange);\n      this.judgeOverlays();\n    },\n    /** 绘制地图区域范围 */\n    setMapArea(jurisdictionRange) {\n      this.drawArea = new this.$amap.Polygon({\n        map: this.amap,\n        path: jurisdictionRange,\n        extData: 'Area',\n        strokeWeight: 6,\n        ...this.drawLimitAreaOptions\n      });\n      const {\n        lng,\n        lat\n      } = this.drawArea.getBounds().getCenter();\n      this.amap.setZoomAndCenter(15, [lng, lat]);\n    },\n    /** 判断一个线段是否在面内 */\n    islineInRing(polyline) {\n      const paths = polyline.getPath();\n      return paths.every(pointItem => this.ispointInRing(pointItem));\n    },\n    /** 判断一个点是否在面内 */\n    ispointInRing(point) {\n      let position;\n      try {\n        position = point.getPosition();\n      } catch {\n        position = point;\n      }\n      return this.$amap.GeometryUtil.isPointInRing(position, this.drawArea.getPath());\n    },\n    /** 判断地图上所覆盖物是否在限制范围内 */\n    judgeOverlays() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && !this[`is${this.drawType}InRing`](layerItem) && this.removeOverlay(layerItem));\n    },\n    /** 清除单个覆盖物（或 不符合区域范围的覆盖物 */\n    removeOverlay(layerItem) {\n      this.amap.remove(layerItem);\n      this.$message.error('未在区域范围内,请重新描绘！');\n      try {\n        const i = this.drawLayers.findIndex(layer => layer.getExtData() == layerItem.getExtData());\n        this.drawLayers.splice(i, 1);\n      } catch {\n        this.drawLayers = null;\n        this.drawLayersInfo = {};\n      }\n    },\n    /** 根据类型处理不同数据 */\n    setDrawLayers(drawType) {\n      const type = {\n        point: 'marker',\n        line: 'polyline',\n        polygon: 'polygon'\n      };\n\n      /** 图层基础配置 */\n      const drawOptions = drawType == 'point' ? this.$amapLayers.setMarker(this.drawIcon).getOptions() : {\n        strokeWeight: 8\n      };\n      this.drawMouseTool[type[drawType]]({\n        ...drawOptions,\n        ...this.drawOptions\n      });\n    },\n    /** 赋值不同图层数据 */\n    assignDrawLayers(drawType) {\n      if (drawType == 'point') {\n        const {\n          lng,\n          lat\n        } = this.drawLayers.getPosition();\n        const position = {\n          longitude: lng,\n          latitude: lat\n        };\n        this.$amapMethods.getMapAddress(position, address => {\n          this.drawLayersInfo = {\n            ...position,\n            ...address\n          };\n        });\n        return;\n      }\n      const range = this.drawLayers.getPath().map(({\n        lng,\n        lat\n      }) => [lng, lat]);\n      this.drawLayersInfo = {\n        range\n      };\n    },\n    /** 回显不同类型图层 */\n    echoDrawLayers(drawType) {\n      const drawLayersItem = (drawItem, type, i = 0) => {\n        let layersItem = null;\n        const {\n          longitude,\n          latitude,\n          range\n        } = drawItem;\n        const setOptions = {\n          extData: `draw${type}${i}`,\n          ...this.drawOptions\n        };\n        if (type == 'point') {\n          layersItem = this.$amapLayers.setMarker(this.drawIcon, {\n            position: [longitude, latitude],\n            ...setOptions\n          });\n        } else {\n          const options = {\n            path: range,\n            strokeWeight: 8,\n            ...setOptions\n          };\n          layersItem = type == 'line' ? new this.$amap.Polyline(options) : new this.$amap.Polygon(options);\n        }\n        layersItem.setMap(this.amap);\n      };\n      if (!this.isExhibition) {\n        drawLayersItem(this.drawLayersInfo, drawType);\n        return;\n      }\n      if (this.drawInfoAll) {\n        for (let key in this.drawInfoAll) {\n          const isArray = Array.isArray(this.drawInfoAll[key]);\n          isArray ? this.drawInfoAll[key].forEach((drawItem, i) => {\n            drawLayersItem(drawItem, key, i);\n          }) : drawLayersItem(this.drawInfoAll[key], key);\n        }\n        return;\n      }\n      drawLayersItem(this.drawLayersInfo, drawType);\n    }\n  },\n  render(h) {\n    const {\n      props,\n      drawEl,\n      buttonProps,\n      isExhibition,\n      AmapDrawClear,\n      searchChoose\n    } = this;\n    return h(\"div\", {\n      \"class\": \"AmapDraw\"\n    }, [!isExhibition && h(_components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      \"props\": {\n        ...{\n          ...props,\n          buttonProps\n        }\n      },\n      \"on\": {\n        ...{\n          searchReset: AmapDrawClear,\n          searchChoose: searchChoose\n        }\n      }\n    }), h(\"div\", {\n      \"attrs\": {\n        \"id\": drawEl\n      }\n    })]);\n  }\n};\nAmapDraw.install = function (Vue) {\n  Vue.component('AmapDraw', AmapDraw);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AmapDraw);\n\n//# sourceURL=webpack://mui/./plugins/lib/amap/AmapDraw.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   AmapDrawProps: function() { return /* binding */ AmapDrawProps; }\n/* harmony export */ });\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/AmapSearch/index.jsx */ \"./plugins/lib/amap/components/AmapSearch/index.jsx\");\n/* harmony import */ var ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ant-design-vue/es/_util/vue-types */ \"./node_modules/ant-design-vue/es/_util/vue-types/index.js\");\n/* harmony import */ var _AmapDraw_less__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AmapDraw.less */ \"./plugins/lib/amap/AmapDraw.less\");\n\n\n\n\nconst AmapDrawProps = {\n  /** drawEl为地图容器实例名称 */\n  drawEl: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('AmapDraw'),\n  /** drawType为绘制类型\r\n   *  可选值（point点 | line线 | polygon面） \r\n   */\n  drawType: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string.def('point'),\n  /** 绘制图标 （只在point类型下生效 */\n  drawIcon: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].any.def('http://qxfa.tpddns.cn:8090/poi/poi-marker-default.png'),\n  /** drawCount为绘制物绘制个数 */\n  drawCount: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].number.def(1),\n  /** drawOptions为绘制物配置项 */\n  drawOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** drawInfo为绘制物信息 */\n  drawInfo: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].array]),\n  /** drawInfoAll为所有不同类型绘制物信息(用于回显地图图层) \r\n   *  格式: { point: ([]||{}), line: ([]||{}) }\r\n  */\n  drawInfoAll: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object,\n  /** 限制区域 */\n  drawLimitArea: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].oneOfType([ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object, ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].string]),\n  /** 限制区域样式配置 */\n  drawLimitAreaOptions: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].object.def({}),\n  /** 是否为纯地图展示数据 */\n  isExhibition: ant_design_vue_es_util_vue_types__WEBPACK_IMPORTED_MODULE_3__[\"default\"].bool.def(false)\n};\nconst AmapDraw = {\n  name: 'AmapDraw',\n  props: AmapDrawProps,\n  model: {\n    prop: 'drawInfo',\n    event: 'getAMapLayersInfo'\n  },\n  data() {\n    return {\n      amap: null,\n      drawArea: null,\n      drawLayers: null,\n      drawMouseTool: null,\n      buttonProps: [],\n      drawButtonProps: [{\n        type: 'primary',\n        text: '绘制',\n        event: {\n          click: this.AmapDraw\n        }\n      }, {\n        text: '清除',\n        event: {\n          click: this.AmapDrawClear\n        }\n      }],\n      saveButtonProps: [{\n        type: 'primary',\n        text: '保存',\n        event: {\n          click: this.AmapDrawSave\n        }\n      }, {\n        text: '取消',\n        event: {\n          click: this.AmapDrawReset\n        }\n      }]\n    };\n  },\n  computed: {\n    drawLayersInfo: {\n      get() {\n        return this.drawInfo;\n      },\n      set(newValue) {\n        this.$emit('getAMapLayersInfo', newValue);\n      }\n    }\n  },\n  watch: {\n    drawInfo: {\n      handler(newVal, oldVal) {\n        this.drawLayersInfo = newVal;\n        newVal && this.echoDrawLayers(this.drawType);\n      },\n      deep: true\n    },\n    drawInfoAll(newValue) {\n      newValue && this.echoDrawLayers();\n    },\n    drawOptions(newValue) {\n      /** 检测options覆盖物配置是否更改，更改后要同步到地图上 */\n      Object.keys(newValue).length && this.setOverlayOptions(newValue);\n    },\n    drawLimitArea(newValue) {\n      newValue && this.setDrawLimitArea();\n    }\n  },\n  mounted() {\n    const timer = setTimeout(() => {\n      this.$initAMap({\n        el: this.drawEl\n      }, amap => {\n        this.amap = amap;\n        this.buttonProps = [].concat(this.drawButtonProps);\n        this.echoDrawLayers(this.drawType);\n        /** 如果有限制区域，则描绘在地图上 */\n        this.drawLimitArea && this.setDrawLimitArea();\n        clearTimeout(timer);\n      });\n    }, 60);\n  },\n  destroyed() {\n    this.AmapDrawClear();\n  },\n  methods: {\n    /** 绘制 */\n    AmapDraw() {\n      this.buttonProps = [].concat(this.saveButtonProps);\n      this.drawMouseTool = new this.$amap.MouseTool(this.amap);\n      this.AmapDrawClear();\n      this.setDrawLayers(this.drawType);\n      this.drawMouseTool.on('draw', ({\n        obj\n      }) => {\n        if (this.drawArea && !this[`is${this.drawType}InRing`](obj)) return this.amap.remove(obj), this.$message.error('未在范围内描绘！');\n        /** 暂未支持一次性绘制多个 */\n        this.drawCount > 1 ? (this.drawLayers = this.drawLayers || [], this.drawLayers.push(obj)) : this.drawLayers = obj;\n        if (this.drawLayers && (this.drawLayers.length == this.drawCount || this.drawCount == 1)) {\n          return this.drawMouseTool.close();\n        }\n      });\n    },\n    /** 清空绘制 / 清空搜索 */\n    AmapDrawClear() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && this.amap.remove(layerItem));\n      // this.amap.clearMap()\n      this.drawLayers = null;\n      this.drawLayersInfo = {};\n    },\n    /** 保存当前绘制 */\n    AmapDrawSave() {\n      this.assignDrawLayers(this.drawType);\n      this.buttonProps = [].concat(this.drawButtonProps);\n    },\n    /** 取消当前绘制 */\n    AmapDrawReset() {\n      this.buttonProps = [].concat(this.drawButtonProps);\n      this.AmapDrawClear();\n    },\n    /** 搜索地址 */\n    searchChoose(searchMarker, searchInfo) {\n      this.AmapDrawClear();\n      searchMarker.setMap(this.amap);\n      this.amap.setZoomAndCenter(15, searchMarker.getPosition());\n      this.drawType == 'point' && (this.drawLayersInfo = searchInfo);\n      // this.$emit('getAMapLayersInfo', this.drawLayersInfo)\n    },\n    /** 检测覆盖物配置信息并同步 */\n    setOverlayOptions(options) {\n      if (!this.drawLayers) return;\n      this.drawCount > 1 ? this.drawLayers.forEach(drawItem => drawItem.setOptions(options)) : this.drawLayers.setOptions(options);\n    },\n    /** 绘制限定区域 */\n    setDrawLimitArea() {\n      let areaRange = [];\n      try {\n        areaRange = JSON.parse(this.drawLimitArea);\n      } catch {\n        areaRange = this.drawLimitArea;\n      }\n      this.drawArea && this.amap.remove(this.drawArea);\n      /** 判断目前地图上存在的所绘制覆盖物是否在限制范围内 */\n      this.setMapArea(areaRange);\n      this.judgeOverlays();\n    },\n    /** 绘制地图区域范围 */\n    setMapArea(jurisdictionRange) {\n      this.drawArea = new this.$amap.Polygon({\n        map: this.amap,\n        path: jurisdictionRange,\n        extData: 'Area',\n        strokeWeight: 6,\n        ...this.drawLimitAreaOptions\n      });\n      const {\n        lng,\n        lat\n      } = this.drawArea.getBounds().getCenter();\n      this.amap.setZoomAndCenter(15, [lng, lat]);\n    },\n    /** 判断一个线段是否在面内 */\n    islineInRing(polyline) {\n      const paths = polyline.getPath();\n      return paths.every(pointItem => this.ispointInRing(pointItem));\n    },\n    /** 判断一个点是否在面内 */\n    ispointInRing(point) {\n      let position;\n      try {\n        position = point.getPosition();\n      } catch {\n        position = point;\n      }\n      return this.$amap.GeometryUtil.isPointInRing(position, this.drawArea.getPath());\n    },\n    /** 判断地图上所覆盖物是否在限制范围内 */\n    judgeOverlays() {\n      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && !this[`is${this.drawType}InRing`](layerItem) && this.removeOverlay(layerItem));\n    },\n    /** 清除单个覆盖物（或 不符合区域范围的覆盖物 */\n    removeOverlay(layerItem) {\n      this.amap.remove(layerItem);\n      this.$message.error('未在区域范围内,请重新描绘！');\n      try {\n        const i = this.drawLayers.findIndex(layer => layer.getExtData() == layerItem.getExtData());\n        this.drawLayers.splice(i, 1);\n      } catch {\n        this.drawLayers = null;\n        this.drawLayersInfo = {};\n      }\n    },\n    /** 根据类型处理不同数据 */\n    setDrawLayers(drawType) {\n      const type = {\n        point: 'marker',\n        line: 'polyline',\n        polygon: 'polygon'\n      };\n\n      /** 图层基础配置 */\n      const drawOptions = drawType == 'point' ? this.$amapLayers.setMarker(this.drawIcon).getOptions() : {\n        strokeWeight: 8\n      };\n      this.drawMouseTool[type[drawType]]({\n        ...drawOptions,\n        ...this.drawOptions\n      });\n    },\n    /** 赋值不同图层数据 */\n    assignDrawLayers(drawType) {\n      if (drawType == 'point') {\n        const {\n          lng,\n          lat\n        } = this.drawLayers.getPosition();\n        const position = {\n          longitude: lng,\n          latitude: lat\n        };\n        this.$amapMethods.getMapAddress(position, address => {\n          this.drawLayersInfo = {\n            ...position,\n            ...address\n          };\n        });\n        return;\n      }\n      const range = this.drawLayers.getPath().map(({\n        lng,\n        lat\n      }) => [lng, lat]);\n      this.drawLayersInfo = {\n        range\n      };\n    },\n    /** 回显不同类型图层 */\n    echoDrawLayers(drawType) {\n      const drawLayersItem = (drawItem, type, i = 0) => {\n        if (!drawItem || !Object.keys(drawItem).length || !this.amap) return;\n        let layersItem = null;\n        const {\n          longitude,\n          latitude,\n          range\n        } = drawItem;\n        const setOptions = {\n          extData: `draw${type}${i}`,\n          ...this.drawOptions\n        };\n        if (type == 'point') {\n          layersItem = this.$amapLayers.setMarker(this.drawIcon, {\n            position: [longitude, latitude],\n            ...setOptions\n          });\n        } else {\n          const options = {\n            path: range,\n            strokeWeight: 8,\n            ...setOptions\n          };\n          layersItem = type == 'line' ? new this.$amap.Polyline(options) : new this.$amap.Polygon(options);\n        }\n        layersItem.setMap(this.amap);\n        this.amap.setFitView();\n      };\n      if (!this.isExhibition) {\n        drawLayersItem(this.drawLayersInfo, drawType);\n        return;\n      }\n      if (this.drawInfoAll) {\n        for (let key in this.drawInfoAll) {\n          const isArray = Array.isArray(this.drawInfoAll[key]);\n          isArray ? this.drawInfoAll[key].forEach((drawItem, i) => {\n            drawLayersItem(drawItem, key, i);\n          }) : drawLayersItem(this.drawInfoAll[key], key);\n        }\n        return;\n      }\n      drawLayersItem(this.drawLayersInfo, drawType);\n    }\n  },\n  render(h) {\n    const {\n      props,\n      drawEl,\n      buttonProps,\n      isExhibition,\n      AmapDrawClear,\n      searchChoose\n    } = this;\n    return h(\"div\", {\n      \"class\": \"AmapDraw\"\n    }, [!isExhibition && h(_components_AmapSearch_index_jsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n      \"props\": {\n        ...{\n          ...props,\n          buttonProps\n        }\n      },\n      \"on\": {\n        ...{\n          searchReset: AmapDrawClear,\n          searchChoose: searchChoose\n        }\n      }\n    }), h(\"div\", {\n      \"attrs\": {\n        \"id\": drawEl\n      }\n    })]);\n  }\n};\nAmapDraw.install = function (Vue) {\n  Vue.component('AmapDraw', AmapDraw);\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (AmapDraw);\n\n//# sourceURL=webpack://mui/./plugins/lib/amap/AmapDraw.jsx?");
 
 /***/ }),
 

package/lib/amap/AmapDraw.jsx

@@ -11,7 +11,7 @@ export const AmapDrawProps = {
      */
     drawType: PropTypes.string.def('point'),
     /** 绘制图标 （只在point类型下生效 */
-    drawIcon: PropTypes.any,
+    drawIcon: PropTypes.any.def('http://qxfa.tpddns.cn:8090/poi/poi-marker-default.png'),
     /** drawCount为绘制物绘制个数 */
     drawCount: PropTypes.number.def(1),
     /** drawOptions为绘制物配置项 */
@@ -45,7 +45,7 @@ const AmapDraw = {
         drawMouseTool: null, 
         buttonProps: [],
         drawButtonProps: [
-          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } },
+          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } }, 
           { text: '清除', event: { click: this.AmapDrawClear } }
         ],
         saveButtonProps: [
@@ -62,15 +62,16 @@ const AmapDraw = {
       set(newValue){
         this.$emit('getAMapLayersInfo', newValue)
       }
-    }
-  }, 
+    } 
+  },
   watch: {
-    // drawInfo: {
-    //   handler(newVal, oldVal) {
-    //     newVal && this.echoDrawLayers()
-    //   },
-    //   deep: true
-    // },
+    drawInfo: {
+      handler(newVal, oldVal) {
+        this.drawLayersInfo = newVal
+        newVal && this.echoDrawLayers(this.drawType) 
+      },
+      deep: true
+    }, 
     drawInfoAll(newValue) {
       newValue && this.echoDrawLayers()
     },
@@ -100,7 +101,6 @@ const AmapDraw = {
   methods: {
     /** 绘制 */
     AmapDraw() {
-      console.log('进入') 
         this.buttonProps = [].concat(this.saveButtonProps)
         this.drawMouseTool = new this.$amap.MouseTool(this.amap)
 
@@ -252,6 +252,9 @@ const AmapDraw = {
     echoDrawLayers(drawType) {
 
       const drawLayersItem = (drawItem, type, i=0) => {
+
+        if(!drawItem || !Object.keys(drawItem).length || !this.amap) return
+
         let layersItem = null
         const {longitude, latitude, range} = drawItem
         const setOptions = {
@@ -279,6 +282,7 @@ const AmapDraw = {
             new this.$amap.Polygon(options)
         }
         layersItem.setMap(this.amap)
+        this.amap.setFitView()
       }
       
       if(!this.isExhibition) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "0.1.77",
+  "version": "0.1.78",
   "description": "vue-library-ui组件库",
   "main": "dist/index.umd.js",
   "files": [

package/plugins/lib/amap/AmapDraw.jsx

@@ -11,7 +11,7 @@ export const AmapDrawProps = {
      */
     drawType: PropTypes.string.def('point'),
     /** 绘制图标 （只在point类型下生效 */
-    drawIcon: PropTypes.any,
+    drawIcon: PropTypes.any.def('http://qxfa.tpddns.cn:8090/poi/poi-marker-default.png'),
     /** drawCount为绘制物绘制个数 */
     drawCount: PropTypes.number.def(1),
     /** drawOptions为绘制物配置项 */
@@ -45,7 +45,7 @@ const AmapDraw = {
         drawMouseTool: null, 
         buttonProps: [],
         drawButtonProps: [
-          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } },
+          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } }, 
           { text: '清除', event: { click: this.AmapDrawClear } }
         ],
         saveButtonProps: [
@@ -62,15 +62,16 @@ const AmapDraw = {
       set(newValue){
         this.$emit('getAMapLayersInfo', newValue)
       }
-    }
-  }, 
+    } 
+  },
   watch: {
-    // drawInfo: {
-    //   handler(newVal, oldVal) {
-    //     newVal && this.echoDrawLayers()
-    //   },
-    //   deep: true
-    // },
+    drawInfo: {
+      handler(newVal, oldVal) {
+        this.drawLayersInfo = newVal
+        newVal && this.echoDrawLayers(this.drawType) 
+      },
+      deep: true
+    }, 
     drawInfoAll(newValue) {
       newValue && this.echoDrawLayers()
     },
@@ -100,7 +101,6 @@ const AmapDraw = {
   methods: {
     /** 绘制 */
     AmapDraw() {
-      console.log('进入') 
         this.buttonProps = [].concat(this.saveButtonProps)
         this.drawMouseTool = new this.$amap.MouseTool(this.amap)
 
@@ -252,6 +252,9 @@ const AmapDraw = {
     echoDrawLayers(drawType) {
 
       const drawLayersItem = (drawItem, type, i=0) => {
+
+        if(!drawItem || !Object.keys(drawItem).length || !this.amap) return
+
         let layersItem = null
         const {longitude, latitude, range} = drawItem
         const setOptions = {
@@ -279,6 +282,7 @@ const AmapDraw = {
             new this.$amap.Polygon(options)
         }
         layersItem.setMap(this.amap)
+        this.amap.setFitView()
       }
       
       if(!this.isExhibition) {