xt-element-ui 1.2.8 → 1.3.1

package/src/components/xt-map/config/xt-map-config.js

@@ -0,0 +1,197 @@
+/**
+ * XtMap 全局配置管理
+ * 支持通过 Vue.use 配置或运行时动态设置地图提供商、密钥、URL、主题等
+ */
+
+// 支持的地图提供商
+export const MAP_PROVIDERS = ['amap', 'tianditu', 'baidu']
+
+// 支持的地图类型（统一枚举，各适配器会转成对应引擎的类型）
+export const MAP_TYPES = ['standard', 'satellite', 'hybrid', 'traffic']
+
+// 支持的主题
+export const MAP_THEMES = ['light', 'dark']
+
+// 默认配置 - 以高德地图为基准
+const defaultConfig = {
+  provider: 'amap',
+  apiKey: '',
+  apiUrl: null,
+  mapType: 'standard',
+  theme: 'light',
+  center: [116.397428, 39.90923],
+  zoom: 11,
+  plugins: [],
+  securityJsCode: null,
+  // 天地图专用：图层类型（vec:矢量, img:影像, ter:地形）
+  tiandituLayerType: 'vec',
+  // 百度地图专用：坐标系（bd09ll:百度经纬度, bd09mc:百度墨卡托）
+  baiduCoordType: 'bd09ll'
+}
+
+// 当前配置
+let currentConfig = { ...defaultConfig }
+
+// 配置变更监听器
+const configChangeListeners = []
+
+const emitConfigChange = (key, value) => {
+  configChangeListeners.forEach(listener => {
+    try {
+      listener(key, value)
+    } catch (e) {
+      console.warn('[XtMap] 配置变更监听异常:', e)
+    }
+  })
+}
+
+// 获取完整配置
+export const getMapConfig = () => ({ ...currentConfig })
+
+// 设置完整配置
+export const setMapConfig = (config) => {
+  if (typeof config !== 'object' || config === null) {
+    console.warn('[XtMap] setMapConfig 必须传入对象参数')
+    return
+  }
+
+  if (config.provider !== undefined) setMapProvider(config.provider)
+  if (config.apiKey !== undefined) setMapApiKey(config.apiKey)
+  if (config.apiUrl !== undefined) setMapApiUrl(config.apiUrl)
+  if (config.mapType !== undefined) setMapType(config.mapType)
+  if (config.theme !== undefined) setMapTheme(config.theme)
+  if (config.center !== undefined) setMapCenter(config.center)
+  if (config.zoom !== undefined) setMapZoom(config.zoom)
+  if (config.plugins !== undefined) setMapPlugins(config.plugins)
+  if (config.securityJsCode !== undefined) setSecurityJsCode(config.securityJsCode)
+}
+
+export const setMapProvider = (provider) => {
+  if (!MAP_PROVIDERS.includes(provider)) {
+    console.warn(`[XtMap] 无效的地图提供商: ${provider}，可选: ${MAP_PROVIDERS.join(', ')}`)
+    return
+  }
+  currentConfig.provider = provider
+  emitConfigChange('provider', provider)
+}
+
+export const setMapApiKey = (key) => {
+  currentConfig.apiKey = key
+  emitConfigChange('apiKey', key)
+}
+
+export const setMapApiUrl = (url) => {
+  currentConfig.apiUrl = url
+  emitConfigChange('apiUrl', url)
+}
+
+export const setMapType = (type) => {
+  if (!MAP_TYPES.includes(type)) {
+    console.warn(`[XtMap] 无效的地图类型: ${type}，可选: ${MAP_TYPES.join(', ')}`)
+    return
+  }
+  currentConfig.mapType = type
+  emitConfigChange('mapType', type)
+}
+
+export const setMapTheme = (theme) => {
+  if (!MAP_THEMES.includes(theme)) {
+    console.warn(`[XtMap] 无效的主题: ${theme}，可选: ${MAP_THEMES.join(', ')}`)
+    return
+  }
+  currentConfig.theme = theme
+  emitConfigChange('theme', theme)
+}
+
+export const setMapCenter = (center) => {
+  if (!Array.isArray(center) || center.length !== 2) {
+    console.warn('[XtMap] center 必须是 [lng, lat] 数组')
+    return
+  }
+  currentConfig.center = center
+  emitConfigChange('center', center)
+}
+
+export const setMapZoom = (zoom) => {
+  const z = Number(zoom)
+  if (isNaN(z)) {
+    console.warn('[XtMap] zoom 必须是数字')
+    return
+  }
+  currentConfig.zoom = z
+  emitConfigChange('zoom', z)
+}
+
+export const setMapPlugins = (plugins) => {
+  if (!Array.isArray(plugins)) {
+    console.warn('[XtMap] plugins 必须是数组')
+    return
+  }
+  currentConfig.plugins = plugins
+  emitConfigChange('plugins', plugins)
+}
+
+export const setSecurityJsCode = (code) => {
+  currentConfig.securityJsCode = code
+  // 高德地图安全密钥：设置 window._AMapSecurityConfig
+  if (typeof window !== 'undefined' && code) {
+    window._AMapSecurityConfig = {
+      securityJsCode: code,
+      ...(window._AMapSecurityConfig || {})
+    }
+  }
+  emitConfigChange('securityJsCode', code)
+}
+
+// 获取当前配置的快捷方法
+export const getMapProvider = () => currentConfig.provider
+export const getMapApiKey = () => currentConfig.apiKey
+export const getMapApiUrl = () => currentConfig.apiUrl
+export const getMapType = () => currentConfig.mapType
+export const getMapTheme = () => currentConfig.theme
+export const getMapCenter = () => currentConfig.center
+export const getMapZoom = () => currentConfig.zoom
+export const getMapPlugins = () => currentConfig.plugins
+
+// 监听配置变更
+export const onMapConfigChange = (listener) => {
+  if (typeof listener === 'function') {
+    configChangeListeners.push(listener)
+    return () => {
+      const index = configChangeListeners.indexOf(listener)
+      if (index > -1) configChangeListeners.splice(index, 1)
+    }
+  }
+}
+
+// 重置为默认配置
+export const resetMapConfig = () => {
+  setMapConfig(defaultConfig)
+}
+
+export default {
+  MAP_PROVIDERS,
+  MAP_TYPES,
+  MAP_THEMES,
+  getMapConfig,
+  setMapConfig,
+  setMapProvider,
+  setMapApiKey,
+  setMapApiUrl,
+  setMapType,
+  setMapTheme,
+  setMapCenter,
+  setMapZoom,
+  setMapPlugins,
+  setSecurityJsCode,
+  getMapProvider,
+  getMapApiKey,
+  getMapApiUrl,
+  getMapType,
+  getMapTheme,
+  getMapCenter,
+  getMapZoom,
+  getMapPlugins,
+  onMapConfigChange,
+  resetMapConfig
+}

package/src/components/xt-map/index.js

@@ -0,0 +1,22 @@
+import XtMap from './index.vue'
+import XtMapProvider from './provider.vue'
+import './style/index.scss'
+
+XtMap.install = function (Vue) {
+  Vue.component(XtMap.name, XtMap)
+}
+
+XtMapProvider.install = function (Vue) {
+  Vue.component(XtMapProvider.name, XtMapProvider)
+}
+
+export { XtMap, XtMapProvider }
+
+export default {
+  install(Vue) {
+    Vue.component(XtMap.name, XtMap)
+    Vue.component(XtMapProvider.name, XtMapProvider)
+  },
+  XtMap,
+  XtMapProvider
+}

package/src/components/xt-map/index.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="xt-map-wrapper">
+    <div ref="mapContainer" class="xt-map-container" :data-theme="mergedTheme"></div>
+    <div v-if="loading" class="xt-map-loading">
+      <span>地图加载中...</span>
+    </div>
+    <div v-if="errorMessage" class="xt-map-error">
+      <span>{{ errorMessage }}</span>
+    </div>
+    <slot name="overlay"></slot>
+  </div>
+</template>
+
+<script>
+import { getAdapterClass } from './adapters/index'
+import { clearScriptCache } from './loaders/script-loader'
+import {
+  getMapConfig,
+  getMapProvider,
+  getMapApiKey,
+  getMapApiUrl,
+  getMapType,
+  getMapTheme,
+  getMapCenter,
+  getMapZoom,
+  setSecurityJsCode,
+  MAP_PROVIDERS,
+  MAP_TYPES,
+  MAP_THEMES,
+  onMapConfigChange
+} from './config/xt-map-config'
+
+export default {
+  name: 'XtMap',
+
+  props: {
+    provider: {
+      type: String,
+      default: '',
+      validator: (val) => val === '' || MAP_PROVIDERS.includes(val)
+    },
+    apiKey: {
+      type: String,
+      default: ''
+    },
+    apiUrl: {
+      type: String,
+      default: ''
+    },
+    mapType: {
+      type: String,
+      default: '',
+      validator: (val) => val === '' || MAP_TYPES.includes(val)
+    },
+    theme: {
+      type: String,
+      default: '',
+      validator: (val) => val === '' || MAP_THEMES.includes(val)
+    },
+    center: {
+      type: Array,
+      default: () => null
+    },
+    zoom: {
+      type: Number,
+      default: null
+    },
+    plugins: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    },
+    securityJsCode: {
+      type: String,
+      default: ''
+    },
+    tiandituLayerType: {
+      type: String,
+      default: 'vec'
+    },
+    baiduCoordType: {
+      type: String,
+      default: 'bd09ll'
+    }
+  },
+
+  data() {
+    return {
+      loading: true,
+      errorMessage: '',
+      adapter: null,
+      _unsubscribeConfig: null
+    }
+  },
+
+  computed: {
+    mergedProvider() {
+      return this.provider || getMapProvider() || 'amap'
+    },
+    mergedApiKey() {
+      return this.apiKey || getMapApiKey() || ''
+    },
+    mergedApiUrl() {
+      return this.apiUrl || getMapApiUrl() || ''
+    },
+    mergedMapType() {
+      return this.mapType || getMapType() || 'standard'
+    },
+    mergedTheme() {
+      return this.theme || getMapTheme() || 'light'
+    },
+    mergedCenter() {
+      return this.center || getMapCenter() || [116.397428, 39.90923]
+    },
+    mergedZoom() {
+      return this.zoom !== null ? this.zoom : getMapZoom()
+    },
+    mergedSecurityJsCode() {
+      return this.securityJsCode || (getMapConfig().securityJsCode) || ''
+    },
+    mergedPlugins() {
+      return this.plugins.length > 0 ? this.plugins : getMapConfig().plugins || []
+    }
+  },
+
+  watch: {
+    mergedProvider: {
+      handler() {
+        this.$nextTick(() => this.rebuildMap())
+      }
+    },
+    mergedApiKey: {
+      handler() {
+        this.$nextTick(() => this.rebuildMap())
+      }
+    },
+    mergedMapType: {
+      handler(newVal) {
+        if (this.adapter) this.adapter.setMapType(newVal)
+      }
+    },
+    mergedTheme: {
+      handler(newVal) {
+        if (this.adapter) this.adapter.setTheme(newVal)
+        if (this.$refs.mapContainer) {
+          this.$refs.mapContainer.setAttribute('data-theme', newVal)
+        }
+      }
+    },
+    mergedCenter: {
+      handler(newVal) {
+        if (this.adapter) this.adapter.setCenter(newVal)
+      }
+    },
+    mergedZoom: {
+      handler(newVal) {
+        if (this.adapter) this.adapter.setZoom(newVal)
+      }
+    },
+    width: {
+      handler() {
+        this.$nextTick(() => {
+          if (this.adapter) this.adapter.resize()
+        })
+      }
+    },
+    height: {
+      handler() {
+        this.$nextTick(() => {
+          if (this.adapter) this.adapter.resize()
+        })
+      }
+    },
+    securityJsCode: {
+      handler(newVal) {
+        if (newVal) {
+          setSecurityJsCode(newVal)
+          // 高德 2.0：SDK 已加载后再设置 securityJsCode 无效，需要重建地图
+          if (this.mergedProvider === 'amap' && this.adapter && this.adapter.ready) {
+            this.$nextTick(() => this.rebuildMap())
+          }
+        }
+      }
+    }
+  },
+
+  mounted() {
+    // 监听全局配置变更
+    this._unsubscribeConfig = onMapConfigChange((key, value) => {
+      if (!this.provider && (key === 'provider')) this.$nextTick(() => this.rebuildMap())
+      if (!this.apiKey && (key === 'apiKey')) this.$nextTick(() => this.rebuildMap())
+      if (!this.apiUrl && (key === 'apiUrl')) this.$nextTick(() => this.rebuildMap())
+      if (!this.theme && key === 'theme' && this.adapter) this.adapter.setTheme(value)
+      if (!this.mapType && key === 'mapType' && this.adapter) this.adapter.setMapType(value)
+      if (!this.center && key === 'center' && this.adapter) this.adapter.setCenter(value)
+      if (this.zoom === null && key === 'zoom' && this.adapter) this.adapter.setZoom(value)
+    })
+
+    // 设置高德安全密钥
+    if (this.securityJsCode) setSecurityJsCode(this.securityJsCode)
+
+    this.$nextTick(() => this.initMap())
+
+    // 监听窗口尺寸变化
+    this._onWindowResize = () => {
+      if (this.adapter) this.adapter.resize()
+    }
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this._onWindowResize)
+    }
+  },
+
+  beforeDestroy() {
+    this.destroyMap()
+    if (this._unsubscribeConfig) this._unsubscribeConfig()
+    if (this._onWindowResize && typeof window !== 'undefined') {
+      window.removeEventListener('resize', this._onWindowResize)
+    }
+  },
+
+  methods: {
+    async initMap() {
+      const container = this.$refs.mapContainer
+      if (!container) return
+
+      // 设置容器尺寸
+      container.style.width = this.width
+      container.style.height = this.height
+
+      // 设置安全密钥（高德需要）
+      if (this.securityJsCode) setSecurityJsCode(this.securityJsCode)
+
+      this.loading = true
+      this.errorMessage = ''
+
+      const AdapterClass = getAdapterClass(this.mergedProvider)
+
+      this.adapter = new AdapterClass(container, {
+        apiKey: this.mergedApiKey,
+        apiUrl: this.mergedApiUrl,
+        mapType: this.mergedMapType,
+        theme: this.mergedTheme,
+        center: this.mergedCenter,
+        zoom: this.mergedZoom,
+        plugins: this.mergedPlugins,
+        securityJsCode: this.mergedSecurityJsCode,
+        tiandituLayerType: this.tiandituLayerType,
+        baiduCoordType: this.baiduCoordType
+      })
+
+      try {
+        await this.adapter.init()
+        this.loading = false
+
+        // 绑定事件
+        this._bindAdapterEvents()
+
+        // 向父组件发出 ready 事件
+        this.$emit('ready', {
+          provider: this.mergedProvider,
+          map: this.adapter.getNativeMap(),
+          adapter: this.adapter
+        })
+      } catch (err) {
+        this.loading = false
+        this.errorMessage = err.message || '地图初始化失败'
+        this.$emit('error', err)
+      }
+    },
+
+    rebuildMap() {
+      this.destroyMap()
+      // 清理脚本缓存，确保新配置能生效（例如切换密钥后重新加载）
+      if (typeof clearScriptCache === 'function') {
+        clearScriptCache()
+      }
+      this.$nextTick(() => this.initMap())
+    },
+
+    destroyMap() {
+      if (this.adapter) {
+        this.adapter.destroy()
+        this.adapter = null
+      }
+    },
+
+    _bindAdapterEvents() {
+      if (!this.adapter) return
+
+      const events = ['click', 'moveend', 'zoomend', 'zoomchange', 'mapmove']
+      events.forEach((evt) => {
+        this.adapter.on(evt, (data) => {
+          this.$emit(evt, data)
+        })
+      })
+    },
+
+    // 对外暴露的统一 API
+    setCenter(center) {
+      if (this.adapter) this.adapter.setCenter(center)
+    },
+
+    setZoom(zoom) {
+      if (this.adapter) this.adapter.setZoom(zoom)
+    },
+
+    setMapType(type) {
+      if (this.adapter) this.adapter.setMapType(type)
+    },
+
+    setTheme(theme) {
+      if (this.adapter) this.adapter.setTheme(theme)
+    },
+
+    getCenter() {
+      return this.adapter ? this.adapter.getCenter() : this.mergedCenter
+    },
+
+    getZoom() {
+      return this.adapter ? this.adapter.getZoom() : this.mergedZoom
+    },
+
+    getNativeMap() {
+      return this.adapter ? this.adapter.getNativeMap() : null
+    },
+
+    resize() {
+      if (this.adapter) this.adapter.resize()
+    },
+
+    on(eventName, handler) {
+      if (this.adapter) this.adapter.on(eventName, handler)
+    },
+
+    off(eventName) {
+      if (this.adapter) this.adapter.off(eventName)
+    },
+
+    rebuild() {
+      this.rebuildMap()
+    }
+  }
+}
+</script>

