raintee-maputils 1.0.42 → 1.0.44

package/dist/index.js

@@ -6738,6 +6738,583 @@ class RulerControl {
 	}
 }
 
+/**
+ * CustomSearchSelectControl - 紧凑型 Mapbox 控件
+ * 优化UI布局，提高空间利用率
+ */
+class CustomSearchSelectControl {
+    /**
+     * 构造函数
+     * @param {Object} options 配置选项
+     * @param {Array} options.list 选项列表
+     * @param {Function} options.onSelect 选中回调函数
+     * @param {string} options.placeholder 搜索框占位符
+     * @param {string} options.title 弹窗标题
+     * @param {boolean} options.showSearch 是否显示搜索框
+     * @param {boolean} options.compactMode 是否启用紧凑模式
+     */
+    constructor(options = {}) {
+        this.options = {
+            list: [],
+            onSelect: () => { },
+            onCancel: () => { },
+            placeholder: '搜索...',
+            title: '选择',
+            showSearch: true,
+            compactMode: true, // 新增：紧凑模式
+            maxHeight: '60vh', // 新增：最大高度
+            width: '60vw', // 新增：弹窗宽度
+            ...options
+        };
+
+        this._map = null;
+        this._container = null;
+        this._modal = null;
+        this._overlay = null;
+        this._searchInput = null;
+        this._optionsList = null;
+        this._filteredList = [...this.options.list];
+    }
+
+    /**
+     * 添加到地图
+     * @param {Object} map Mapbox 地图实例
+     * @returns {HTMLElement} 控件容器
+     */
+    onAdd(map) {
+        this._map = map;
+
+        // 创建控件按钮
+        this._container = document.createElement('div');
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group vector-layer-ctrl';
+        this._container.style.cssText = `
+            position: relative;
+        `;
+        this._container.innerHTML = `
+            <button class="vector-layer-btn" title="${this.options.title}">
+                <svg viewBox="0 0 24 24" width="18" height="18">
+                    <path d="M9,2V7.5L12,10.5L15,7.5V2H9ZM2,9H7.5L10.5,12L7.5,15H2V9ZM22,9H16.5L13.5,12L16.5,15H22V9ZM9,22V16.5L12,13.5L15,16.5V22H9Z" 
+                          fill="currentColor"/>
+                </svg>
+            </button>
+        `;
+
+        // 添加点击事件
+        const button = this._container.querySelector('.vector-layer-btn');
+        button.addEventListener('click', () => this.openModal());
+
+        return this._container;
+    }
+
+    /**
+     * 从地图移除
+     */
+    onRemove() {
+        this.closeModal();
+        if (this._container) {
+            this._container.parentNode.removeChild(this._container);
+        }
+        this._map = undefined;
+    }
+
+    /**
+     * 打开弹窗
+     */
+    openModal() {
+        if (this._modal) return;
+
+        // 创建遮罩层
+        this._overlay = document.createElement('div');
+        this._overlay.className = 'vector-layer-overlay';
+        this._overlay.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 9999;
+            display: flex;
+            justify-content: center;
+            backdrop-filter: blur(2px);
+        `;
+        this._overlay.addEventListener('click', (e) => {
+            if (e.target === this._overlay) this.closeModal();
+        });
+
+        // 创建弹窗
+        this._modal = document.createElement('div');
+        this._modal.className = 'vector-layer-modal';
+        this._modal.style.cssText = `
+            background: white;
+            border-radius: 8px;
+            padding: ${this.options.compactMode ? '16px' : '20px'};
+            width: ${this.options.width};
+            max-width: 90vw;
+            max-height: ${this.options.maxHeight};
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            animation: vector-layer-modal-appear 0.2s ease-out;
+            border: 1px solid #e0e0e0;
+        `;
+
+        // 弹窗标题
+        const title = document.createElement('h3');
+        title.className = 'vector-layer-title';
+        title.textContent = this.options.title;
+        title.style.cssText = `
+            margin: 0 0 ${this.options.compactMode ? '12px' : '16px'} 0;
+            font-size: ${this.options.compactMode ? '15px' : '16px'};
+            font-weight: 600;
+            color: #2c3e50;
+            line-height: 1.3;
+        `;
+        this._modal.appendChild(title);
+
+        // 搜索框
+        if (this.options.showSearch) {
+            const searchContainer = document.createElement('div');
+            searchContainer.className = 'vector-layer-search';
+            searchContainer.style.cssText = `
+                margin-bottom: ${this.options.compactMode ? '12px' : '16px'};
+                position: relative;
+            `;
+
+            this._searchInput = document.createElement('input');
+            this._searchInput.type = 'text';
+            this._searchInput.placeholder = this.options.placeholder;
+            this._searchInput.className = 'vector-layer-search-input';
+            this._searchInput.style.cssText = `
+                width: 100%;
+                padding: ${this.options.compactMode ? '8px 12px 8px 36px' : '10px 16px 10px 40px'};
+                border: 1px solid #dcdfe6;
+                border-radius: 6px;
+                font-size: 13px;
+                outline: none;
+                transition: all 0.2s;
+                box-sizing: border-box;
+                background-color: #f8f9fa;
+            `;
+            this._searchInput.addEventListener('input', () => this.filterOptions());
+            this._searchInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') this.closeModal();
+            });
+
+            // 搜索图标
+            const searchIcon = document.createElement('div');
+            searchIcon.innerHTML = `
+                <svg viewBox="0 0 24 24" width="16" height="16" 
+                     style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #888;">
+                    <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" 
+                          fill="currentColor"/>
+                </svg>
+            `;
+
+            searchContainer.appendChild(searchIcon);
+            searchContainer.appendChild(this._searchInput);
+            this._modal.appendChild(searchContainer);
+        }
+
+        // 选项列表容器
+        const listContainer = document.createElement('div');
+        listContainer.className = 'vector-layer-list-container';
+        listContainer.style.cssText = `
+            flex: 1;
+            overflow: hidden;
+            min-height: ${this.options.compactMode ? '120px' : '160px'};
+            border-radius: 6px;
+            border: 1px solid #e0e0e0;
+        `;
+
+        this._optionsList = document.createElement('div');
+        this._optionsList.className = 'vector-layer-options';
+        this._optionsList.style.cssText = `
+            max-height: calc(${this.options.maxHeight} - ${this.options.compactMode ? '140px' : '180px'});
+            overflow-y: auto;
+            scroll-behavior: smooth;
+        `;
+
+        // 填充选项
+        this.renderOptions();
+
+        listContainer.appendChild(this._optionsList);
+        this._modal.appendChild(listContainer);
+
+        // 操作按钮
+        const buttonContainer = document.createElement('div');
+        buttonContainer.className = 'vector-layer-actions';
+        buttonContainer.style.cssText = `
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+            margin-top: ${this.options.compactMode ? '12px' : '16px'};
+            padding-top: ${this.options.compactMode ? '12px' : '16px'};
+            border-top: 1px solid #f0f0f0;
+        `;
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.textContent = '取消';
+        cancelBtn.className = 'vector-layer-cancel';
+        cancelBtn.style.cssText = `
+            padding: 6px 16px;
+            border: 1px solid #dcdfe6;
+            border-radius: 4px;
+            background: white;
+            color: #606266;
+            cursor: pointer;
+            font-size: 13px;
+            transition: all 0.2s;
+            font-weight: 500;
+        `;
+        cancelBtn.addEventListener('click', () => {
+            this.closeModal();
+            this.options.onCancel(this._map, null);
+        });
+        cancelBtn.addEventListener('mouseenter', () => {
+            cancelBtn.style.backgroundColor = '#f5f7fa';
+            cancelBtn.style.borderColor = '#c0c4cc';
+        });
+        cancelBtn.addEventListener('mouseleave', () => {
+            cancelBtn.style.backgroundColor = 'white';
+            cancelBtn.style.borderColor = '#dcdfe6';
+        });
+
+        buttonContainer.appendChild(cancelBtn);
+        this._modal.appendChild(buttonContainer);
+
+        this._overlay.appendChild(this._modal);
+        document.body.appendChild(this._overlay);
+
+        // 阻止地图事件冒泡
+        this._modal.addEventListener('click', (e) => e.stopPropagation());
+        this._modal.addEventListener('mousedown', (e) => e.stopPropagation());
+        this._modal.addEventListener('mouseup', (e) => e.stopPropagation());
+
+        // 聚焦搜索框
+        if (this._searchInput) {
+            setTimeout(() => this._searchInput.focus(), 50);
+        }
+
+        // 添加动画样式
+        this.addStyles();
+    }
+
+    /**
+     * 渲染选项列表
+     */
+    renderOptions() {
+        this._optionsList.innerHTML = '';
+
+        if (this._filteredList.length === 0) {
+            const emptyItem = document.createElement('div');
+            emptyItem.className = 'vector-layer-option empty';
+            emptyItem.textContent = '无匹配结果';
+            emptyItem.style.cssText = `
+                padding: ${this.options.compactMode ? '20px 16px' : '24px 16px'};
+                text-align: center;
+                color: #999;
+                font-size: 13px;
+                font-style: italic;
+            `;
+            this._optionsList.appendChild(emptyItem);
+            return;
+        }
+
+        this._filteredList.forEach((item, index) => {
+            const option = document.createElement('div');
+            option.className = 'vector-layer-option';
+            option.dataset.value = item.value || item.label;
+            option.dataset.index = index;
+            option.style.cssText = `
+                padding: ${this.options.compactMode ? '8px 12px' : '10px 16px'};
+                cursor: pointer;
+                border-bottom: 1px solid #f5f5f5;
+                font-size: 13px;
+                transition: all 0.15s;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                min-height: ${this.options.compactMode ? '36px' : '40px'};
+                box-sizing: border-box;
+            `;
+
+            option.innerHTML = `
+                ${item.icon ? `<span class="option-icon" style="flex-shrink: 0; width: 16px; height: 16px;">${item.icon}</span>` : ''}
+                <span class="option-label" style="flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${item.label}</span>
+                ${item.description ? `<span class="option-desc" style="font-size: 12px; color: #888; flex-shrink: 0;">${item.description}</span>` : ''}
+            `;
+
+            option.addEventListener('click', () => this.selectOption(item));
+            option.addEventListener('mouseenter', () => {
+                option.style.backgroundColor = '#f0f7ff';
+                option.style.borderLeftColor = '#1890ff';
+            });
+            option.addEventListener('mouseleave', () => {
+                option.style.backgroundColor = '';
+                option.style.borderLeftColor = '';
+            });
+
+            this._optionsList.appendChild(option);
+        });
+
+        // 移除最后一个选项的下边框
+        const lastOption = this._optionsList.lastChild;
+        if (lastOption && !lastOption.classList.contains('empty')) {
+            lastOption.style.borderBottom = 'none';
+        }
+    }
+
+    /**
+     * 筛选选项
+     */
+    filterOptions() {
+        const searchText = this._searchInput ? this._searchInput.value.toLowerCase() : '';
+
+        if (!searchText) {
+            this._filteredList = [...this.options.list];
+        } else {
+            this._filteredList = this.options.list.filter(item =>
+                item.label.toLowerCase().includes(searchText) ||
+                (item.value && item.value.toLowerCase().includes(searchText)) ||
+                (item.description && item.description.toLowerCase().includes(searchText))
+            );
+        }
+
+        this.renderOptions();
+    }
+
+    /**
+     * 选中选项
+     * @param {Object} item 选中的选项
+     */
+    selectOption(item) {
+        try {
+            // 执行回调
+            this.options.onSelect(this._map, item);
+
+            // 添加选中动画
+            const option = this._optionsList.querySelector(`[data-value="${item.value || item.label}"]`);
+            if (option) {
+                const originalBg = option.style.backgroundColor;
+                const originalColor = option.style.color;
+                option.style.backgroundColor = '#1890ff';
+                option.style.color = 'white';
+                setTimeout(() => {
+                    option.style.backgroundColor = originalBg;
+                    option.style.color = originalColor;
+                }, 150);
+                setTimeout(() => {
+                    this.closeModal();
+                }, 300);
+            } else {
+                this.closeModal();
+            }
+        } catch (error) {
+            console.error('选中回调执行失败:', error);
+            this.closeModal();
+        }
+    }
+
+    /**
+     * 关闭弹窗
+     */
+    closeModal() {
+        if (this._overlay) {
+            this._overlay.style.opacity = '0';
+            this._overlay.style.transition = 'opacity 0.15s ease-out';
+
+            setTimeout(() => {
+                if (this._overlay && this._overlay.parentNode) {
+                    document.body.removeChild(this._overlay);
+                }
+                this._overlay = null;
+                this._modal = null;
+                this._searchInput = null;
+                this._optionsList = null;
+            }, 150);
+        }
+    }
+
+    /**
+     * 更新选项列表
+     * @param {Array} newList 新的选项列表
+     */
+    updateList(newList) {
+        this.options.list = newList;
+        this._filteredList = [...newList];
+        if (this._modal) {
+            this.renderOptions();
+        }
+    }
+
+    /**
+     * 添加CSS样式
+     */
+    addStyles() {
+        if (document.querySelector('#vector-layer-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'vector-layer-styles';
+        style.textContent = `
+            @keyframes vector-layer-modal-appear {
+                from {
+                    opacity: 0;
+                    transform: translateY(-8px) scale(0.98);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0) scale(1);
+                }
+            }
+            
+            .vector-layer-ctrl button {
+                background: white;
+                border: 1px solid #d9d9d9;
+                border-radius: 4px;
+                width: 28px;
+                height: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                color: #555;
+                transition: all 0.2s;
+                padding: 0;
+                margin: 0;
+            }
+            
+            .vector-layer-ctrl button:hover {
+                background: #f5f5f5;
+                border-color: #40a9ff;
+                color: #40a9ff;
+                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            }
+            
+            .vector-layer-search-input:focus {
+                border-color: #40a9ff;
+                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+                background-color: white;
+            }
+            
+            .vector-layer-option {
+                position: relative;
+                border-left: 3px solid transparent;
+            }
+            
+            .vector-layer-option:hover {
+                border-left-color: #1890ff;
+            }
+            
+            .vector-layer-option:active {
+                background-color: #e6f7ff !important;
+            }
+            
+            .vector-layer-options::-webkit-scrollbar {
+                width: 4px;
+            }
+            
+            .vector-layer-options::-webkit-scrollbar-track {
+                background: #f5f5f5;
+                border-radius: 2px;
+            }
+            
+            .vector-layer-options::-webkit-scrollbar-thumb {
+                background: #bfbfbf;
+                border-radius: 2px;
+            }
+            
+            .vector-layer-options::-webkit-scrollbar-thumb:hover {
+                background: #8c8c8c;
+            }
+            
+            .vector-layer-modal {
+                overflow: hidden;
+            }
+            
+            /* 紧凑模式下的额外样式 */
+            .vector-layer-modal.compact {
+                padding: 12px;
+            }
+            
+            .vector-layer-modal.compact .vector-layer-title {
+                font-size: 14px;
+                margin-bottom: 10px;
+            }
+            
+            .vector-layer-modal.compact .vector-layer-search-input {
+                padding: 6px 10px 6px 32px;
+                font-size: 12px;
+            }
+            
+            .vector-layer-modal.compact .vector-layer-option {
+                padding: 6px 10px;
+                font-size: 12px;
+                min-height: 32px;
+            }
+            
+            /* 暗色模式支持 */
+            @media (prefers-color-scheme: dark) {
+                .vector-layer-modal {
+                    background: #2d2d2d;
+                    border-color: #404040;
+                    color: #e0e0e0;
+                }
+                
+                .vector-layer-title {
+                    color: #e0e0e0;
+                }
+                
+                .vector-layer-search-input {
+                    background-color: #3a3a3a;
+                    border-color: #555;
+                    color: #e0e0e0;
+                }
+                
+                .vector-layer-search-input:focus {
+                    border-color: #1890ff;
+                }
+                
+                .vector-layer-list-container {
+                    border-color: #404040;
+                }
+                
+                .vector-layer-option {
+                    border-bottom-color: #404040;
+                }
+                
+                .vector-layer-option:hover {
+                    background-color: #3a3a3a;
+                }
+                
+                .option-desc {
+                    color: #aaa;
+                }
+                
+                .vector-layer-actions {
+                    border-top-color: #404040;
+                }
+                
+                .vector-layer-cancel {
+                    background: #3a3a3a;
+                    border-color: #555;
+                    color: #e0e0e0;
+                }
+                
+                .vector-layer-options::-webkit-scrollbar-track {
+                    background: #3a3a3a;
+                }
+                
+                .vector-layer-options::-webkit-scrollbar-thumb {
+                    background: #666;
+                }
+            }
+        `;
+
+        document.head.appendChild(style);
+    }
+}
+
 class CustomOptionsControl {
     constructor(args) {
         const { title, options, onConfirm, icon } = args;
@@ -7973,5 +8550,5 @@ const useDrawCache = () => {
     }
 };
 
-export { CustomOptionsControl, CustomToggleControl, DrawCacheFeatureManager, RainteeConstants, RainteeGISUtil, RainteeSourceMapTool, RasterLayerControl, RulerControl, TerrainToggleControl, useDrawCache };
+export { CustomOptionsControl, CustomSearchSelectControl, CustomToggleControl, DrawCacheFeatureManager, RainteeConstants, RainteeGISUtil, RainteeSourceMapTool, RasterLayerControl, RulerControl, TerrainToggleControl, useDrawCache };
 //# sourceMappingURL=index.js.map