raintee-maputils 1.0.34 → 1.0.36

package/dist/index.js

@@ -6561,245 +6561,959 @@ class RulerControl {
 
 class CustomOptionsControl {
     constructor(args) {
-        const { options, onConfirm } = args;
+        const { title, options, onConfirm, icon } = args;
 
-        this._container = null;
         this._map = null;
+        this._container = null;
 
+        this._title = title || '';
         this._options = options || [];
+        this._icon = icon || null;
         this._onConfirm = onConfirm || (() => { });
-
-        if (!this._options || !Array.isArray(this._options)) {
-            console.error('请传入有效的 options 参数（数组）');
-        }
+        this._originalOptions = [...this._options];
+        this._selectedOptions = [];
     }
 
     onAdd(map) {
         this._map = map;
 
-        // 创建控件外层容器
         this._container = document.createElement('div');
         this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-options-control';
 
-        // 创建主按钮（初始只显示“三维模型”文字，点击展开）
         const mainButton = document.createElement('button');
         mainButton.style.cssText = `
-            width: 100%;
-            height: 100%;
-            padding: 0.25rem 0.5rem;
-            margin: 0;
-            border: 1px solid #ccc;
+            padding: 0;
             background: white;
-            border-radius: 4px;
+            border: 0.0625rem solid #ccc;
             cursor: pointer;
-            font-size: 14px;
-            text-align: left;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.375rem;
         `;
-        mainButton.textContent = '三维模型';
-        mainButton.addEventListener('click', () => this._toggleExpanded());
 
-        this._container.appendChild(mainButton);
+        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);
+        }
 
-        // 创建隐藏的选项面板（默认不显示）
-        this._panel = document.createElement('div');
-        this._panel.style.display = 'none';
-        this._panel.style.padding = '10px';
-        this._container.appendChild(this._panel);
+        mainButton.addEventListener('click', () => {
+            this._showModal();
+        });
+
+        this._container.appendChild(mainButton);
 
-        // 创建选项列表和按钮组
-        this._renderOptionsPanel();
+        // 添加全局样式
+        this._addGlobalStyles();
 
         return this._container;
     }
 
-    _toggleExpanded() {
-        const isExpanded = this._panel.style.display !== 'none';
-        this._setExpanded(!isExpanded);
+    _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);
     }
 
-    _setExpanded(isExpanded) {
-        this._panel.style.display = isExpanded ? 'block' : 'none';
+    _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);
+            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: 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;
+            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('');
     }
 
-    _renderOptionsPanel() {
-        // 清空面板内容
-        this._panel.innerHTML = '';
+    _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;
+        `;
 
-        // 创建复选框选项列表
-        this._options.forEach((opt) => {
-            const optionDiv = document.createElement('div');
-            optionDiv.style.marginBottom = '6px';
+        // 添加图标
+        const icon = document.createElement('span');
+        icon.innerHTML = '📋';
+        icon.style.fontSize = '1.25rem';
+        title.insertBefore(icon, title.firstChild);
 
-            const label = document.createElement('label');
-            label.style.display = 'flex';
-            label.style.alignItems = 'center';
-            label.style.cursor = 'pointer';
+        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 checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.value = opt.value;
-            checkbox.style.marginRight = '8px';
+        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());
 
-            // 绑定选中状态
-            checkbox.checked = this._getSelectedOption(opt.value);
-            checkbox.addEventListener('change', () => this._toggleOption(opt.value));
+        header.style.position = 'relative';
+        header.appendChild(title);
+        header.appendChild(subtitle);
+        header.appendChild(closeBtn);
 
-            const span = document.createElement('span');
-            span.textContent = opt.label;
+        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;
+        `;
 
-            label.appendChild(checkbox);
-            label.appendChild(span);
-            optionDiv.appendChild(label);
-            this._panel.appendChild(optionDiv);
+        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: 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)';
         });
 
