web-component-gallery 2.0.33 → 2.0.35

package/lib/amap-draw/index.jsx

@@ -41,14 +41,6 @@ const AmapDraw = {
       drawLayers: null,
       drawMouseTool: null,
       buttonProps: [],
-      drawButtonProps: [
-        { type: 'primary', text: '绘制', event: { click: this.AmapDraw } },
-        { text: '清除', event: { click: this.AmapDrawClear } }
-      ],
-      saveButtonProps: [
-        { type: 'primary', text: '保存', event: { click: this.AmapDrawSave } },
-        { text: '取消', event: { click: this.AmapDrawReset } }
-      ],
       /** 地图类型 */
       amapType: 1,
       /** 卫星图 */
@@ -63,12 +55,24 @@ const AmapDraw = {
       set(newValue) {
         this.$emit('getAMapLayersInfo', newValue)
       }
+    },
+    // 优化后的按钮配置
+    optimizedButtonProps() {
+      return {
+        draw: [
+          { type: 'primary', text: '绘制', event: { click: this.handleDrawStart } },
+          { text: '清除', event: { click: this.handleDrawClear } }
+        ],
+        save: [
+          { type: 'primary', text: '保存', event: { click: this.handleDrawSave } },
+          { text: '取消', event: { click: this.handleDrawReset } }
+        ]
+      }
     }
   },
   watch: {
     drawInfo: {
-      handler(newVal, oldVal) {
-        const newValue = this.drawLayersInfo
+      handler(newVal) {
         newVal && this.echoDrawLayers(this.drawType)
       },
       deep: true
@@ -87,10 +91,8 @@ const AmapDraw = {
   async mounted() {
     this.amapStore = await getAMapInstance()
     this.amap = this.amapStore.initMap(this.drawEl)
-    this.amapSatellite = new this.amapStore.AMap.TileLayer.Satellite()
-    this.amap.add(this.amapSatellite)
-    // this.amapSatellite.hide()
-    this.buttonProps = [].concat(this.drawButtonProps)
+    this.initMap()
+    this.buttonProps = [...this.optimizedButtonProps.draw]
     this.echoDrawLayers(this.drawType)
     /** 如果有限制区域，则描绘在地图上 */
     this.drawLimitArea && this.setDrawLimitArea()
@@ -99,59 +101,115 @@ const AmapDraw = {
     this.AmapDrawClear()
   },
   methods: {
-    /** 绘制 */
-    AmapDraw() {
-      this.buttonProps = [].concat(this.saveButtonProps)
-      this.drawMouseTool = new this.amapStore.AMap.MouseTool(this.amap)
-
-      this.AmapDrawClear()
-      this.setDrawLayers(this.drawType)
-
+    /**
+    * 初始化地图实例
+    */
+    initMap() {
+      this.amap = this.amapStore.initMap(this.drawEl)
+      this.amapSatellite = new this.amapStore.AMap.TileLayer.Satellite()
+      this.amap.add(this.amapSatellite)
+    },
+    /**
+     * 开始绘制
+     */
+    handleDrawStart() {
+      this.buttonProps = [...this.optimizedButtonProps.save]
+      this.initDrawTool()
+      this.prepareDrawEnvironment()
+      
       this.drawMouseTool.on('draw', ({ obj }) => {
-        if (this.drawArea && !this[`is${this.drawType}InRing`](obj))
-          return this.amap.remove(obj), this.$message.error('未在范围内描绘！')
-        /** 暂未支持一次性绘制多个 */
-        this.drawCount > 1
-          ? ((this.drawLayers = this.drawLayers || []), this.drawLayers.push(obj))
-          : (this.drawLayers = obj)
-        if (this.drawLayers && (this.drawLayers.length == this.drawCount || this.drawCount == 1)) {
-          return this.drawMouseTool.close()
-        }
+        this.handleDrawComplete(obj)
       })
     },
-    /** 清空绘制 / 清空搜索 */
-    AmapDrawClear() {
-      this.amap.getAllOverlays().forEach(layerItem => layerItem.getExtData() != 'Area' && this.amap.remove(layerItem))
-      // this.amap.clearMap()
+
+    /**
+     * 处理绘制完成事件
+     */
+    handleDrawComplete(obj) {
+      if (this.drawArea && !this.checkInBoundary(obj)) {
+        this.amap.remove(obj)
+        this.$message.error('未在范围内描绘！')
+        return
+      }
+      
+      this.updateDrawLayers(obj)
+      
+      if (this.isDrawComplete()) {
+        this.drawMouseTool.close()
+      }
+    },
+
+    /**
+     * 检查绘制是否完成
+     */
+    isDrawComplete() {
+      return this.drawLayers && 
+        (this.drawLayers.length === this.drawCount || this.drawCount === 1)
+    },
+
+    /**
+     * 更新绘制图层
+     */
+    updateDrawLayers(obj) {
+      if (this.drawCount > 1) {
+        this.drawLayers = this.drawLayers || []
+        this.drawLayers.push(obj)
+      } else {
+        this.drawLayers = obj
+      }
+    },
+
+    /**
+     * 清除绘制
+     */
+    handleDrawClear() {
+      this.cleanOverlays()
       this.drawLayers = null
       this.drawLayersInfo = {}
     },
-    /** 保存当前绘制 */
-    AmapDrawSave() {
+
+    /**
+     * 保存绘制
+     */
+    handleDrawSave() {
       this.assignDrawLayers(this.drawType)
-      this.buttonProps = [].concat(this.drawButtonProps)
+      this.buttonProps = [...this.optimizedButtonProps.draw]
     },
-    /** 取消当前绘制 */
-    AmapDrawReset() {
-      this.buttonProps = [].concat(this.drawButtonProps)
-      this.AmapDrawClear()
+
+    /**
+     * 取消绘制
+     */
+    handleDrawReset() {
+      this.buttonProps = [...this.optimizedButtonProps.draw]
+      this.handleDrawClear()
     },
-    /** 搜索地址 */
+
+    /**
+     * 搜索地址选择
+     */
     searchChoose(searchMarker, searchInfo) {
-      this.AmapDrawClear()
+      this.handleDrawClear()
       searchMarker.setMap(this.amap)
       this.amap.setZoomAndCenter(15, searchMarker.getPosition())
-      this.drawType == 'point' && (this.drawLayersInfo = searchInfo)
-      // this.$emit('getAMapLayersInfo', this.drawLayersInfo)
+      this.drawType === 'point' && (this.drawLayersInfo = searchInfo)
     },
-    /** 检测覆盖物配置信息并同步 */
+
+    /**
+     * 设置覆盖物选项
+     */
     setOverlayOptions(options) {
       if (!this.drawLayers) return
-      this.drawCount > 1
-        ? this.drawLayers.forEach(drawItem => drawItem.setOptions(options))
-        : this.drawLayers.setOptions(options)
+      
+      if (this.drawCount > 1) {
+        this.drawLayers.forEach(drawItem => drawItem.setOptions(options))
+      } else {
+        this.drawLayers.setOptions(options)
+      }
     },
-    /** 绘制限定区域 */
+
+    /**
+     * 设置绘制限制区域
+     */
     setDrawLimitArea() {
       let areaRange = []
       try {
@@ -159,12 +217,15 @@ const AmapDraw = {
       } catch {
         areaRange = this.drawLimitArea
       }
+      
       this.drawArea && this.amap.remove(this.drawArea)
-      /** 判断目前地图上存在的所绘制覆盖物是否在限制范围内 */
       this.setMapArea(areaRange)
-      this.judgeOverlays()
+      this.validateOverlays()
     },
-    /** 绘制地图区域范围 */
+
+    /**
+     * 设置地图区域范围
+     */
     setMapArea(jurisdictionRange) {
       this.drawArea = new this.amapStore.AMap.Polygon({
         map: this.amap,
@@ -173,16 +234,42 @@ const AmapDraw = {
         strokeWeight: 6,
         ...this.drawLimitAreaOptions
       })
+      
       const { lng, lat } = this.drawArea.getBounds().getCenter()
       this.amap.setZoomAndCenter(15, [lng, lat])
     },
-    /** 判断一个线段是否在面内 */
-    islineInRing(polyline) {
+
+    /**
+     * 验证覆盖物是否在边界内
+     */
+    validateOverlays() {
+      this.amap.getAllOverlays().forEach(layerItem => {
+        if (layerItem.getExtData() !== 'Area' && !this.checkInBoundary(layerItem)) {
+          this.removeOverlay(layerItem)
+        }
+      })
+    },
+
+    /**
+     * 检查是否在边界内
+     */
+    checkInBoundary(obj) {
+      const type = this.drawType
+      return type === 'line' ? this.isLineInBoundary(obj) : this.isPointInBoundary(obj)
+    },
+
+    /**
+     * 检查线段是否在边界内
+     */
+    isLineInBoundary(polyline) {
       const paths = polyline.getPath()
-      return paths.every(pointItem => this.ispointInRing(pointItem))
+      return paths.every(pointItem => this.isPointInBoundary(pointItem))
     },
-    /** 判断一个点是否在面内 */
-    ispointInRing(point) {
+
+    /**
+     * 检查点是否在边界内
+     */
+    isPointInBoundary(point) {
       let position
       try {
         position = point.getPosition()
@@ -191,144 +278,232 @@ const AmapDraw = {
       }
       return this.amapStore.AMap.GeometryUtil.isPointInRing(position, this.drawArea.getPath())
     },
-    /** 判断地图上所覆盖物是否在限制范围内 */
-    judgeOverlays() {
-      this.amap
-        .getAllOverlays()
-        .forEach(
-          layerItem =>
-            layerItem.getExtData() != 'Area' &&
-            !this[`is${this.drawType}InRing`](layerItem) &&
-            this.removeOverlay(layerItem)
-        )
-    },
-    /** 清除单个覆盖物（或 不符合区域范围的覆盖物 */
+
+    /**
+     * 移除覆盖物
+     */
     removeOverlay(layerItem) {
       this.amap.remove(layerItem)
-      this.$message.error('未在区域范围内,请重新描绘！')
+      this.$message.error('未在区域范围内，请重新描绘！')
+      
       try {
-        const i = this.drawLayers.findIndex(layer => layer.getExtData() == layerItem.getExtData())
-        this.drawLayers.splice(i, 1)
-      } catch {
-        this.drawLayers = null
-        this.drawLayersInfo = {}
+        if (Array.isArray(this.drawLayers)) {
+          const index = this.drawLayers.findIndex(layer => layer.getExtData() === layerItem.getExtData())
+          if (index !== -1) {
+            this.drawLayers.splice(index, 1)
+          }
+        } else {
+          this.drawLayers = null
+          this.drawLayersInfo = {}
+        }
+      } catch (error) {
+        console.error('移除覆盖物出错:', error)
       }
     },
-    /** 根据类型处理不同数据 */
-    async setDrawLayers(drawType) {
-      const type = {
+
+    /**
+     * 初始化绘制工具
+     */
+    initDrawTool() {
+      this.drawMouseTool = new this.amapStore.AMap.MouseTool(this.amap)
+      this.handleDrawClear()
+      this.prepareDrawLayers(this.drawType)
+    },
+
+    /**
+     * 准备绘制环境
+     */
+    prepareDrawEnvironment() {
+      this.drawMouseTool.on('draw', ({ obj }) => {
+        this.handleDrawComplete(obj)
+      })
+    },
+
+    /**
+     * 准备绘制图层
+     */
+    async prepareDrawLayers(drawType) {
+      const typeMap = {
         point: 'marker',
         line: 'polyline',
         polygon: 'polygon'
       }
-
-      /** 图层基础配置 */
-      const drawOptions =
-        drawType == 'point'
-          ? {
-              anchor: 'bottom-center',
-              icon: await this.amapStore.setIcon(this.drawIcon)
-            }
-          : { strokeWeight: 8 }
-
-      this.drawMouseTool[type[drawType]]({
-        ...drawOptions,
+      
+      const baseOptions = drawType === 'point'
+        ? {
+            anchor: 'bottom-center',
+            icon: await this.amapStore.setIcon(this.drawIcon)
+          }
+        : { strokeWeight: 8 }
+      
+      this.drawMouseTool[typeMap[drawType]]({
+        ...baseOptions,
         ...this.drawOptions
       })
     },
-    /** 赋值不同图层数据 */
+
+    /**
+     * 分配图层数据
+     */
     assignDrawLayers(drawType) {
-      if (drawType == 'point') {
-        const { lng, lat } = this.drawLayers.getPosition()
-        const position = { longitude: lng, latitude: lat }
-        this.amapStore.getMapAddress(position, address => {
-          this.drawLayersInfo = {
-            ...position,
-            ...address
-          }
-        })
+      if (drawType === 'point') {
+        this.handlePointDraw()
         return
       }
+      this.handleShapeDraw()
+    },
+
+    /**
+     * 处理点绘制
+     */
+    handlePointDraw() {
+      const { lng, lat } = this.drawLayers.getPosition()
+      const position = { longitude: lng, latitude: lat }
+      
+      this.amapStore.getMapAddress(position, address => {
+        this.drawLayersInfo = {
+          ...position,
+          ...address
+        }
+      })
+    },
+
+    /**
+     * 处理形状绘制
+     */
+    handleShapeDraw() {
       const range = this.drawLayers.getPath().map(({ lng, lat }) => [lng, lat])
       this.drawLayersInfo = { range }
     },
-    /** 回显不同类型图层 */
+
+    /**
+     * 回显绘制图层
+     */
     echoDrawLayers(drawType) {
-      /** 如若没挂载layers属性则退出 */
       if (!this.amapStore || !this.amap) return
+      
+      this.cleanOverlays()
+      
+      if (this.drawInfoAll) {
+        this.renderAllDrawLayers()
+        return
+      }
+      
+      this.renderSingleDrawLayer(drawType)
+    },
 
-      const drawLayersItem = async (drawItem, type, i = 0) => {
-        let layersItem = null
-        const { longitude, latitude, range } = drawItem
-        if ((longitude && latitude) || range) {
-          const setOptions = {
-            extData: `draw${type}${i}`,
-            ...this.drawOptions
-          }
-
-          if (type == 'point') {
-            layersItem = await this.amapStore.setMarker(this.drawIcon, {
-              position: [longitude, latitude],
-              ...setOptions
-            })
-          } else {
-            const options = {
-              path: range,
-              strokeWeight: 8,
-              ...setOptions
-            }
-            layersItem =
-              type == 'line' ? new this.amapStore.AMap.Polyline(options) : new this.amapStore.AMap.Polygon(options)
-          }
+    /**
+     * 清理覆盖物
+     */
+    cleanOverlays() {
+      this.amap.getAllOverlays().forEach(layerItem => {
+        if (layerItem.getExtData() !== 'Area') {
+          this.amap.remove(layerItem)
+        }
+      })
+    },
 
-          layersItem.setMap(this.amap)
-          this.amap.setFitView()
+    /**
+     * 渲染所有绘制图层
+     */
+    renderAllDrawLayers() {
+      for (const key in this.drawInfoAll) {
+        const isArray = Array.isArray(this.drawInfoAll[key])
+        
+        if (isArray) {
+          this.drawInfoAll[key].forEach((drawItem, i) => {
+            this.renderDrawLayer(drawItem, key, i)
+          })
+        } else {
+          this.renderDrawLayer(this.drawInfoAll[key], key)
         }
       }
+    },
 
-      if (!this.isExhibition) {
-        drawLayersItem(this.drawLayersInfo, drawType)
-        return
-      }
+    /**
+     * 渲染单个绘制图层
+     */
+    renderSingleDrawLayer(drawType) {
+      this.renderDrawLayer(this.drawLayersInfo, drawType)
+    },
 
-      if (this.drawInfoAll) {
-        for (let key in this.drawInfoAll) {
-          const isArray = Array.isArray(this.drawInfoAll[key])
-          isArray
-            ? this.drawInfoAll[key].forEach((drawItem, i) => {
-                drawLayersItem(drawItem, key, i)
-              })
-            : drawLayersItem(this.drawInfoAll[key], key)
+    /**
+     * 渲染绘制图层
+     */
+    async renderDrawLayer(drawItem, type, index = 0) {
+      if (!drawItem) return
+      
+      const { longitude, latitude, range } = drawItem
+      if (!((longitude && latitude) || range)) return
+      
+      const setOptions = {
+        extData: `draw${type}${index}`,
+        ...this.drawOptions
+      }
+      
+      let layersItem = null
+      
+      if (type === 'point') {
+        layersItem = await this.amapStore.setMarker(this.drawIcon, {
+          position: [longitude, latitude],
+          ...setOptions
+        })
+      } else {
+        const options = {
+          path: range,
+          strokeWeight: 8,
+          ...setOptions
         }
-        return
+        
+        layersItem = type === 'line'
+          ? new this.amapStore.AMap.Polyline(options)
+          : new this.amapStore.AMap.Polygon(options)
       }
-
-      drawLayersItem(this.drawLayersInfo, drawType)
+      
+      layersItem.setMap(this.amap)
+      this.amap.setFitView()
     },
-    /** 切换地图类型 */
+
+    /**
+     * 切换地图类型
+     */
     onLayersSwitch(key) {
       this.amapType = key
-      this.amapType ?
-      this.amapSatellite.show() :
-      this.amapSatellite.hide()
+      this.amapType ? this.amapSatellite.show() : this.amapSatellite.hide()
+    },
+
+    /**
+     * 清理资源
+     */
+    cleanupResources() {
+      this.handleDrawClear()
+      this.drawMouseTool && this.drawMouseTool.close()
     }
   },
   render(h) {
     const amapLayers = ['电子', '卫星']
-    const { drawEl, drawIcon, amapType, buttonProps, isExhibition, AmapDrawClear, searchChoose, onLayersSwitch } = this
+    const { drawEl, drawIcon, amapType, buttonProps, isExhibition } = this
 
     return (
       <div class="AmapDraw">
         {!isExhibition && (
-          <AmapSearch {...{ props: { drawIcon, buttonProps }, on: { searchReset: AmapDrawClear, searchChoose } }} />
+          <AmapSearch 
+            {...{ 
+              props: { drawIcon, buttonProps }, 
+              on: { 
+                searchReset: this.handleDrawClear, 
+                searchChoose: this.searchChoose 
+              } 
+            }} 
+          />
         )}
         <div id={drawEl} />
         <div class="AmapDraw__Layers">
           {amapLayers.map((layer, i) => (
             <span 
-              key={i}
-              class={i === amapType && 'LayersActive'}
-              onClick={() => onLayersSwitch(i)}
+              key={i} 
+              class={i === amapType && 'LayersActive'} 
+              onClick={() => this.onLayersSwitch(i)}
             >
               {layer}
             </span>

package/lib/browse/index.jsx

@@ -7,7 +7,7 @@ const BrowseProps = {
   /** 支持http地址可配置 */
   httpsUrl: PropTypes.object.def({}),
   /** 限制高度 */
-  astrictH: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 
+  astrictH: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 }
 
 // 文件类型常量
@@ -60,9 +60,7 @@ function renderContent(h, url, images) {
 
     const attrs = {
       src: url,
-      style: astrictH 
-        ? `width: auto; height: ${astrictH}px; objectFit: contain;`
-        : 'width: 100%; height: 100%;'
+      ...(astrictH && { style: `width: auto; height: ${astrictH}px; objectFit: contain;` })
     }
 
     if (CustomTag === 'iframe') attrs['controls'] = true
@@ -99,7 +97,7 @@ const Browse = {
             renderContent.call(this, h, dataItem.url, innerData)
           )
         }
-      </div> 
+      </div>
     )
   }
 }

package/lib/browse/style/index.less

@@ -1,4 +1,4 @@
-.Browse, iframe {
+iframe {
     width: 100%;
     height: 100%;
 }