raintee-maputils 1.0.35 → 1.0.37

package/dist/index.js

@@ -6561,13 +6561,14 @@ class RulerControl {
 
 class CustomOptionsControl {
     constructor(args) {
-        const { title, options, onConfirm } = args;
+        const { title, options, onConfirm, icon } = args;
 
         this._map = null;
         this._container = null;
 
+        this._title = title || '';
         this._options = options || [];
-        this._title = title || '标题';
+        this._icon = icon || null;
         this._onConfirm = onConfirm || (() => { });
         this._originalOptions = [...this._options];
         this._selectedOptions = [];
@@ -6580,119 +6581,450 @@ class CustomOptionsControl {
         this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-options-control';
 
         const mainButton = document.createElement('button');
-        mainButton.textContent = this._title;
         mainButton.style.cssText = `
-            padding: 4px 8px;
+            padding: 0;
             background: white;
-            border: 1px solid #ccc;
+            border: 0.0625rem solid #ccc;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.375rem;
         `;
 
+        if (this._icon) {
+            const iconWrapper = document.createElement('span');
+            iconWrapper.style.cssText = `
+                width: 1rem;
+                height: 1rem;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            `;
+
+            if (this._icon.trim().startsWith('<svg')) {
+                iconWrapper.innerHTML = this._icon;
+            } else {
+                const img = document.createElement('img');
+                img.src = this._icon;
+                img.style.cssText = `width: 1rem; height: 1rem; object-fit: contain;`;
+                iconWrapper.appendChild(img);
+            }
+
+            mainButton.appendChild(iconWrapper);
+        }
+
         mainButton.addEventListener('click', () => {
             this._showModal();
         });
 
         this._container.appendChild(mainButton);
+
+        // 添加全局样式
+        this._addGlobalStyles();
+
         return this._container;
     }
 
-    /** 创建遮罩弹窗 */
+    _addGlobalStyles() {
+        if (document.querySelector('#custom-options-styles')) return;
+
+        const styles = document.createElement('style');
+        styles.id = 'custom-options-styles';
+        styles.textContent = `
+            @keyframes modalSlideIn {
+                from {
+                    opacity: 0;
+                    transform: scale(0.95) translateY(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: scale(1) translateY(0);
+                }
+            }
+            
+            @keyframes modalBackdropFadeIn {
+                from { opacity: 0; }
+                to { opacity: 1; }
+            }
+            
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            
+            .custom-modal-overlay {
+                animation: modalBackdropFadeIn 0.2s ease-out;
+            }
+            
+            .custom-modal {
+                animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            }
+            
+            .custom-search-input:focus {
+                border-color: #667eea !important;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+            }
+            
+            .custom-checkbox {
+                position: relative;
+                appearance: none;
+                width: 1rem;
+                height: 1rem;
+                border: 2px solid #d1d5db;
+                border-radius: 0.25rem;
+                background: white;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                margin-right: 0.75rem;
+            }
+            
+            .custom-checkbox:checked {
+                background: linear-gradient(135deg, #667eea, #764ba2);
+                border-color: #667eea;
+            }
+            
+            .custom-checkbox:checked::after {
+                content: '✓';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                color: white;
+                font-size: 0.75rem;
+                font-weight: bold;
+            }
+            
+            .custom-checkbox:hover {
+                border-color: #667eea;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            }
+            
+            .custom-list-item {
+                transition: all 0.2s ease;
+            }
+            
+            .custom-list-item:hover {
+                background-color: #f8fafc !important;
+                border-color: #e2e8f0 !important;
+                transform: translateX(4px) !important;
+            }
+            
+            .custom-modal::-webkit-scrollbar {
+                width: 6px;
+            }
+            
+            .custom-modal::-webkit-scrollbar-track {
+                background: #f1f5f9;
+                border-radius: 3px;
+            }
+            
+            .custom-modal::-webkit-scrollbar-thumb {
+                background: linear-gradient(135deg, #667eea, #764ba2);
+                border-radius: 3px;
+            }
+            
+            .custom-modal::-webkit-scrollbar-thumb:hover {
+                background: linear-gradient(135deg, #5a67d8, #6b46c1);
+            }
+        `;
+        document.head.appendChild(styles);
+    }
+
     _showModal() {
-        // 创建遮罩层
         this._overlay = document.createElement('div');
         this._overlay.className = 'custom-modal-overlay';
         this._overlay.style.cssText = `
             position: fixed;
             top: 0; left: 0; right: 0; bottom: 0;
-            background: rgba(0,0,0,0.5);
-            z-index: 9999;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            -webkit-backdrop-filter: blur(4px);
+            z-index: 10000;
             display: flex;
             justify-content: center;
             align-items: center;
+            padding: 1rem;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         `;
 
-        // 弹窗容器
         this._modal = document.createElement('div');
         this._modal.className = 'custom-modal';
         this._modal.style.cssText = `
-            width: 360px;
+            width: 100%;
+            max-width: 26rem;
             max-height: 80vh;
+            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+            border-radius: 0.75rem;
+            box-shadow: 
+                0 20px 25px -5px rgba(0, 0, 0, 0.1),
+                0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.8);
             overflow: hidden;
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
             display: flex;
             flex-direction: column;
         `;
 
-        // 搜索框
+        // 创建头部
+        const header = this._createHeader();
+        this._modal.appendChild(header);
+
+        // 创建搜索区域
+        const searchSection = this._createSearchSection();
+        this._modal.appendChild(searchSection);
+
+        // 创建选项列表
+        this._listBox = document.createElement('div');
+        this._listBox.style.cssText = `
+            flex: 1;
+            overflow-y: auto;
+            padding: 0 1.25rem 1.25rem 1.25rem;
+            min-height: 10rem;
+        `;
+        this._modal.appendChild(this._listBox);
+
+        // 创建底部按钮
+        const footer = this._createFooter();
+        this._modal.appendChild(footer);
+
+        this._overlay.appendChild(this._modal);
+        document.body.appendChild(this._overlay);
+
+        // 聚焦搜索框
+        // setTimeout(() => {
+        //     const searchInput = this._modal.querySelector('.custom-search-input');
+        //     if (searchInput) {
+        //         searchInput.focus();
+        //     }
+        // }, 100);
+
+        // 点击遮罩关闭
+        this._overlay.addEventListener('click', (e) => {
+            if (e.target === this._overlay) {
+                this._closeModal();
+            }
+        });
+
+        // ESC 键关闭
+        this._handleKeydown = (e) => {
+            if (e.key === 'Escape') {
+                this._closeModal();
+            }
+        };
+        document.addEventListener('keydown', this._handleKeydown);
+
+        this._renderList('');
+    }
+
+    _createHeader() {
+        const header = document.createElement('div');
+        header.style.cssText = `
+            padding: 1.25rem 1.25rem 1rem 1.25rem;
+            border-bottom: 1px solid #e2e8f0;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        `;
+
+        const title = document.createElement('h2');
+        title.textContent = this._title;
+        title.style.cssText = `
+            margin: 0 0 0.5rem 0;
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #1e293b;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        `;
+
+        // 添加图标
+        const icon = document.createElement('span');
+        icon.innerHTML = '📋';
+        icon.style.fontSize = '1.25rem';
+        title.insertBefore(icon, title.firstChild);
+
+        const subtitle = document.createElement('p');
+        subtitle.textContent = `共 ${this._originalOptions.length} 个选项，已选择 ${this._selectedOptions.length} 个`;
+        subtitle.style.cssText = `
+            margin: 0;
+            font-size: 0.8125rem;
+            color: #64748b;
+        `;
+
+        const closeBtn = document.createElement('button');
+        closeBtn.innerHTML = '✕';
+        closeBtn.style.cssText = `
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            width: 1.75rem;
+            height: 1.75rem;
+            border: none;
+            background: #f1f5f9;
+            color: #64748b;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            font-weight: 500;
+        `;
+        closeBtn.addEventListener('mouseenter', () => {
+            closeBtn.style.background = '#ef4444';
+            closeBtn.style.color = 'white';
+            closeBtn.style.transform = 'rotate(90deg)';
+        });
+        closeBtn.addEventListener('mouseleave', () => {
+            closeBtn.style.background = '#f1f5f9';
+            closeBtn.style.color = '#64748b';
+            closeBtn.style.transform = 'rotate(0deg)';
+        });
+        closeBtn.addEventListener('click', () => this._closeModal());
+
+        header.style.position = 'relative';
+        header.appendChild(title);
+        header.appendChild(subtitle);
+        header.appendChild(closeBtn);
+
+        return header;
+    }
+
+    _createSearchSection() {
+        const section = document.createElement('div');
+        section.style.cssText = `
+            padding: 1.25rem 1.25rem 1rem 1.25rem;
+        `;
+
+        const searchContainer = document.createElement('div');
+        searchContainer.style.cssText = `
+            position: relative;
+        `;
+
+        const searchIcon = document.createElement('div');
+        searchIcon.innerHTML = '🔍';
+        searchIcon.style.cssText = `
+            position: absolute;
+            left: 0.875rem;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 0.875rem;
+            color: #94a3b8;
+            pointer-events: none;
+        `;
+
         const searchInput = document.createElement('input');
         searchInput.placeholder = '搜索选项...';
         searchInput.className = 'custom-search-input';
         searchInput.style.cssText = `
             width: 100%;
-            padding: 8px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            margin-bottom: 12px;
+            padding: 0.75rem 1rem 0.75rem 2.5rem;
+            border: 2px solid #e2e8f0;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            background: white;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+            font-family: inherit;
+            outline: none;
         `;
+
+        searchInput.addEventListener('focus', () => {
+            searchInput.style.borderColor = '#667eea';
+            searchInput.style.boxShadow = '0 0 0 3px rgba(102, 126, 234, 0.1)';
+        });
+
+        searchInput.addEventListener('blur', () => {
+            searchInput.style.borderColor = '#e2e8f0';
+            searchInput.style.boxShadow = 'none';
+        });
+
         searchInput.addEventListener('input', (e) => {
             this._renderList(e.target.value);
         });
 
-        this._modal.appendChild(searchInput);
+        searchContainer.appendChild(searchIcon);
+        searchContainer.appendChild(searchInput);
+        section.appendChild(searchContainer);
 
-        // 列表区域
-        this._listBox = document.createElement('div');
-        this._listBox.style.cssText = `
-            flex: 1;
-            overflow-y: auto;
-            padding-right: 4px;
-        `;
-        this._modal.appendChild(this._listBox);
+        return section;
+    }
 
-        // 底部按钮
+    _createFooter() {
         const footer = document.createElement('div');
         footer.style.cssText = `
-            margin-top: 12px;
+            padding: 1rem 1.25rem;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border-top: 1px solid #e2e8f0;
             display: flex;
             justify-content: flex-end;
-            gap: 8px;
+            gap: 0.75rem;
         `;
 
         const cancelBtn = document.createElement('button');
         cancelBtn.textContent = '取消';
         cancelBtn.style.cssText = `
-            padding: 6px 12px;
-            background: #ccc;
-            border: none;
-            border-radius: 4px;
+            padding: 0.5rem 1rem;
+            background: white;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #374151;
+            transition: all 0.2s ease;
+            font-family: inherit;
         `;
+        cancelBtn.addEventListener('mouseenter', () => {
+            cancelBtn.style.borderColor = '#ef4444';
+            cancelBtn.style.color = '#ef4444';
+            cancelBtn.style.transform = 'translateY(-1px)';
+        });
+        cancelBtn.addEventListener('mouseleave', () => {
+            cancelBtn.style.borderColor = '#d1d5db';
+            cancelBtn.style.color = '#374151';
+            cancelBtn.style.transform = 'translateY(0)';
+        });
         cancelBtn.addEventListener('click', () => this._closeModal());
 
         const okBtn = document.createElement('button');
         okBtn.textContent = '确定';
         okBtn.style.cssText = `
-            padding: 6px 12px;
+            padding: 0.5rem 1rem;
             background: #007cba;
             color: white;
             border: none;
-            border-radius: 4px;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            font-family: inherit;
+            box-shadow: 0 2px 4px rgba(0, 124, 186, 0.2);
         `;
+        okBtn.addEventListener('mouseenter', () => {
+            okBtn.style.background = '#005a87';
+            okBtn.style.transform = 'translateY(-1px)';
+            okBtn.style.boxShadow = '0 4px 8px rgba(0, 124, 186, 0.3)';
+        });
+        okBtn.addEventListener('mouseleave', () => {
+            okBtn.style.background = '#007cba';
+            okBtn.style.transform = 'translateY(0)';
+            okBtn.style.boxShadow = '0 2px 4px rgba(0, 124, 186, 0.2)';
+        });
         okBtn.addEventListener('click', () => this._confirm());
 
         footer.appendChild(cancelBtn);
         footer.appendChild(okBtn);
-        this._modal.appendChild(footer);
-
-        this._overlay.appendChild(this._modal);
-        document.body.appendChild(this._overlay);
-
-        // 初始化列表
-        this._renderList('');
+        return footer;
     }
 
-    /** 搜索过滤 */
     _renderList(keyword) {
         this._listBox.innerHTML = '';
 
@@ -6706,53 +7038,126 @@ class CustomOptionsControl {
 
         if (list.length === 0) {
             const empty = document.createElement('div');
-            empty.textContent = `未找到相关结果`;
-            empty.style.textAlign = 'center';
-            empty.style.padding = '20px';
+            empty.style.cssText = `
+                text-align: center;
+                padding: 2.5rem 1rem;
+                color: #94a3b8;
+            `;
+            empty.innerHTML = `
+                <div style="font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.6;">🔍</div>
+                <div style="font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; color: #64748b;">未找到相关结果</div>
+                <div style="font-size: 0.8125rem;">尝试使用其他关键词搜索</div>
+            `;
             this._listBox.appendChild(empty);
             return;
         }
 
-        list.forEach((opt) => {
+        // 添加选项统计
+        const stats = document.createElement('div');
+        stats.style.cssText = `
+            padding: 0.5rem 0;
+            font-size: 0.8125rem;
+            color: #64748b;
+            border-bottom: 1px solid #f1f5f9;
+            margin-bottom: 0.5rem;
+        `;
+        stats.textContent = `找到 ${list.length} 个相关选项`;
+        this._listBox.appendChild(stats);
+
+        list.forEach((opt, index) => {
             const item = document.createElement('label');
+            item.className = 'custom-list-item';
             item.style.cssText = `
                 display: flex;
                 align-items: center;
-                padding: 6px 0;
+                padding: 0.75rem;
                 cursor: pointer;
+                border-radius: 0.5rem;
+                margin-bottom: 0.375rem;
+                transition: all 0.2s ease;
+                border: 2px solid transparent;
+                background: white;
+                position: relative;
+                overflow: hidden;
             `;
 
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
+            checkbox.className = 'custom-checkbox';
             checkbox.value = opt.value;
             checkbox.checked = this._selectedOptions.includes(opt.value);
-            checkbox.style.marginRight = '8px';
-            checkbox.addEventListener('change', () => this._toggle(opt.value));
+            checkbox.style.marginRight = '0.75rem';
 
             const labelSpan = document.createElement('span');
             labelSpan.innerHTML = this._highlight(opt.label, keyword);
+            labelSpan.style.cssText = `
+                flex: 1;
+                font-size: 0.875rem;
+                color: #374151;
+                line-height: 1.4;
+                font-weight: 500;
+            `;
+
+            // 添加选中状态的视觉反馈
+            if (checkbox.checked) {
+                item.style.backgroundColor = '#f0f4ff';
+                item.style.borderColor = '#667eea';
+            }
+
+            checkbox.addEventListener('change', () => {
+                this._toggle(opt.value);
+
+                // 更新项目样式
+                if (checkbox.checked) {
+                    item.style.backgroundColor = '#f0f4ff';
+                    item.style.borderColor = '#667eea';
+                } else {
+                    item.style.backgroundColor = 'white';
+                    item.style.borderColor = 'transparent';
+                }
+
+                // 更新标题中的统计信息
+                const subtitle = this._modal.querySelector('p');
+                if (subtitle) {
+                    subtitle.textContent = `共 ${this._originalOptions.length} 个选项，已选择 ${this._selectedOptions.length} 个`;
+                }
+            });
 
             item.appendChild(checkbox);
             item.appendChild(labelSpan);
 
+            // 添加进入动画
+            item.style.opacity = '0';
+            item.style.transform = 'translateY(10px)';
             this._listBox.appendChild(item);
+
+            setTimeout(() => {
+                item.style.transition = 'all 0.3s ease';
+                item.style.opacity = '1';
+                item.style.transform = 'translateY(0)';
+            }, index * 30);
         });
     }
 
-    /** 高亮关键词 */
     _highlight(text, key) {
         if (!key) return text;
-        return text.replace(new RegExp(`(${key})`, 'gi'), `<mark>$1</mark>`);
+        const regex = new RegExp(`(${this._escapeRegExp(key)})`, 'gi');
+        return text.replace(regex, '<mark style="background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-weight: 600;">$1</mark>');
+    }
+
+    _escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
 
-    /** 选择切换 */
     _toggle(value) {
         const index = this._selectedOptions.indexOf(value);
-        if (index >= 0) this._selectedOptions.splice(index, 1);
-        else this._selectedOptions.push(value);
+        if (index >= 0) {
+            this._selectedOptions.splice(index, 1);
+        } else {
+            this._selectedOptions.push(value);
+        }
     }
 
-    /** 点击确定 */
     _confirm() {
         this._onConfirm({
             selectedOptions: this._selectedOptions,
@@ -6764,340 +7169,104 @@ class CustomOptionsControl {
         this._closeModal();
     }
 
-    /** 销毁弹窗 */
     _closeModal() {
         if (this._overlay) {
-            document.body.removeChild(this._overlay);
-            this._overlay = null;
-            this._modal = null;
+            // 添加退出动画
+            this._modal.style.animation = 'modalSlideIn 0.2s ease-out reverse';
+            this._overlay.style.animation = 'modalBackdropFadeIn 0.2s ease-out reverse';
+
+            setTimeout(() => {
+                if (this._overlay && this._overlay.parentNode) {
+                    document.body.removeChild(this._overlay);
+                }
+                this._overlay = null;
+                this._modal = null;
+            }, 200);
+
+            document.removeEventListener('keydown', this._handleKeydown);
         }
     }
 
     onRemove() {
-        if (this._container) this._container.remove();
+        if (this._container) {
+            this._container.remove();
+        }
         this._closeModal();
     }
 }
 
-// 自定义控件类：ToggleControl（带搜索过滤功能）
+// 自定义控件类：ToggleControl
 class CustomToggleControl {
     /**
      * 构造函数
      * @param {Object} options
-     * @param {string} options.name - 控件名称
-     * @param {string} options.field - 控制的字段名
-     * @param {boolean} options.defaultValue - 默认值
-     * @param {string} options.svgIcon - SVG 图标字符串
-     * @param {Function} [options.onToggle] - 状态切换回调
-     * @param {Array} [options.options] - 可选项目数组 [{id, name, icon?}]
-     * @param {Function} [options.onOptionSelect] - 选项选择回调
-     * @param {boolean} [options.showSearch] - 是否显示搜索框，默认 true
+     * @param {string} options.name - 控件名称（用于识别，可选展示）
+     * @param {string} options.field - 控制的字段名，对应 map.SourceMap[field]
+     * @param {boolean} options.defaultValue - 默认值（当 field 未定义时使用）
+     * @param {string} options.svgIcon - SVG 图标字符串，例如 '<svg>...</svg>'
+     * @param {Function} [options.onToggle] - 可选的回调函数，状态切换后调用，参数为最新的布尔值
      */
-    constructor({
-        name,
-        field,
-        defaultValue = false,
-        svgIcon,
-        onToggle,
-        options = [],
-        onOptionSelect,
-        showSearch = true
-    }) {
+    constructor({ name, field, defaultValue = false, svgIcon, onToggle }) {
         this.name = name;
         this.field = field;
         this.defaultValue = defaultValue;
         this.svgIcon = svgIcon;
-        this.onToggle = onToggle;
-        this.options = options; // 可选项目
-        this.onOptionSelect = onOptionSelect; // 选项选择回调
-        this.showSearch = showSearch; // 是否显示搜索框
+        this.onToggle = onToggle; // ✅ 新增：回调函数
 
-        // 控件状态
+        // 控件容器
         this._container = null;
         this._button = null;
-        this._dropdown = null;
-        this._searchInput = null;
-        this._optionsList = null;
-        this.isActive = false;
-        this.isDropdownOpen = false;
-        this.filteredOptions = [...options]; // 过滤后的选项
-
-        // 绑定事件处理函数
-        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
+        this.isActive = false; // 当前是否为激活状态（高亮/true）
     }
 
     // Mapbox 要求的 onAdd 方法
     onAdd(map) {
         this.map = map;
 
-        // 创建外层容器
+        // 创建外层容器 div
         this._container = document.createElement('div');
-        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-toggle-control';
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
 
-        // 创建主按钮
+        // 创建 button 元素
         this._button = document.createElement('button');
         this._button.type = 'button';
         this._button.innerHTML = this.svgIcon;
-        this._button.title = this.name;
 
         // 设置按钮样式
-        this._setupButtonStyles();
+        this._button.style.cursor = 'pointer';
+        this._button.style.border = 'none';
+        this._button.style.background = 'none';
+        this._button.style.padding = '0';
+        this._button.style.display = 'flex';
+        this._button.style.alignItems = 'center';
+        this._button.style.justifyContent = 'center';
 
         // 初始化状态
         this.updateStatus();
 
-        // 绑定事件
-        this._button.addEventListener('click', (e) => {
-            e.stopPropagation();
+        // 绑定点击事件
+        this._button.addEventListener('click', () => {
             this.toggle();
         });
 
         this._container.appendChild(this._button);
 
-        // 创建下拉菜单（如果有选项）
-        if (this.options.length > 0) {
-            this._createDropdown();
-        }
-
         return this._container;
     }
 
-    // 设置按钮样式
-    _setupButtonStyles() {
-        Object.assign(this._button.style, {
-            cursor: 'pointer',
-            border: 'none',
-            background: 'none',
-            padding: '8px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: '4px',
-            transition: 'all 0.2s ease'
-        });
-    }
-
-    // 创建下拉菜单
-    _createDropdown() {
-        // 创建下拉容器
-        this._dropdown = document.createElement('div');
-        this._dropdown.className = 'custom-toggle-dropdown';
-        Object.assign(this._dropdown.style, {
-            position: 'absolute',
-            top: '100%',
-            right: '0',
-            backgroundColor: 'white',
-            border: '1px solid #ccc',
-            borderRadius: '4px',
-            boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
-            zIndex: '1000',
-            minWidth: '200px',
-            maxWidth: '300px',
-            display: 'none',
-            marginTop: '4px'
-        });
-
-        // 创建搜索框（如果需要）
-        if (this.showSearch && this.options.length > 5) {
-            this._createSearchBox();
-        }
-
-        // 创建选项列表
-        this._createOptionsList();
-
-        this._container.appendChild(this._dropdown);
-    }
-
-    // 创建搜索框
-    _createSearchBox() {
-        const searchContainer = document.createElement('div');
-        Object.assign(searchContainer.style, {
-            padding: '8px',
-            borderBottom: '1px solid #eee'
-        });
-
-        this._searchInput = document.createElement('input');
-        this._searchInput.type = 'text';
-        this._searchInput.placeholder = '搜索...';
-        this._searchInput.style.cssText = `
-            width: 100%;
-            padding: 6px 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            fontSize: 12px;
-            outline: none;
-            box-sizing: border-box;
-        `;
-
-        // 绑定搜索事件
-        this._searchInput.addEventListener('input', (e) => {
-            this._filterOptions(e.target.value);
-        });
-
-        // 阻止下拉菜单关闭
-        this._searchInput.addEventListener('click', (e) => {
-            e.stopPropagation();
-        });
-
-        searchContainer.appendChild(this._searchInput);
-        this._dropdown.appendChild(searchContainer);
-    }
-
-    // 创建选项列表
-    _createOptionsList() {
-        this._optionsList = document.createElement('div');
-        Object.assign(this._optionsList.style, {
-            maxHeight: '200px',
-            overflowY: 'auto',
-            padding: '4px 0'
-        });
-
-        this._renderOptionsList();
-        this._dropdown.appendChild(this._optionsList);
-    }
-
-    // 渲染选项列表
-    _renderOptionsList() {
-        if (!this._optionsList) return;
-
-        this._optionsList.innerHTML = '';
-
-        this.filteredOptions.forEach(option => {
-            const optionItem = document.createElement('div');
-            optionItem.className = 'custom-toggle-option';
-            optionItem.dataset.id = option.id;
-
-            Object.assign(optionItem.style, {
-                padding: '8px 12px',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '8px',
-                fontSize: '13px',
-                transition: 'background-color 0.2s'
-            });
-
-            // 添加图标（如果有）
-            if (option.icon) {
-                const icon = document.createElement('span');
-                icon.innerHTML = option.icon;
-                icon.style.fontSize = '14px';
-                optionItem.appendChild(icon);
-            }
-
-            // 添加文本
-            const text = document.createElement('span');
-            text.textContent = option.name;
-            optionItem.appendChild(text);
-
-            // 绑定点击事件
-            optionItem.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this._selectOption(option);
-            });
-
-            // 鼠标悬停效果
-            optionItem.addEventListener('mouseenter', () => {
-                optionItem.style.backgroundColor = '#f5f5f5';
-            });
-
-            optionItem.addEventListener('mouseleave', () => {
-                optionItem.style.backgroundColor = 'transparent';
-            });
-
-            this._optionsList.appendChild(optionItem);
-        });
-
-        // 如果没有匹配的选项
-        if (this.filteredOptions.length === 0) {
-            const noResults = document.createElement('div');
-            noResults.textContent = '无匹配项';
-            Object.assign(noResults.style, {
-                padding: '12px',
-                textAlign: 'center',
-                color: '#999',
-                fontSize: '12px'
-            });
-            this._optionsList.appendChild(noResults);
-        }
-    }
-
-    // 过滤选项
-    _filterOptions(searchTerm) {
-        const term = searchTerm.toLowerCase().trim();
-
-        if (!term) {
-            this.filteredOptions = [...this.options];
-        } else {
-            this.filteredOptions = this.options.filter(option =>
-                option.name.toLowerCase().includes(term) ||
-                (option.id && option.id.toString().toLowerCase().includes(term))
-            );
-        }
-
-        this._renderOptionsList();
-    }
-
-    // 选择选项
-    _selectOption(option) {
-        // 调用选项选择回调
-        if (this.onOptionSelect) {
-            this.onOptionSelect(option);
-        }
-
-        // 关闭下拉菜单
-        this.closeDropdown();
-    }
-
-    // 切换下拉菜单显示状态
-    toggle() {
-        if (this.isDropdownOpen) {
-            this.closeDropdown();
-        } else {
-            this.openDropdown();
-        }
-    }
-
-    // 打开下拉菜单
-    openDropdown() {
-        if (!this._dropdown || this.options.length === 0) return;
-
-        this.isDropdownOpen = true;
-        this._dropdown.style.display = 'block';
-
-        // 添加全局点击监听
-        document.addEventListener('click', this._boundHandleClickOutside);
-
-        // 聚焦搜索框
-        if (this._searchInput) {
-            setTimeout(() => {
-                this._searchInput.focus();
-                this._searchInput.value = '';
-                this._filterOptions('');
-            }, 100);
-        }
-    }
-
-    // 关闭下拉菜单
-    closeDropdown() {
-        if (!this._dropdown) return;
-
-        this.isDropdownOpen = false;
-        this._dropdown.style.display = 'none';
-
-        // 移除全局点击监听
-        document.removeEventListener('click', this._boundHandleClickOutside);
-    }
-
-    // 处理外部点击
-    _handleClickOutside(event) {
-        if (!this._container.contains(event.target)) {
-            this.closeDropdown();
+    // Mapbox 要求的 onRemove 方法
+    onRemove() {
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
         }
+        this.map = null;
+        this._container = null;
+        this._button = null;
     }
 
-    // 更新控件状态
+    // 更新控件状态（根据当前 field 值）
     updateStatus() {
+        // 从 map.SourceMap 中获取当前 field 的值，如果不存在则使用 defaultValue
         let currentValue = this.defaultValue;
 
         if (
@@ -7108,22 +7277,21 @@ class CustomToggleControl {
             currentValue = this.map.SourceMap[this.field];
         }
 
-        this.isActive = currentValue;
+        this.isActive = currentValue; // true 表示激活，false 表示未激活
 
         // 更新按钮样式
         if (this.isActive) {
             this._button.style.opacity = '1';
             this._button.style.filter = 'none';
-            this._button.style.backgroundColor = '#e6f3ff';
         } else {
-            this._button.style.opacity = '0.7';
+            this._button.style.opacity = '0.4';
             this._button.style.filter = 'grayscale(100%)';
-            this._button.style.backgroundColor = 'transparent';
         }
     }
 
-    // 切换状态（保持原有功能）
-    toggleState() {
+    // 切换状态
+    toggle() {
+        // 获取当前值
         let currentValue = this.defaultValue;
 
         if (
@@ -7134,34 +7302,22 @@ class CustomToggleControl {
             currentValue = this.map.SourceMap[this.field];
         }
 
+        // 切换值
         const newValue = !currentValue;
 
+        // 更新到 map.SourceMap 中
         if (this.map && this.map.SourceMap) {
             this.map.SourceMap[this.field] = newValue;
         }
 
+        // 更新内部状态
         this.isActive = newValue;
-        this.updateStatus();
-
-        if (this.onToggle) {
-            this.onToggle(newValue);
-        }
-    }
-
-    // Mapbox 要求的 onRemove 方法
-    onRemove() {
-        this.closeDropdown();
 
-        if (this._container && this._container.parentNode) {
-            this._container.parentNode.removeChild(this._container);
-        }
+        // 更新 UI 样式
+        this.updateStatus();
 
-        this.map = null;
-        this._container = null;
-        this._button = null;
-        this._dropdown = null;
-        this._searchInput = null;
-        this._optionsList = null;
+        // ✅ 调用回调函数（如果传入了 onToggle），并传入最新的值
+        this.onToggle?.(newValue); // 安全调用，仅当函数存在时才执行
     }
 }