-        // 创建按钮组：取消 / 确定
-        const buttonGroup = document.createElement('div');
-        buttonGroup.style.marginTop = '12px';
-        buttonGroup.style.display = 'flex';
-        buttonGroup.style.gap = '8px';
-        buttonGroup.style.justifyContent = 'flex-end';
-
-        const cancelButton = document.createElement('button');
-        cancelButton.textContent = '取消';
-        cancelButton.style.cssText = `
-            padding: 6px 12px;
-            background: #ccc;
-            border: none;
-            border-radius: 4px;
+        searchInput.addEventListener('blur', () => {
+            searchInput.style.borderColor = '#e2e8f0';
+            searchInput.style.boxShadow = 'none';
+        });
+
+        searchInput.addEventListener('input', (e) => {
+            this._renderList(e.target.value);
+        });
+
+        searchContainer.appendChild(searchIcon);
+        searchContainer.appendChild(searchInput);
+        section.appendChild(searchContainer);
+
+        return section;
+    }
+
+    _createFooter() {
+        const footer = document.createElement('div');
+        footer.style.cssText = `
+            padding: 1rem 1.25rem;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border-top: 1px solid #e2e8f0;
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.75rem;
+        `;
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = '取消';
+        cancelBtn.style.cssText = `
+            padding: 0.5rem 1rem;
+            background: white;
+            border: 1px solid #d1d5db;
+            border-radius: 0.375rem;
             cursor: pointer;
-            width: auto;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #374151;
+            transition: all 0.2s ease;
+            font-family: inherit;
         `;
-        cancelButton.addEventListener('click', () => this._handleCancel());
+        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 confirmButton = document.createElement('button');
-        confirmButton.textContent = '确定';
-        confirmButton.style.cssText = `
-            padding: 6px 12px;
+        const okBtn = document.createElement('button');
+        okBtn.textContent = '确定';
+        okBtn.style.cssText = `
+            padding: 0.5rem 1rem;
             background: #007cba;
             color: white;
             border: none;
-            border-radius: 4px;
+            border-radius: 0.375rem;
             cursor: pointer;
-            width: auto;
+            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);
+        return footer;
+    }
+
+    _renderList(keyword) {
+        this._listBox.innerHTML = '';
+
+        const list = keyword
+            ? this._originalOptions.filter(
+                (o) =>
+                    o.label.toLowerCase().includes(keyword.toLowerCase()) ||
+                    String(o.value).toLowerCase().includes(keyword.toLowerCase())
+            )
+            : this._originalOptions;
+
+        if (list.length === 0) {
+            const empty = document.createElement('div');
+            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;
+        }
+
+        // 添加选项统计
+        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;
         `;
-        confirmButton.addEventListener('click', () => this._handleConfirm());
+        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: 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 = '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';
+                }
 
-        buttonGroup.appendChild(cancelButton);
-        buttonGroup.appendChild(confirmButton);
-        this._panel.appendChild(buttonGroup);
+                // 更新标题中的统计信息
+                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);
+        });
     }
 
