web-component-gallery 2.2.20 → 2.2.21

package/lib/amap-draw/index.jsx

@@ -1,213 +1,203 @@
+
 import AmapSearch from '../amap-comp/AmapSearch.jsx'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { getAMapInstance } from '../../extensions/AMap.js'
 
 const BASE_IP = process.env.VUE_APP_STATIC_URL || location.origin
 
-export const AmapDrawProps = { 
-  /** drawEl为地图容器实例名称 */
+// 统一配置管理
+const CONFIG = {
+  drawTypes: {
+    point: 'marker',
+    line: 'polyline', 
+    polygon: 'polygon'
+  },
+  layers: ['电子', '卫星']
+}
+
+export const AmapDrawProps = {
+  // 地图容器实例名称
   drawEl: PropTypes.string.def('AmapDraw'),
-  /** drawType为绘制类型
-   *  可选值（point点 | line线 | polygon面）
-   */
+  // 绘制类型
   drawType: PropTypes.string.def('point'),
-  /** 绘制图标 （只在point类型下生效 */
+  // 绘制图标
   drawIcon: PropTypes.any.def(`${BASE_IP}/poi/poi-marker-default.png`),
-  /** drawCount为绘制物绘制个数 */
+  // 绘制个数
   drawCount: PropTypes.number.def(1),
-  /** drawOptions为绘制物配置项 */
+  // 绘制物配置项
   drawOptions: PropTypes.object.def({}),
-  /** drawInfo为绘制物信息 */
-  drawInfo: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), 
-  /** drawInfoAll为所有不同类型绘制物信息(用于回显地图图层)
-   *  格式: { point: ([]||{}), line: ([]||{}) }
-   */
+  // 绘制物信息
+  drawInfo: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  // 所有不同类型绘制物信息 格式: { point: ([]||{}), line: ([]||{}) }
   drawInfoAll: PropTypes.object,
-  /** 限制区域 */
+  // 限制区域
   drawLimitArea: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** 限制区域样式配置 */
+  // 限制区域样式配置
   drawLimitAreaOptions: PropTypes.object.def({}),
-  /** 是否为纯地图展示数据 */
+  // 纯地图展示数据
   isExhibition: PropTypes.bool.def(false),
-  /** 绘制操作自定义 */
-  drawButtonOperate: PropTypes.object
+  // 自定义绘制操作
+  drawButtonOperate: PropTypes.array
 }
 