package/src/components/xt-map/loaders/script-loader.js

@@ -0,0 +1,114 @@
+/**
+ * 动态脚本加载器
+ * 负责动态注入地图 SDK <script> 标签，并返回 Promise
+ * 同一 URL 只会加载一次，缓存已加载的结果
+ */
+
+const loadedScripts = new Map()      // URL -> Promise
+const loadingScripts = new Map()     // URL -> Promise (正在加载中)
+
+/**
+ * 动态加载单个脚本
+ * @param {string} url - 脚本 URL
+ * @param {object} options - 配置
+ * @param {string} options.charset - 字符集，默认 'utf-8'
+ * @param {boolean} options.async - 是否异步，默认 true
+ * @param {number} options.timeout - 超时时间(ms)，默认 30000
+ * @returns {Promise<HTMLScriptElement>}
+ */
+export const loadScript = (url, options = {}) => {
+  if (typeof window === 'undefined') {
+    return Promise.reject(new Error('[XtMap] 非浏览器环境'))
+  }
+
+  const { charset = 'utf-8', async = true, timeout = 30000 } = options
+
+  if (loadedScripts.has(url)) {
+    return loadedScripts.get(url)
+  }
+
+  if (loadingScripts.has(url)) {
+    return loadingScripts.get(url)
+  }
+
+  const promise = new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.src = url
+    script.charset = charset
+    script.async = async
+
+    let timer = null
+    let done = false
+
+    const cleanup = () => {
+      done = true
+      if (timer) clearTimeout(timer)
+      script.onload = null
+      script.onerror = null
+    }
+
+    script.onload = () => {
+      if (done) return
+      cleanup()
+      loadingScripts.delete(url)
+      loadedScripts.set(url, Promise.resolve(script))
+      resolve(script)
+    }
+
+    script.onerror = (err) => {
+      if (done) return
+      cleanup()
+      loadingScripts.delete(url)
+      reject(new Error(`[XtMap] 脚本加载失败: ${url}`))
+    }
+
+    if (timeout > 0) {
+      timer = setTimeout(() => {
+        if (done) return
+        cleanup()
+        loadingScripts.delete(url)
+        reject(new Error(`[XtMap] 脚本加载超时: ${url}`))
+      }, timeout)
+    }
+
+    document.head.appendChild(script)
+  })
+
+  loadingScripts.set(url, promise)
+  return promise
+}
+
+/**
+ * 批量加载脚本（按顺序）
+ * @param {string[]} urls
+ * @param {object} options
+ */
+export const loadScripts = async (urls, options = {}) => {
+  for (const url of urls) {
+    await loadScript(url, options)
+  }
+}
+
+/**
+ * 清除加载缓存（切换密钥等场景使用）
+ */
+export const clearScriptCache = () => {
+  loadedScripts.clear()
+  loadingScripts.clear()
+}
+
+/**
+ * 检查全局对象是否存在
+ */
+export const hasGlobal = (name) => {
+  if (typeof window === 'undefined') return false
+  return window[name] !== undefined
+}
+
+export default {
+  loadScript,
+  loadScripts,
+  clearScriptCache,
+  hasGlobal
+}