web-component-gallery 0.1.76 → 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  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  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为绘制物配置项 */
@@ -33,15 +33,19 @@ export const AmapDrawProps = {
 const AmapDraw = {
   name: 'AmapDraw',
   props: AmapDrawProps,
+  model: {
+    prop: 'drawInfo',
+    event: 'getAMapLayersInfo'
+  },
   data () {
     return {
         amap: null, 
         drawArea: null, 
         drawLayers: null,
-        drawMouseTool: null,
+        drawMouseTool: null, 
         buttonProps: [],
         drawButtonProps: [
-          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } },
+          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } }, 
           { text: '清除', event: { click: this.AmapDrawClear } }
         ],
         saveButtonProps: [
@@ -58,15 +62,16 @@ const AmapDraw = {
       set(newValue){
         this.$emit('getAMapLayersInfo', newValue)
       }
-    }
-  }, 
+    } 
+  },
   watch: {
     drawInfo: {
       handler(newVal, oldVal) {
-        newVal && this.echoDrawLayers()
+        this.drawLayersInfo = newVal
+        newVal && this.echoDrawLayers(this.drawType) 
       },
       deep: true
-    },
+    }, 
     drawInfoAll(newValue) {
       newValue && this.echoDrawLayers()
     },
@@ -96,7 +101,6 @@ const AmapDraw = {
   methods: {
     /** 绘制 */
     AmapDraw() {
-      console.log('进入') 
         this.buttonProps = [].concat(this.saveButtonProps)
         this.drawMouseTool = new this.$amap.MouseTool(this.amap)
 
@@ -248,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 = {
@@ -275,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.76",
+  "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为绘制物配置项 */
@@ -33,15 +33,19 @@ export const AmapDrawProps = {
 const AmapDraw = {
   name: 'AmapDraw',
   props: AmapDrawProps,
+  model: {
+    prop: 'drawInfo',
+    event: 'getAMapLayersInfo'
+  },
   data () {
     return {
         amap: null, 
         drawArea: null, 
         drawLayers: null,
-        drawMouseTool: null,
+        drawMouseTool: null, 
         buttonProps: [],
         drawButtonProps: [
-          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } },
+          { type: 'primary', text: '绘制', event: { click: this.AmapDraw } }, 
           { text: '清除', event: { click: this.AmapDrawClear } }
         ],
         saveButtonProps: [
@@ -58,15 +62,16 @@ const AmapDraw = {
       set(newValue){
         this.$emit('getAMapLayersInfo', newValue)
       }
-    }
-  }, 
+    } 
+  },
   watch: {
     drawInfo: {
       handler(newVal, oldVal) {
-        newVal && this.echoDrawLayers()
+        this.drawLayersInfo = newVal
+        newVal && this.echoDrawLayers(this.drawType) 
       },
       deep: true
-    },
+    }, 
     drawInfoAll(newValue) {
       newValue && this.echoDrawLayers()
     },
@@ -96,7 +101,6 @@ const AmapDraw = {
   methods: {
     /** 绘制 */
     AmapDraw() {
-      console.log('进入') 
         this.buttonProps = [].concat(this.saveButtonProps)
         this.drawMouseTool = new this.$amap.MouseTool(this.amap)
 
@@ -248,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 = {
@@ -275,6 +282,7 @@ const AmapDraw = {
             new this.$amap.Polygon(options)
         }
         layersItem.setMap(this.amap)
+        this.amap.setFitView()
       }
       
       if(!this.isExhibition) {

package/plugins/method/AMap.js

@@ -73,35 +73,44 @@ export default {
     function setIcon(IconUrl) {
       let image = new Image()
       image.src = IconUrl
-      function setImageSize(image) {
-        /** 解决图片过大还处于加载中出现的第一次获取宽高为0的情况 */
-        if(image.width == 0) return setTimeout(() =>setImageSize(image), 600)
-        return new AMap.Size( image.width, image.height )
-      } 
-      const size = setImageSize(image)
-      return new AMap.Icon({
-        size,
+      const icon = new AMap.Icon({
         image: IconUrl,
-        imageSize: size,
-        imageOffset: new AMap.Pixel( 0, image.height / 2 )
+        imageOffset: new AMap.Pixel( 0, 0 )
       })
-      // const size = new AMap.Size( image.width, image.height )
-      // return new AMap.Icon({
-      //   size,
-      //   image: IconUrl,
-      //   imageSize: size,
-      //   imageOffset: new AMap.Pixel( 0,0 )
-      // })
+      image.onload = function() {
+        const setIconSize = () => {
+          const getSize = new AMap.Size( image.width, image.height )
+          icon.setSize(getSize)
+          icon.setImageSize(getSize)
+        }
+        if(image.width == 0) {
+          const timer = setTimeout( () => {
+            setIconSize()
+            clearTimeout(timer)
+          }, 60 )
+          return
+        }
+        setIconSize()
+      }
+      return icon
     }
 
     /** 地图标点 */
     function setMarker(IconUrl, MarkerOptions) {
-      return new AMap.Marker({
-        icon: setIcon(IconUrl),
-        offset: new AMap.Pixel(0, 0),
+      const icon = setIcon(IconUrl)
+      const marker = new AMap.Marker({
+        visible: false,
         anchor: 'bottom-center',
         ...MarkerOptions
       })
+      const timer = setTimeout( () => {
+        const iconOffset = icon.getImageSize()
+        marker.setIcon(icon)
+        // marker.setOffset(new AMap.Pixel(iconOffset[0]/2, iconOffset[1]/2)) 
+        marker.show()
+        clearTimeout(timer)
+      }, 100 ) 
+      return marker
     }
 
     /** 地图绘制区域 */
@@ -194,7 +203,7 @@ export default {
      * { paths: 需查询的路径起始点及途径点集合, options: 为查询路线配置项 }
      * @param {*} callback 查询成功后回调函数
      */
-    function setMapDriving(AMapInit, roadOptions, callback) { 
+    function setMapDriving(AMapInit, roadOptions, callback) {
       const { paths, options = {} } = roadOptions
       AMapInit.plugin("AMap.Driving", () => {  
           let roadDriving = new AMap.Driving({ map: AMapInit, ...(roadOptions.options??{}) })