web-component-gallery 2.2.18 → 2.2.19

package/extensions/Dialog.js

@@ -1,4 +1,5 @@
-import Modal from 'ant-design-vue/es/modal'
+import { Modal } from '../lib'
+
 export default (Vue) => {
   function dialog (component, componentProps, modalProps) {
     const _vm = this
@@ -101,7 +102,7 @@ export default (Vue) => {
         return h(Modal, ModalProps, [h(component, ComponentProps)])
       }
     }).$mount(dialogDiv)
-  }
+  } 
 
   Object.defineProperty(Vue.prototype, '$dialog', {
     get: () => {

package/extensions/TAMap.js

@@ -0,0 +1,331 @@
+/** 入口文件不同 作用域不同 */
+let TMapKey = null
+let TMapLayer = null
+let TMapInstance = null
+
+/** 默认天地图配置 */
+let TMapConfig = {
+  key: 'a32ac7f489c946ec19be06a1d6d7e3ae',
+  tileLayer: 'vec' // 矢量底图：vec-矢量，img-影像，cia-影像注记
+}
+
+// 安全配置 / 地图样式配置
+export const setTMapSecurity = (config = TMapConfig) => {
+  const { key, tileLayer } = config
+  TMapKey = key
+  TMapLayer = tileLayer
+  // 天地图无需安全JS代码配置
+}
+
+// 核心地图服务类
+class TMapService {
+  constructor(T) {
+    this.T = T
+    this._iconCache = new Map() // 图标缓存
+
+    /** 常用覆盖物 */
+    this.layers = {
+      setIcon: this.setIcon.bind(this),
+      setMarker: this.setMarker.bind(this),
+      setInfoWindow: this._createInfoWindowHandler()
+    }
+
+    /** 抛出地图常用方法 */ 
+    this.methods = {
+      getMapAddress: this.getMapAddress.bind(this),
+      getMapSearch: this.getMapSearch.bind(this),
+      setMapDriving: this.setMapDriving.bind(this),
+      drawMapAnimation,
+      parseRouteToPath,
+      getOverlayPos
+    }
+  }
+
+  /** 初始化地图 */
+  initMap(container, options = {}) {
+    const map = new this.T.Map(container, {
+      center: new this.T.LngLat(118.868228, 28.892844),
+      zoom: 13,
+      ...options
+    })
+    
+    // 添加天地图图层
+    const layer = new this.T.TileLayer(TMapLayer, {
+      key: TMapKey
+    })
+    map.addLayer(layer)
+    
+    options.zoomTool && map.addControl(new this.T.Control.Zoom())
+    options.directionTool && map.addControl(new this.T.Control.Navigation())
+    
+    return map
+  }
+
+  /** 格式化地图经纬度 */
+  setLngLat(position) {
+    return new this.T.LngLat(position[0], position[1])
+  } 
+
+  /** 创建信息窗口处理器（柯里化函数） */
+  _createInfoWindowHandler() {
+    return (Vue) => {
+      if (!Vue || !Vue.extend) {
+        throw new Error('必须传入有效的Vue构造函数')
+      }
+      
+      return ({component, props, options = {}}) => {
+        if (!component) throw new Error('component参数必填')
+        
+        const InfoWindowComponent = Vue.extend(component)
+        const instance = new InfoWindowComponent({ 
+          propsData: props 
+        }).$mount(document.createElement('div'))
+        
+        return new this.T.InfoWindow({
+          content: instance.$el,
+          ...options
+        })
+      }
+    }
+  }
+
+  /** 带缓存的图标创建方法 */
+  async setIcon(iconUrl) {
+    if (this._iconCache.has(iconUrl)) {
+      return this._iconCache.get(iconUrl)
+    }
+
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onload = () => {
+        const icon = new this.T.Icon({
+          iconUrl: iconUrl,
+          iconSize: new this.T.Point(img.width, img.height)
+        })
+        this._iconCache.set(iconUrl, icon)
+        resolve(icon)
+      }
+      img.onerror = () => reject(new Error(`图标加载失败: ${iconUrl}`))
+      img.src = iconUrl
+    })
+  }
+
+  /** 增强的标记点创建方法 */
+  async setMarker(iconUrl, options = {}) { 
+    try {
+      const icon = await this.setIcon(iconUrl)
+      const marker = new this.T.Marker({
+        ...options,
+        icon
+      })
+      return marker
+    } catch (error) {
+      console.error('创建标记点失败:', error)
+      throw error
+    }
+  }
+
+  /** 地图逆地理编码 */
+  getMapAddress({longitude, latitude}, callBack) {
+    return new Promise((resolve, reject) => {
+      const geocoder = new this.T.Geocoder()
+      
+      geocoder.getLocation(new this.T.Point(longitude, latitude))
+        .then(result => {
+          const addressMsg = {
+            address: result.address,
+            addressInfo: result.addressComponents
+          }
+          callBack?.(addressMsg)
+          resolve(addressMsg) 
+        })
+        .catch(error => {
+          reject(new Error('转换失败'))
+        })
+    })
+  }
+
+  /** 根据地址搜索地图poi点及其他信息 */
+  /**
+   * 
+   * @param {*} keywords 根据关键字搜索
+   * @param {*} callBack 查询成功后过滤信息及转换格式 传递回调函数 兼容老版本代码
+   */
+  getMapSearch(keywords, callBack) {
+    return new Promise((resolve) => {
+      const localSearch = new this.T.LocalSearch(map, {
+        onSearchComplete: (result) => {
+          const options = result.poiList.map(node => ({
+            ...node,
+            label: `${node.name}（${node.address}）`
+          }))
+          callBack?.(options)
+          resolve(options)
+        }
+      })
+      localSearch.search(keywords)
+    })
+  } 
+
+  /** 道路规划 */
+  /**
+   * 
+   * @param {*} TMapInit 当前地图实例
+   * @param {*} paths 需查询的路径起始点及途径点集合
+   * @param {*} roadOptions 路线规划的其他参数
+   * { paths: 需查询的路径起始点及途径点集合, options: 为查询路线配置项 }
+   * @param {*} callBack 查询成功后回调函数 兼容老版本代码
+   */
+  async setMapDriving(mapInstance, roadOptions, callBack) {
+    const { paths, options = {} } = roadOptions
+    return new Promise((resolve) => {
+      const driving = new this.T.DrivingRoute(mapInstance, {
+        ...options
+      })
+      
+      driving.search(
+        this.setLngLat(paths[0]),
+        this.setLngLat(paths[paths.length - 1]),
+        {
+          waypoints: paths.slice(1, -1).map(path => this.setLngLat(path)) 
+        },
+        (status, result) => status === this.T.DrivingResult.OK && (
+          callBack?.(driving, result.routes),
+          resolve({ driving, routes: result.routes })
+        )
+      )
+    })
+  }
+
+  // 其他方法保持类似改造...
+}
+
+// 获取TMap实例（组件内使用）
+export const getTMapInstance = async (options = {}) => {
+  if (TMapInstance) return TMapInstance
+
+  // 确保key存在
+  if (!TMapKey) {
+    try {
+      setTMapSecurity()
+    } catch (e) {
+      throw new Error('请先设置地图Key！')
+    }
+  }
+
+  try {
+    // 天地图JS API加载（假设已通过CDN引入）
+    const T = await window.T // 确保天地图API已加载
+    TMapInstance = new TMapService(T)
+    return TMapInstance
+  } catch (e) {
+    throw new Error(`天地图加载失败: ${e.message}`)
+  }
+}
+
+// 在 Vue 插件中封装天地图的初始化和常用方法 
+export default {
+  async install(Vue, options = {}) {
+
+    const tmap = await getTMapInstance(options)
+
+    const { T, methods, layers } = tmap
+    
+    Vue.prototype.$tmap = T
+
+    /** 初始化地图 */
+    Vue.prototype.$initTMap = (mapOptions, callBack) => {
+      const tmapInit = tmap.initMap(
+        mapOptions.el, 
+        mapOptions.options || {}
+      )
+      /** 兼容之前版本代码 */
+      callBack?.(tmapInit)
+      return tmapInit
+    }
+
+    /** 地图加载完成 */
+    Vue.prototype.$bus.$emit('onTMapMounted')
+
+    /** 常用覆盖物 */
+    Vue.prototype.$tmapLayers = {
+      ...layers,
+      setInfoWindow: layers.setInfoWindow(Vue)
+    }
+  
+    /** 抛出地图常用方法 */ 
+    Vue.prototype.$tmapMethods = methods || {}
+
+  }
+}
+
+/** 
+ * 安全获取覆盖物坐标信息 
+ * @param {T.Overlay} overlay 地图覆盖物实例
+ * @returns {Array<Array<number>>} 坐标点数组
+ */
+function getOverlayPos(overlay) {
+  if (!overlay) throw new Error('覆盖物实例不存在')
+  
+  try {
+    return overlay instanceof this.T.Marker
+      ? [overlay.getLngLat().lng, overlay.getLngLat().lat]
+      : overlay.getPath().map(({lng, lat}) => [lng, lat])
+  } catch (e) {
+    console.error('转换失败', e)
+    return []
+  }
+}
+
+/**
+ * 轨迹动画执行器
+ * @param {T.Map} TMapInit 地图实例
+ * @param {T.Marker} animationMarker 动画标记物
+ * @param {Array<Array<number>>} paths 路径坐标数组
+ * @param {Object} [options] 动画配置
+ * @param {Function} [callBack] 动画完成回调
+ */
+function drawMapAnimation(TMapInit, animationMarker, paths, options = {}, callBack) {
+  if (!TMapInit || !animationMarker || !paths?.length) {
+    return console.error('缺少参数信息')
+  }
+
+  const defaultOptions = {
+    duration: 500,
+    autoRotation: true,
+    ...options
+  }
+  
+  animationMarker.moveAlong(paths, defaultOptions)
+  callBack?.(animationMarker)
+}
+
+/**
+ * 转换导航路线为可绘制路径
+ * @param {T.DrivingRoute} route 导航路线对象
+ * @returns {{
+*   path: Array<Array<number>>,
+*   approachPoints: Array<number>
+* }}
+*/
+function parseRouteToPath(route) {
+ if (!route?.steps) return { path: [], approachPoints: [] }
+
+ const result = {
+   path: [],
+   approachPoints: []
+ }
+
+ route.steps.forEach((step, stepIndex) => {
+   step.path.forEach((point, pointIndex) => {
+     result.path.push([point.lng, point.lat])
+     
+     if (step.assistant_action === "到达途经地" && 
+         pointIndex === step.path.length - 1) {
+       result.approachPoints.push(result.path.length - 1)
+     }
+   })
+ })
+
+ return result
+}

package/lib/amap-draw/index.jsx

@@ -31,7 +31,7 @@ export const AmapDrawProps = {
   isExhibition: PropTypes.bool.def(false),
   /** 绘制操作自定义 */
   drawButtonOperate: PropTypes.object
-} 
+}
 
 const AmapDraw = {
   name: 'AmapDraw',

package/lib/style/screen.less

@@ -10,7 +10,7 @@
 @sc-title-2: linear-gradient(180deg, @white 36.35%, @sc-title-color 67.08%); 
 
 // 基础色
-@sc-color-1: #0a4676; 
+@sc-color-1: #0a4676;
 
 // 阴影色
 @sc-shadow-1: #0A1834;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.2.18",
+  "version": "2.2.19",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [