xt-element-ui 1.3.0 → 1.3.2

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
+}

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

@@ -0,0 +1,200 @@
+<template>
+  <div :class="['xt-map-provider', { 'xt-map-provider--dark': mergedTheme === 'dark' }]" :style="wrapperStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {
+  getMapConfig,
+  setMapConfig,
+  setMapProvider,
+  setMapApiKey,
+  setMapApiUrl,
+  setMapType,
+  setMapTheme,
+  setMapCenter,
+  setMapZoom,
+  setMapPlugins,
+  setSecurityJsCode,
+  getMapProvider,
+  getMapApiKey,
+  getMapApiUrl,
+  getMapType,
+  getMapTheme,
+  getMapCenter,
+  getMapZoom,
+  getMapPlugins,
+  MAP_PROVIDERS,
+  MAP_TYPES,
+  MAP_THEMES,
+  onMapConfigChange
+} from './config/xt-map-config'
+
+export default {
+  name: 'XtMapProvider',
+
+  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: () => []
+    },
+    securityJsCode: {
+      type: String,
+      default: ''
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      mergedTheme: this.theme || getMapTheme() || 'light'
+    }
+  },
+
+  computed: {
+    wrapperStyle() {
+      return {}
+    }
+  },
+
+  watch: {
+    provider: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapProvider(newVal)
+      }
+    },
+    apiKey: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapApiKey(newVal)
+      }
+    },
+    apiUrl: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapApiUrl(newVal)
+      }
+    },
+    mapType: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapType(newVal)
+      }
+    },
+    theme: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          setMapTheme(newVal)
+          this.mergedTheme = newVal
+        }
+      }
+    },
+    center: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setMapCenter(newVal)
+      }
+    },
+    zoom: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal !== null && newVal !== undefined) setMapZoom(newVal)
+      }
+    },
+    plugins: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal.length > 0) setMapPlugins(newVal)
+      }
+    },
+    securityJsCode: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) setSecurityJsCode(newVal)
+      }
+    }
+  },
+
+  provide() {
+    return {
+      xtMapConfig: {
+        getProvider: () => this.provider || getMapProvider(),
+        getApiKey: () => this.apiKey || getMapApiKey(),
+        getApiUrl: () => this.apiUrl || getMapApiUrl(),
+        getMapType: () => this.mapType || getMapType(),
+        getTheme: () => this.theme || getMapTheme(),
+        getCenter: () => this.center || getMapCenter(),
+        getZoom: () => this.zoom !== null ? this.zoom : getMapZoom(),
+        getPlugins: () => this.plugins.length > 0 ? this.plugins : getMapPlugins(),
+        getConfig: () => ({
+          provider: this.provider || getMapProvider(),
+          apiKey: this.apiKey || getMapApiKey(),
+          apiUrl: this.apiUrl || getMapApiUrl(),
+          mapType: this.mapType || getMapType(),
+          theme: this.theme || getMapTheme(),
+          center: this.center || getMapCenter(),
+          zoom: this.zoom !== null ? this.zoom : getMapZoom()
+        })
+      }
+    }
+  },
+
+  created() {
+    this._unsubscribe = onMapConfigChange((key, value) => {
+      if (key === 'theme') this.mergedTheme = this.theme || value
+    })
+  },
+
+  beforeDestroy() {
+    if (this._unsubscribe) this._unsubscribe()
+  }
+}
+</script>
+
+<style scoped>
+.xt-map-provider {
+  width: 100%;
+  height: 100%;
+}
+
+.xt-map-provider--dark {
+  background-color: transparent;
+}
+</style>