raintee-maputils 1.0.34 → 1.0.35

package/dist/index.js

@@ -6561,245 +6561,543 @@ class RulerControl {
 
 class CustomOptionsControl {
     constructor(args) {
-        const { options, onConfirm } = args;
+        const { title, options, onConfirm } = args;
 
-        this._container = null;
         this._map = null;
+        this._container = null;
 
         this._options = options || [];
+        this._title = title || '标题';
         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.textContent = this._title;
         mainButton.style.cssText = `
-            width: 100%;
-            height: 100%;
-            padding: 0.25rem 0.5rem;
-            margin: 0;
-            border: 1px solid #ccc;
+            padding: 4px 8px;
             background: white;
-            border-radius: 4px;
+            border: 1px solid #ccc;
             cursor: pointer;
-            font-size: 14px;
-            text-align: left;
         `;
-        mainButton.textContent = '三维模型';
-        mainButton.addEventListener('click', () => this._toggleExpanded());
 
-        this._container.appendChild(mainButton);
-
-        // 创建隐藏的选项面板（默认不显示）
-        this._panel = document.createElement('div');
-        this._panel.style.display = 'none';
-        this._panel.style.padding = '10px';
-        this._container.appendChild(this._panel);
-
-        // 创建选项列表和按钮组
-        this._renderOptionsPanel();
+        mainButton.addEventListener('click', () => {
+            this._showModal();
+        });
 
+        this._container.appendChild(mainButton);
         return this._container;
     }
 
-    _toggleExpanded() {
-        const isExpanded = this._panel.style.display !== 'none';
-        this._setExpanded(!isExpanded);
-    }
-
-    _setExpanded(isExpanded) {
-        this._panel.style.display = isExpanded ? 'block' : 'none';
-    }
-
-    _renderOptionsPanel() {
-        // 清空面板内容
-        this._panel.innerHTML = '';
-
-        // 创建复选框选项列表
-        this._options.forEach((opt) => {
-            const optionDiv = document.createElement('div');
-            optionDiv.style.marginBottom = '6px';
-
-            const label = document.createElement('label');
-            label.style.display = 'flex';
-            label.style.alignItems = 'center';
-            label.style.cursor = 'pointer';
+    /** 创建遮罩弹窗 */
+    _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;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        `;
 
-            const checkbox = document.createElement('input');
-            checkbox.type = 'checkbox';
-            checkbox.value = opt.value;
-            checkbox.style.marginRight = '8px';
+        // 弹窗容器
+        this._modal = document.createElement('div');
+        this._modal.className = 'custom-modal';
+        this._modal.style.cssText = `
+            width: 360px;
+            max-height: 80vh;
+            overflow: hidden;
+            background: white;
+            border-radius: 8px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+        `;
 
-            // 绑定选中状态
-            checkbox.checked = this._getSelectedOption(opt.value);
-            checkbox.addEventListener('change', () => this._toggleOption(opt.value));
+        // 搜索框
+        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;
+        `;
+        searchInput.addEventListener('input', (e) => {
+            this._renderList(e.target.value);
+        });
 
-            const span = document.createElement('span');
-            span.textContent = opt.label;
+        this._modal.appendChild(searchInput);
 
-            label.appendChild(checkbox);
-            label.appendChild(span);
-            optionDiv.appendChild(label);
-            this._panel.appendChild(optionDiv);
-        });
+        // 列表区域
+        this._listBox = document.createElement('div');
+        this._listBox.style.cssText = `
+            flex: 1;
+            overflow-y: auto;
+            padding-right: 4px;
+        `;
+        this._modal.appendChild(this._listBox);
 
-        // 创建按钮组：取消 / 确定
-        const buttonGroup = document.createElement('div');
-        buttonGroup.style.marginTop = '12px';
-        buttonGroup.style.display = 'flex';
-        buttonGroup.style.gap = '8px';
-        buttonGroup.style.justifyContent = 'flex-end';
+        // 底部按钮
+        const footer = document.createElement('div');
+        footer.style.cssText = `
+            margin-top: 12px;
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+        `;
 
-        const cancelButton = document.createElement('button');
-        cancelButton.textContent = '取消';
-        cancelButton.style.cssText = `
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = '取消';
+        cancelBtn.style.cssText = `
             padding: 6px 12px;
             background: #ccc;
             border: none;
             border-radius: 4px;
-            cursor: pointer;
-            width: auto;
         `;
-        cancelButton.addEventListener('click', () => this._handleCancel());
+        cancelBtn.addEventListener('click', () => this._closeModal());
 
-        const confirmButton = document.createElement('button');
-        confirmButton.textContent = '确定';
-        confirmButton.style.cssText = `
+        const okBtn = document.createElement('button');
+        okBtn.textContent = '确定';
+        okBtn.style.cssText = `
             padding: 6px 12px;
             background: #007cba;
             color: white;
             border: none;
             border-radius: 4px;
-            cursor: pointer;
-            width: auto;
         `;
-        confirmButton.addEventListener('click', () => this._handleConfirm());
+        okBtn.addEventListener('click', () => this._confirm());
 
-        buttonGroup.appendChild(cancelButton);
-        buttonGroup.appendChild(confirmButton);
-        this._panel.appendChild(buttonGroup);
-    }
+        footer.appendChild(cancelBtn);
+        footer.appendChild(okBtn);
+        this._modal.appendChild(footer);
 
-    _getSelectedOption(value) {
-        return this._selectedOptions?.includes(value) || false;
-    }
+        this._overlay.appendChild(this._modal);
+        document.body.appendChild(this._overlay);
 
-    _toggleOption(value) {
-        if (!this._selectedOptions) this._selectedOptions = [];
+        // 初始化列表
+        this._renderList('');
+    }
 
-        const idx = this._selectedOptions.indexOf(value);
-        if (idx > -1) {
-            this._selectedOptions.splice(idx, 1);
-        } else {
-            this._selectedOptions.push(value);
+    /** 搜索过滤 */
+    _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.textContent = `未找到相关结果`;
+            empty.style.textAlign = 'center';
+            empty.style.padding = '20px';
+            this._listBox.appendChild(empty);
+            return;
         }
 
-        // 可选：重新渲染复选框状态（如果需要动态更新 UI，但目前 onchange 已处理）
+        list.forEach((opt) => {
+            const item = document.createElement('label');
+            item.style.cssText = `
+                display: flex;
+                align-items: center;
+                padding: 6px 0;
+                cursor: pointer;
+            `;
+
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.value = opt.value;
+            checkbox.checked = this._selectedOptions.includes(opt.value);
+            checkbox.style.marginRight = '8px';
+            checkbox.addEventListener('change', () => this._toggle(opt.value));
+
+            const labelSpan = document.createElement('span');
+            labelSpan.innerHTML = this._highlight(opt.label, keyword);
+
+            item.appendChild(checkbox);
+            item.appendChild(labelSpan);
+
+            this._listBox.appendChild(item);
+        });
     }
 
-    _handleConfirm() {
-        this._setExpanded(false);
+    /** 高亮关键词 */
+    _highlight(text, key) {
+        if (!key) return text;
+        return text.replace(new RegExp(`(${key})`, 'gi'), `<mark>$1</mark>`);
+    }
+
+    /** 选择切换 */
+    _toggle(value) {
+        const index = this._selectedOptions.indexOf(value);
+        if (index >= 0) this._selectedOptions.splice(index, 1);
+        else this._selectedOptions.push(value);
+    }
 
+    /** 点击确定 */
+    _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) {
+            document.body.removeChild(this._overlay);
+            this._overlay = null;
+            this._modal = null;
+        }
     }
 
     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 +7108,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 +7134,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;
     }
 }