-const AmapDraw = {
+export default {
   name: 'AmapDraw',
   props: AmapDrawProps,
+  
   data() {
     return {
+      // 地图实例
       amap: null,
-      /** 地图存储商店 */
+      // 地图存储商店
       amapStore: null,
       drawArea: null,
       drawLayers: null,
       drawMouseTool: null,
-      buttonProps: [],
-      /** 地图类型 */
+      drawOperates: [
+        { type: 'primary', text: '绘制', event: { click: this.handleDrawStart } },
+        { text: '清除', event: { click: this.handleDrawClear } },
+        { type: 'primary', text: '保存', event: { click: this.handleDrawSave } },
+        { text: '取消', event: { click: this.handleDrawReset } }
+      ],
+      // 地图类型
       amapType: 1,
-      /** 卫星图 */
-      amapSatellite: null
+      // 卫星图
+      amapSatellite: null,
+      //记录当前活跃操作的下标，-1表示无活跃操作
+      activeOperateIndex: -1
     }
   },
+
   computed: {
     drawLayersInfo: {
-      get() {
-        return this.drawInfo
-      },
-      set(newValue) {
+      get() { return this.drawInfo },
+      set(newValue) { 
         this.$emit('getAMapLayersInfo', this.initDrawInfo(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 } }
-        ],
-        ...(this.drawButtonOperate || {})
-      }
     }
   },
+
   watch: {
     drawInfo: {
-      handler(newVal) {
-        newVal && this.echoDrawLayers(this.drawType)
-      },
+      handler(newVal) { newVal && this.echoDrawLayers(this.drawType) },
       deep: true
     },
-    drawInfoAll(newValue) {
-      newValue && this.echoDrawLayers()
-    },
-    drawOptions(newValue) {
-      /** 检测options覆盖物配置是否更改，更改后要同步到地图上 */
-      Object.keys(newValue).length && this.setOverlayOptions(newValue)
-    },
-    drawLimitArea(newValue) {
-      newValue && this.setDrawLimitArea()
-    }
+    drawInfoAll(newValue) { newValue && this.echoDrawLayers() },
+    // 检测options覆盖物配置是否更改，更改后要同步到地图上
+    drawOptions(newValue) { Object.keys(newValue).length && this.setOverlayOptions(newValue) },
+    drawLimitArea(newValue) { newValue && this.setDrawLimitArea() }
   },
+
   async mounted() {
     this.amapStore = await getAMapInstance()
     this.amap = this.amapStore.initMap(this.drawEl)
     this.initMap()
-    this.buttonProps = [...this.optimizedButtonProps.draw]
+    
+    if (this.drawButtonOperate?.length) {
+      this.drawOperates = this.drawButtonOperate.concat(this.drawOperates.slice(2))
+    }
+    
     this.echoDrawLayers(this.drawType)
-    /** 如果有限制区域，则描绘在地图上 */
+    // 如有限制区域，则描绘在地图上
     this.drawLimitArea && this.setDrawLimitArea()
   },
+
   destroyed() {
-    this.handleDrawClear()
+    this.cleanupResources()
   },
+
   methods: {
-    /**
-    * 初始化地图实例
-    */
+    // 初始化地图实例
     initMap() {
       this.amap = this.amapStore.initMap(this.drawEl)
       this.amapSatellite = new this.amapStore.AMap.TileLayer.Satellite()
       this.amap.add(this.amapSatellite)
     },
-    /**
-     * 根据绘制类型初始化绘制属性
-     */
-    initDrawInfo(newVal) {
-      if (Object.keys(newVal).length) return newVal
-      
-      if (this.drawType === 'point') 
-        return {
-          longitude: null,
-          latitude: null,
-          address: null
-        }
 
-      return { range: null }
+    // 根据绘制类型初始化绘制属性
+    initDrawInfo(newValue) {
+      return Object.keys(newValue).length ? newValue : 
+        this.drawType === 'point' ? 
+          { longitude: null, latitude: null, address: null } : 
+          { range: null }
     },
-    /**
-     * 开始绘制
-     */
-    handleDrawStart() {
-      this.buttonProps = [...this.optimizedButtonProps.save]
+
+    // 开始绘制
+    handleDrawStart(i = 0) {
+      if (this.activeOperateIndex === i) return this.$message.warning('已处于绘制模式！')
+      // 如果存在其他活跃操作项，先关闭并重置状态
+      if (this.activeOperateIndex !== -1 && this.activeOperateIndex !== i) {
+        this.drawMouseTool.close()
+        this.updateDrawOperateState('primary')
+      } 
+
+      this.activeOperateIndex = i
+      this.updateDrawOperateState('danger')
       this.initDrawTool()
-      this.prepareDrawEnvironment()
-      
-      this.drawMouseTool.on('draw', ({ obj }) => {
-        this.handleDrawComplete(obj)
-      })
     },
 
-    /**
-     * 处理绘制完成事件
-     */
-    handleDrawComplete(obj) {
-      if (this.drawArea && !this.checkInBoundary(obj)) {
-        this.amap.remove(obj)
-        this.$message.error('未在范围内描绘！')
-        return
-      }
-      
-      this.updateDrawLayers(obj)
+    // 处理绘制完成事件
+    handleDrawComplete(drawObject) {
+      if (this.isOutOfBoundary(drawObject)) return
+
+      this.updateDrawLayers(drawObject)
+
+      if (this.isDrawComplete()) this.finishDrawing()
+    },
+
+    isOutOfBoundary(obj) {
+      if (!this.drawArea || this.checkInBoundary(obj)) return false
       
-      if (this.isDrawComplete()) {
-        this.drawMouseTool.close()
-      }
+      this.amap.remove(obj)
+      this.$message.error('未在范围内描绘！')
+      return true
     },
 
-    /**
-     * 检查绘制是否完成
-     */
+    // 检查绘制是否完成
     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
-      }
+    // 结束绘制
+    finishDrawing() {
+      this.drawMouseTool.close()
+      this.updateDrawOperateState('primary')
+      this.activeOperateIndex = -1
+      this.$message.success('绘制结束！')
     },
 
-    /**
-     * 清除绘制
-     */
+    // 更新绘制物
+    updateDrawLayers(drawObject) {
+      this.drawLayers = this.drawCount > 1 ? 
+        (this.drawLayers || []).concat(drawObject) : 
+        drawObject
+
+      // 实时保存绘制
+      this.assignDrawLayers(this.drawType)
+    },
+
+    // 清除绘制
     handleDrawClear() {
       this.cleanOverlays()
       this.drawLayers = null
       this.drawLayersInfo = {}
     },
 
-    /**
-     * 保存绘制
-     */
+    // 保存绘制
     handleDrawSave() {
-      if (!this.drawLayers) return this.$message.error('请先在地图上绘制！')
+      if (!this.drawLayers) {
+        return this.$message.error('请先在地图上绘制！')
+      }
       this.assignDrawLayers(this.drawType)
-      this.buttonProps = [...this.optimizedButtonProps.draw]
     },
 
-    /**
-     * 取消绘制
-     */
+    // 取消绘制
     handleDrawReset() {
-      this.buttonProps = [...this.optimizedButtonProps.draw]
       this.handleDrawClear()
     },
 
-    /**
-     * 搜索地址选择
-     */
+    // 搜索地址选择
     searchChoose(searchMarker, searchInfo) {
       this.handleDrawClear()
       searchMarker.setMap(this.amap)
@@ -215,22 +205,15 @@ const AmapDraw = {
       this.drawType === 'point' && (this.drawLayersInfo = searchInfo)
     },
 
-    /**
-     * 设置覆盖物选项
-     */
+    // 设置覆盖物参数
     setOverlayOptions(options) {
       if (!this.drawLayers) return
       
-      if (this.drawCount > 1) {
-        this.drawLayers.forEach(drawItem => drawItem.setOptions(options))
-      } else {
-        this.drawLayers.setOptions(options)
-      }
+      const layers = Array.isArray(this.drawLayers) ? this.drawLayers : [this.drawLayers]
+      layers.forEach(item => item.setOptions(options))
     },
 
-    /**
-     * 设置绘制限制区域
-     */
+    // 设置绘制限制区域
     setDrawLimitArea() {
       let areaRange = []
       try {
@@ -244,9 +227,7 @@ const AmapDraw = {
       this.validateOverlays()
     },
 
-    /**
-     * 设置地图区域范围
-     */
+    // 设置地图区域范围
     setMapArea(jurisdictionRange) {
       this.drawArea = new this.amapStore.AMap.Polygon({
         map: this.amap,
@@ -260,36 +241,30 @@ const AmapDraw = {
       this.amap.setZoomAndCenter(15, [lng, lat])
     },
 
-    /**
-     * 验证覆盖物是否在边界内
-     */
+    // 验证覆盖物是否在边界内
     validateOverlays() {
-      this.amap.getAllOverlays().forEach(layerItem => {
-        if (layerItem.getExtData() !== 'Area' && !this.checkInBoundary(layerItem)) {
-          this.removeOverlay(layerItem)
+      this.amap.getAllOverlays().forEach(layer => {
+        if (layer.getExtData() !== 'Area' && !this.checkInBoundary(layer)) {
+          this.removeOverlay(layer)
         }
       })
     },
 
-    /**
-     * 检查是否在边界内
-     */
-    checkInBoundary(obj) {
+    // 检查是否在边界内
+    checkInBoundary(object) {
       const type = this.drawType
-      return type === 'line' ? this.isLineInBoundary(obj) : this.isPointInBoundary(obj)
+      return type === 'line' ? 
+        this.isLineInBoundary(object) : 
+        this.isPointInBoundary(object)
     },
 
-    /**
-     * 检查线段是否在边界内
-     */
+    // 检查线段是否在边界内
     isLineInBoundary(polyline) {
       const paths = polyline.getPath()
-      return paths.every(pointItem => this.isPointInBoundary(pointItem))
+      return paths.every(point => this.isPointInBoundary(point))
     },
 
-    /**
-     * 检查点是否在边界内
-     */
+    // 检查点是否在边界内
     isPointInBoundary(point) {
       let position
       try {
@@ -297,19 +272,22 @@ const AmapDraw = {
       } catch {
         position = point
       }
-      return this.amapStore.AMap.GeometryUtil.isPointInRing(position, this.drawArea.getPath())
+      return this.amapStore.AMap.GeometryUtil.isPointInRing(
+          position, 
+          this.drawArea.getPath()
+        )
     },
 
-    /**
-     * 移除覆盖物
-     */
+    // 移除覆盖物
     removeOverlay(layerItem) {
       this.amap.remove(layerItem)
-      this.$message.error('未在区域范围内，请重新描绘！') 
+      this.$message.error('未在区域范围内，请重新描绘！')
       
       try {
         if (Array.isArray(this.drawLayers)) {
-          const index = this.drawLayers.findIndex(layer => layer.getExtData() === layerItem.getExtData())
+          const index = this.drawLayers.findIndex(
+            layer => layer.getExtData() === layerItem.getExtData()
+          )
           if (index !== -1) {
             this.drawLayers.splice(index, 1)
           }
@@ -322,61 +300,39 @@ const AmapDraw = {
       }
     },
 
-    /**
-     * 初始化绘制工具
-     */
+    // 初始化绘制工具
     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 baseOptions = drawType === 'point'
-        ? {
+      const baseOptions = drawType === 'point' ? {
             anchor: 'bottom-center',
             icon: await this.amapStore.setIcon(this.drawIcon)
-          }
-        : { strokeWeight: 8 }
+          } : { strokeWeight: 8 }
+
+      console.log(drawType, '--drawType绘制类型')
       
-      this.drawMouseTool[typeMap[drawType]]({
+      this.drawMouseTool[CONFIG.drawTypes[drawType]]({
         ...baseOptions,
         ...this.drawOptions
       })
     },
 
-    /**
-     * 分配图层数据
-     */
+    // 分配图层数据
     assignDrawLayers(drawType) {
-      if (drawType === 'point') {
-        this.handlePointDraw()
-        return
-      }
-      this.handleShapeDraw()
+      drawType === 'point' ? this.handlePointDraw() : this.handleShapeDraw()
     },
 
-    /**
-     * 处理点绘制
-     */
+    // 处理点绘制
     handlePointDraw() {
       const { lng, lat } = this.drawLayers.getPosition()
       const position = { longitude: lng, latitude: lat }
@@ -389,51 +345,40 @@ const AmapDraw = {
       })
     },
 
-    /**
-     * 处理形状绘制
-     */
+    // 处理形状绘制
     handleShapeDraw() {
       const range = this.drawLayers.getPath().map(({ lng, lat }) => [lng, lat])
       this.drawLayersInfo = { range }
     },
 
-    /**
-     * 回显绘制图层
-     */
+    // 回显绘制图层
     echoDrawLayers(drawType) {
       if (!this.amapStore || !this.amap) return
       
       this.cleanOverlays()
       
-      if (this.drawInfoAll) {
-        this.renderAllDrawLayers()
-        return
-      }
-      
-      this.renderSingleDrawLayer(drawType)
+      this.drawInfoAll ? 
+        this.renderAllDrawLayers() : 
+        this.renderSingleDrawLayer(drawType)
     },
 
-    /**
-     * 清理覆盖物
-     */
+    // 清理覆盖物
     cleanOverlays() {
-      this.amap.getAllOverlays().forEach(layerItem => {
-        if (layerItem.getExtData() !== 'Area') {
-          this.amap.remove(layerItem)
+      this.amap.getAllOverlays().forEach(layer => {
+        if (layer.getExtData() !== 'Area') {
+          this.amap.remove(layer)
         }
       })
     },
 
-    /**
-     * 渲染所有绘制图层
-     */
+    // 渲染所有绘制图层
     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)
+          this.drawInfoAll[key].forEach((item, index) => {
+            this.renderDrawLayer(item, key, index)
           })
         } else {
           this.renderDrawLayer(this.drawInfoAll[key], key)
@@ -441,16 +386,12 @@ const AmapDraw = {
       }
     },
 
-    /**
-     * 渲染单个绘制图层
-     */
+    // 渲染单个绘制图层
     renderSingleDrawLayer(drawType) {
       this.renderDrawLayer(this.drawLayersInfo, drawType)
     },
 
-    /**
-     * 渲染绘制图层
-     */
+    // 渲染绘制图层
     async renderDrawLayer(drawItem, type, index = 0) {
       if (!drawItem) return
       
@@ -462,10 +403,10 @@ const AmapDraw = {
         ...this.drawOptions
       }
       
-      let layersItem = null
+      let layerItem = null
       
       if (type === 'point') {
-        layersItem = await this.amapStore.setMarker(this.drawIcon, {
+        layerItem = await this.amapStore.setMarker(this.drawIcon, {
           position: [longitude, latitude],
           ...setOptions
         })
@@ -477,34 +418,43 @@ const AmapDraw = {
           ...baseOptions
         }
         
-        layersItem = type === 'line'
-          ? new this.amapStore.AMap.Polyline(options)
-          : new this.amapStore.AMap.Polygon(options)
+        layerItem = type === 'line' ?
+          new this.amapStore.AMap.Polyline(options) :
+          new this.amapStore.AMap.Polygon(options)
       }
       
-      layersItem.setMap(this.amap)
-      this.amap.setFitView()
+      layerItem.setMap(this.amap)
     },
 
-    /**
-     * 切换地图类型
-     */
+    // 切换地图类型
     onLayersSwitch(key) {
       this.amapType = key
       this.amapType ? this.amapSatellite.show() : this.amapSatellite.hide()
     },
 
-    /**
-     * 清理资源
-     */
+    // 更改操作状态
+    updateDrawOperateState(type) {
+      // 创建新的操作数组副本
+      const newOperates = [...this.drawOperates]
+      
+      // 更新指定索引的操作项类型
+      newOperates[this.activeOperateIndex] = {
+        ...newOperates[this.activeOperateIndex],
+        type
+      }
+      
+      this.drawOperates = newOperates
+    },
+
+    // 清理资源
     cleanupResources() {
       this.handleDrawClear()
       this.drawMouseTool && this.drawMouseTool.close()
     }
   },
+
   render(h) {
-    const amapLayers = ['电子', '卫星']
-    const { drawEl, drawIcon, amapType, buttonProps, isExhibition } = this
+    const { drawEl, drawIcon, amapType, drawOperates: buttonProps, isExhibition } = this
 
     return (
       <div class="AmapDraw">
@@ -521,11 +471,11 @@ const AmapDraw = {
         )}
         <div id={drawEl} />
         <div class="AmapDraw__Layers">
-          {amapLayers.map((layer, i) => (
+          {CONFIG.layers.map((layer, index) => (
             <span 
-              key={i} 
-              class={i === amapType && 'LayersActive'} 
-              onClick={() => this.onLayersSwitch(i)}
+              key={index} 
+              class={index === amapType && 'LayersActive'} 
+              onClick={() => this.onLayersSwitch(index)}
             >
               {layer}
             </span>
@@ -535,9 +485,3 @@ const AmapDraw = {
     )
   }
 }
-
-AmapDraw.install = function (Vue) {
-  Vue.component('AmapDraw', AmapDraw)
-}
-
-export default AmapDraw