-    _getSelectedOption(value) {
-        return this._selectedOptions?.includes(value) || false;
+    _highlight(text, key) {
+        if (!key) return text;
+        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>');
     }
 
-    _toggleOption(value) {
-        if (!this._selectedOptions) this._selectedOptions = [];
+    _escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
 
-        const idx = this._selectedOptions.indexOf(value);
-        if (idx > -1) {
-            this._selectedOptions.splice(idx, 1);
+    _toggle(value) {
+        const index = this._selectedOptions.indexOf(value);
+        if (index >= 0) {
+            this._selectedOptions.splice(index, 1);
         } else {
             this._selectedOptions.push(value);
         }
-
-        // 可选：重新渲染复选框状态（如果需要动态更新 UI，但目前 onchange 已处理）
     }
 
-    _handleConfirm() {
-        this._setExpanded(false);
-
+    _confirm() {
         this._onConfirm({
-            selectedOptions: this._selectedOptions || [],
-            unselectedOptions: this._options.filter((item) => !this._selectedOptions?.includes(item.value)),
-            allOptions: this._options,
+            selectedOptions: this._selectedOptions,
+            unselectedOptions: this._originalOptions.filter(
+                (o) => !this._selectedOptions.includes(o.value)
+            ),
+            allOptions: this._originalOptions
         });
+        this._closeModal();
     }
 
-    _handleCancel() {
-        this._setExpanded(false);
+    _closeModal() {
+        if (this._overlay) {
+            // 添加退出动画
+            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.parentNode) {
-            this._container.parentNode.removeChild(this._container);
+        if (this._container) {
+            this._container.remove();
         }
+        this._closeModal();
     }
 }
 
-// 自定义控件类：ToggleControl
+// 自定义控件类：ToggleControl（带搜索过滤功能）
 class CustomToggleControl {
     /**
      * 构造函数
      * @param {Object} options
-     * @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] - 可选的回调函数，状态切换后调用，参数为最新的布尔值
+     * @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
      */
-    constructor({ name, field, defaultValue = false, svgIcon, onToggle }) {
+    constructor({
+        name,
+        field,
+        defaultValue = false,
+        svgIcon,
+        onToggle,
+        options = [],
+        onOptionSelect,
+        showSearch = true
+    }) {
         this.name = name;
         this.field = field;
         this.defaultValue = defaultValue;
         this.svgIcon = svgIcon;
-        this.onToggle = onToggle; // ✅ 新增：回调函数
+        this.onToggle = onToggle;
+        this.options = options; // 可选项目
+        this.onOptionSelect = onOptionSelect; // 选项选择回调
+        this.showSearch = showSearch; // 是否显示搜索框
 
-        // 控件容器
+        // 控件状态
         this._container = null;
         this._button = null;
-        this.isActive = false; // 当前是否为激活状态（高亮/true）
+        this._dropdown = null;
+        this._searchInput = null;
+        this._optionsList = null;
+        this.isActive = false;
+        this.isDropdownOpen = false;
+        this.filteredOptions = [...options]; // 过滤后的选项
+
+        // 绑定事件处理函数
+        this._boundHandleClickOutside = this._handleClickOutside.bind(this);
     }
 
     // Mapbox 要求的 onAdd 方法
     onAdd(map) {
         this.map = map;
 
-        // 创建外层容器 div
+        // 创建外层容器
         this._container = document.createElement('div');
-        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group custom-toggle-control';
 
-        // 创建 button 元素
+        // 创建主按钮
         this._button = document.createElement('button');
         this._button.type = 'button';
         this._button.innerHTML = this.svgIcon;
+        this._button.title = this.name;
 
         // 设置按钮样式
-        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._setupButtonStyles();
 
         // 初始化状态
         this.updateStatus();
 
-        // 绑定点击事件
-        this._button.addEventListener('click', () => {
+        // 绑定事件
+        this._button.addEventListener('click', (e) => {
+            e.stopPropagation();
             this.toggle();
         });
 
         this._container.appendChild(this._button);
 
+        // 创建下拉菜单（如果有选项）
+        if (this.options.length > 0) {
+            this._createDropdown();
+        }
+
         return this._container;
     }
 
-    // Mapbox 要求的 onRemove 方法
-    onRemove() {
-        if (this._container && this._container.parentNode) {
-            this._container.parentNode.removeChild(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.map = null;
-        this._container = null;
-        this._button = null;
+
+        // 创建选项列表
+        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);
     }
 
-    // 更新控件状态（根据当前 field 值）
+    // 创建选项列表
+    _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();
+        }
+    }
+
+    // 更新控件状态
     updateStatus() {
-        // 从 map.SourceMap 中获取当前 field 的值，如果不存在则使用 defaultValue
         let currentValue = this.defaultValue;
 
         if (
@@ -6810,21 +7524,22 @@ class CustomToggleControl {
             currentValue = this.map.SourceMap[this.field];
         }
 
-        this.isActive = currentValue; // true 表示激活，false 表示未激活
+        this.isActive = currentValue;
 
         // 更新按钮样式
         if (this.isActive) {
             this._button.style.opacity = '1';
             this._button.style.filter = 'none';
+            this._button.style.backgroundColor = '#e6f3ff';
         } else {
-            this._button.style.opacity = '0.4';
+            this._button.style.opacity = '0.7';
             this._button.style.filter = 'grayscale(100%)';
+            this._button.style.backgroundColor = 'transparent';
         }
     }
 
-    // 切换状态
-    toggle() {
-        // 获取当前值
+    // 切换状态（保持原有功能）
+    toggleState() {
         let currentValue = this.defaultValue;
 
         if (
@@ -6835,22 +7550,34 @@ 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;
-
-        // 更新 UI 样式
         this.updateStatus();
 
-        // ✅ 调用回调函数（如果传入了 onToggle），并传入最新的值
-        this.onToggle?.(newValue); // 安全调用，仅当函数存在时才执行
+        if (this.onToggle) {
+            this.onToggle(newValue);
+        }
+    }
+
+    // Mapbox 要求的 onRemove 方法
+    onRemove() {
+        this.closeDropdown();
+
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
+        }
+
+        this.map = null;
+        this._container = null;
+        this._button = null;
+        this._dropdown = null;
+        this._searchInput = null;
+        this._optionsList = null;
     }
 }