xt-element-ui 1.3.0 → 1.3.1

package/src/components/xt-map/adapters/tianditu.js

@@ -0,0 +1,242 @@
+/**
+ * 天地图适配器 (Tianditu)
+ * 天地图使用 WMTS 切片服务，不支持原生主题切换，
+ * dark/light 通过图层样式参数模拟（部分图层可调整色调）
+ */
+
+import { MapAdapterBase } from './base'
+import { hasGlobal } from '../loaders/script-loader'
+
+// 天地图地图类型映射
+const TIANDITU_MAP_TYPES = {
+  standard: 'vec',           // 矢量地图
+  satellite: 'img',          // 影像地图
+  hybrid: 'img',             // 混合（影像 + 注记）
+  traffic: 'vec'             // 天地图不支持原生路况，降级为矢量
+}
+
+// 天地图主题色模拟：通过调整图层透明度/色调CSS滤镜
+const TIANDITU_THEME_FILTER = {
+  light: 'none',
+  dark: 'invert(1) hue-rotate(180deg) saturate(1.2) brightness(0.95)'
+}
+
+export class TiandituAdapter extends MapAdapterBase {
+  constructor(container, options = {}) {
+    super(container, options)
+    this._mapTypeMap = { ...TIANDITU_MAP_TYPES }
+    this._layerType = options.tiandituLayerType || 'vec'
+    this._currentLayer = null
+    this._annotationLayer = null
+  }
+
+  getScriptUrl() {
+    if (this.apiUrl) return this.apiUrl
+    if (!this.apiKey) {
+      console.warn('[XtMap] 天地图需要配置 apiKey (tk)')
+      return ''
+    }
+    return `https://api.tianditu.gov.cn/api?v=4.0&tk=${encodeURIComponent(this.apiKey)}`
+  }
+
+  isSdkLoaded() {
+    return hasGlobal('T') && typeof window.T === 'object' && window.T.Map
+  }
+
+  async createMap() {
+    const T = window.T
+    if (!T || !T.Map) throw new Error('[XtMap] 天地图 SDK 未加载')
+
+    const mapOptions = {
+      center: new T.LngLat(this.center[0], this.center[1]),
+      zoom: this.zoom
+    }
+
+    this.mapInstance = new T.Map(this.container, mapOptions)
+
+    // 应用地图类型
+    this._applyMapType(this.mapType)
+
+    // 应用主题
+    this._applyTheme(this.theme)
+
+    // 等待地图就绪
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500)
+    })
+
+    // 绑定事件
+    for (const [eventName, handler] of this.eventHandlers.entries()) {
+      this._bindEvent(eventName, handler)
+    }
+  }
+
+  _applyMapType(type) {
+    if (!this.mapInstance) return
+    const T = window.T
+    if (!T) return
+
+    try {
+      // 天地图通过 switchTo 方法切换图层
+      const layerType = this._mapTypeMap[type] || 'vec'
+
+      if (type === 'standard') {
+        // 矢量地图
+        this.mapInstance.setMapType(window.TMAP_NORMAL_MAP || 1)
+      } else if (type === 'satellite') {
+        // 影像地图
+        this.mapInstance.setMapType(window.TMAP_SATELLITE_MAP || 2)
+      } else if (type === 'hybrid') {
+        // 混合（影像+注记）
+        this.mapInstance.setMapType(window.TMAP_HYBRID_MAP || 3)
+      } else {
+        // 路况等特殊类型，天地图无原生支持
+        this.mapInstance.setMapType(window.TMAP_NORMAL_MAP || 1)
+      }
+    } catch (e) {
+      console.warn('[XtMap] 天地图切换地图类型失败:', e)
+    }
+  }
+
+  _applyTheme(theme) {
+    if (!this.container) return
+    // 天地图不支持原生 dark 主题，通过 CSS 滤镜模拟
+    const filter = TIANDITU_THEME_FILTER[theme] || 'none'
+    const imgElements = this.container.querySelectorAll('img')
+    imgElements.forEach((img) => {
+      img.style.filter = filter
+      img.style.webkitFilter = filter
+    })
+    // 同时设置容器级 CSS 变量，方便样式覆盖
+    this.container.setAttribute('data-map-theme', theme)
+    // 监听后续新增的 tile 图片（通过 MutationObserver）
+    this._setupThemeObserver(theme)
+  }
+
+  _setupThemeObserver(theme) {
+    if (this._themeObserver) {
+      this._themeObserver.disconnect()
+    }
+    if (theme !== 'dark') return
+    const filter = TIANDITU_THEME_FILTER[theme]
+    this._themeObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === 1) {
+            if (node.tagName === 'IMG') {
+              node.style.filter = filter
+              node.style.webkitFilter = filter
+            } else if (node.querySelectorAll) {
+              const imgs = node.querySelectorAll('img')
+              imgs.forEach((img) => {
+                img.style.filter = filter
+                img.style.webkitFilter = filter
+              })
+            }
+          }
+        })
+      })
+    })
+    try {
+      this._themeObserver.observe(this.container, {
+        childList: true,
+        subtree: true
+      })
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyCenter(center) {
+    if (!this.mapInstance || !window.T) return
+    try {
+      this.mapInstance.centerAndZoom(new window.T.LngLat(center[0], center[1]), this.zoom)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyZoom(zoom) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.setZoom(zoom)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  getCenter() {
+    if (this.mapInstance && this.mapInstance.getCenter) {
+      const c = this.mapInstance.getCenter()
+      if (c && c.getLng !== undefined) {
+        return [c.getLng(), c.getLat()]
+      }
+    }
+    return this.center
+  }
+
+  getZoom() {
+    if (this.mapInstance && this.mapInstance.getZoom) {
+      return this.mapInstance.getZoom()
+    }
+    return this.zoom
+  }
+
+  _bindEvent(eventName, handler) {
+    if (!this.mapInstance) return
+    try {
+      const eventMap = {
+        click: 'click',
+        moveend: 'moveend',
+        zoomend: 'zoomend',
+        zoomchange: 'zoomend'
+      }
+      const nativeEvent = eventMap[eventName] || eventName
+      this.mapInstance.addEventListener(nativeEvent, (e) => {
+        const normalized = {
+          originalEvent: e,
+          lnglat: e && e.lnglat ? [e.lnglat.getLng(), e.lnglat.getLat()] : null
+        }
+        handler(normalized)
+      })
+    } catch (err) {
+      console.warn('[XtMap] 天地图事件绑定失败:', eventName, err)
+    }
+  }
+
+  _unbindEvent(eventName, handler) {
+    if (!this.mapInstance) return
+    try {
+      this.mapInstance.removeEventListener(eventName, handler)
+    } catch (e) {
+      // 忽略
+    }
+  }
+
+  _applyResize() {
+    if (this.mapInstance && this.mapInstance.checkResize) {
+      try {
+        this.mapInstance.checkResize()
+      } catch (e) {
+        // 忽略
+      }
+    }
+  }
+
+  destroy() {
+    if (this._themeObserver) {
+      this._themeObserver.disconnect()
+      this._themeObserver = null
+    }
+    if (this.mapInstance && typeof this.mapInstance.clearOverLays === 'function') {
+      try {
+        this.mapInstance.clearOverLays()
+      } catch (e) {
+        // 忽略
+      }
+    }
+    super.destroy()
+  }
+}
+
+export default TiandituAdapter

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