raintee-maputils 1.0.51 → 1.0.52

package/dist/index.js

@@ -21432,7 +21432,10 @@ class CustomToggleControl {
 class RasterLayerControl {
     constructor() {
         this._panel = null;
+        this._dialog = null;
+        this._layerListContainer = null;
         this._isOpen = false;
+        this._tempLayers = [];
     }
 
     onAdd(map) {
@@ -21445,21 +21448,22 @@ class RasterLayerControl {
         this._button.type = 'button';
         this._button.innerHTML = '底图：初始化中';
         this._button.style.cssText = `
-            width: 100%;
-            padding: 6px 10px;
-            margin: 0;
-            font-size: 14px;
-            font-family: Arial, sans-serif;
-            background: #f8f9fa;
-            color: #333;
-            border: 1px solid #dee2e6;
-            border-radius: 4px;
-            cursor: pointer;
-            text-align: left;
-            white-space: nowrap;
-            box-sizing: border-box;
-            line-height: 1.4;
-        `;
+      width: 100%;
+      padding: 6px 10px;
+      margin: 0;
+      font-size: 14px;
+      font-family: Arial, sans-serif;
+      background: #f8f9fa;
+      color: #333;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      cursor: pointer;
+      text-align: left;
+      white-space: nowrap;
+      box-sizing: border-box;
+      line-height: 1.4;
+    `;
+
         this._button.addEventListener('mouseenter', () => {
             this._button.style.background = '#e9ecef';
         });
@@ -21467,26 +21471,17 @@ class RasterLayerControl {
             this._button.style.background = '#f8f9fa';
         });
 
-        this._container.appendChild(this._button);
-
         this._button.addEventListener('click', () => {
             this._togglePanel();
         });
 
-        this._map.on('idle', () => {
-            this._updateRasterLayers();
-
-        });
-
-        this._map.on('styledata', () => {
-            this._updateRasterLayers();
-        });
+        this._container.appendChild(this._button);
 
-        this._map.on('sourcedata', () => {
-            this._updateRasterLayers();
-        });
+        this._map.on('idle', () => this._updateButtonText());
+        this._map.on('styledata', () => this._updateButtonText());
+        this._map.on('sourcedata', () => this._updateButtonText());
 
-        this._updateRasterLayers();
+        this._updateButtonText();
 
         return this._container;
     }
@@ -21498,20 +21493,26 @@ class RasterLayerControl {
         if (this._container && this._container.parentNode) {
             this._container.parentNode.removeChild(this._container);
         }
+        this._map = undefined;
     }
 
     _togglePanel() {
-        if (this._isOpen) {
-            this._closePanel();
-        } else {
-            this._openPanel();
-        }
+        this._isOpen ? this._closePanel() : this._openPanel();
     }
 
     _openPanel() {
         this._createPanelIfNeeded();
-        this._updateRasterLayers();
-        this._panel.style.display = 'block';
+
+        const layers = this._map.getStyle().layers || [];
+        const rasterLayers = layers.filter(l => l.type === 'raster');
+
+        this._tempLayers = rasterLayers.map(l => ({
+            id: l.id,
+            visible: this._map.getLayoutProperty(l.id, 'visibility') !== 'none'
+        }));
+
+        this._renderLayerList();
+        this._panel.style.display = 'flex';
         this._isOpen = true;
     }
 
@@ -21523,171 +21524,204 @@ class RasterLayerControl {
     }
 
     _createPanelIfNeeded() {
-        if (!this._panel) {
-            // 创建整体的弹窗容器（包含遮罩 + 弹窗内容）
-            this._panel = document.createElement('div');
-            this._panel.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-          `;
-
-            // 创建实际的对话框（白色背景，居中内容区域）
-            this._dialog = document.createElement('div');
-            this._dialog.style.cssText = `
-            position: relative;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-            min-width: 300px;
-            max-width: 500px;
-            max-height: 80vh;
-            overflow-y: auto;
-            font-family: Arial, sans-serif;
-          `;
-
-            // 标题
-            const title = document.createElement('div');
-            title.textContent = '🗂 点击切换底图(影像栅格瓦片图层)';
-            title.style.fontWeight = 'bold';
-            title.style.marginBottom = '0.5rem';
-            title.style.fontSize = '1rem';
-            this._dialog.appendChild(title);
-
-            // 图层列表容器（原 _layerListContainer）
-            this._layerListContainer = document.createElement('div');
-            this._layerListContainer.style.cssText = `
-                width: 100%;
-                max-height: 60vh;
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                overflow-y: auto;
-                overflow-x: hidden;
-            `;
-            this._dialog.appendChild(this._layerListContainer);
-
-            //     // 关闭按钮（可选增强）
-            //     const closeButton = document.createElement('button');
-            //     closeButton.textContent = '✅ 关闭';
-            //     closeButton.style.cssText = `
-            //     margin-left: auto;
-            //     margin-right: auto;
-            //     margin-top: 15px;
-            //     padding: 6px 12px;
-            //     background: #6c757d;
-            //     color: white;
-            //     border: none;
-            //     border-radius: 4px;
-            //     cursor: pointer;
-            //   `;
-            //     closeButton.addEventListener('click', () => {
-            //         this._closePanel();
-            //     });
-            //     this._dialog.appendChild(closeButton);
-
-            this._panel.appendChild(this._dialog);
-            document.body.appendChild(this._panel);
-
-            // 点击背景遮罩关闭弹窗（增强用户体验，可选）
-            this._panel.addEventListener('click', (e) => {
-                // 只有点击背景遮罩部分才关闭，点击对话框内容不关闭
-                if (e.target === this._panel) {
-                    this._closePanel();
-                }
-            });
-        }
-    }
-
-    _updateRasterLayers() {
+        if (this._panel) return;
+
+        // 遮罩
+        this._panel = document.createElement('div');
+        this._panel.style.cssText = `
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw; height: 100vh;
+  background: rgba(0,0,0,0.45);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+`;
+
+
+        // 对话框
+        this._dialog = document.createElement('div');
+        this._dialog.style.cssText = `
+  position: relative;
+  background: #fff;
+  padding: 16px;
+  border-radius: 10px;         /* 稍微更柔和 */
+  min-width: 320px;
+  max-width: 520px;
+  max-height: 75vh;            /* 🔥 再低一点，留呼吸感 */
+  overflow: hidden;            /* 防止整体溢出 */
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 6px 18px rgba(0,0,0,.22);
+  font-family: Arial, sans-serif;
+`;
+
+
+
+
+        // 标题
+        const title = document.createElement('div');
+        title.textContent = '🗂 管理栅格底图';
+        title.style.cssText = `
+      font-weight: bold;
+      margin-bottom: 8px;
+      font-size: 15px;
+    `;
 
-        const layers = this._map.getStyle().layers || [];
-        const rasterLayers = layers.filter(layer => layer.type === 'raster');
+        // 列表容器
+        this._layerListContainer = document.createElement('div');
+        this._layerListContainer.style.cssText = `
+  width: 100%;
+  max-height: 50vh;          /* 🔥 核心：最多占屏幕一半高度 */
+  overflow-y: auto;         /* 🔥 超出滚动 */
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 2px;
+  box-sizing: border-box;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+`;
+
+
+
+        this._dialog.appendChild(title);
+        this._dialog.appendChild(this._layerListContainer);
+        this._panel.appendChild(this._dialog);
+        document.body.appendChild(this._panel);
 
-        let buttonText = '底图：无';
-        let firstVisibleLayerId = null;
+        // 点击遮罩关闭
+        this._panel.addEventListener('click', (e) => {
+            if (e.target === this._panel) this._closePanel();
+        });
+    }
 
-        // 查找当前显示的图层（visibility === 'visible'）
-        for (const layer of rasterLayers) {
-            const visibility = this._map.getLayoutProperty(layer.id, 'visibility');
-            if (visibility === 'visible') {
-                firstVisibleLayerId = layer.id;
-                break;
-            }
-        }
+    _renderLayerList() {
+        if (!this._layerListContainer) return;
+        this._layerListContainer.innerHTML = '';
 
-        if (firstVisibleLayerId) {
-            buttonText = `底图：${firstVisibleLayerId}`;
-        } else if (rasterLayers.length > 0) {
-            buttonText = '底图：无';
+        if (!this._tempLayers.length) {
+            this._layerListContainer.textContent = '无可选栅格图层';
+            return;
         }
 
-        this._button.innerHTML = buttonText;
-
-        // 清空旧的图层列表
-        if (this._layerListContainer) { this._layerListContainer.innerHTML = ''; }
-        rasterLayers.forEach(layer => {
-            const layerId = layer.id;
+        this._tempLayers.forEach((layer, index) => {
             const row = document.createElement('div');
             row.style.cssText = `
-                padding: 6px 8px;
-                margin-bottom: 2px;
-                background: #f8f9fa;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: background 0.2s;
-            `;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 8px;
+        background: #f8f9fa;
+        border-radius: 4px;
+      `;
 
-            row.addEventListener('click', () => {
-                // 设置当前图层为 visible，其他为 none
-                rasterLayers.forEach(l => {
-                    const vis = l.id === layerId ? 'visible' : 'none';
-                    this._map.setLayoutProperty(l.id, 'visibility', vis);
-                });
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.checked = layer.visible;
+
+            checkbox.onchange = () => {
+                layer.visible = checkbox.checked;
+
+                // 🔥 立刻在地图中生效
+                this._map.setLayoutProperty(
+                    layer.id,
+                    'visibility',
+                    layer.visible ? 'visible' : 'none'
+                );
+
+                // 🔄 同步按钮文字
+                this._updateButtonText();
+            };
 
-                // 更新按钮文字
-                if (this._button) {
-                    this._button.innerHTML = `底图：${layerId}`;
-                }
-                this._togglePanel();
-            });
 
-            // 鼠标 hover 效果
-            row.addEventListener('mouseenter', () => {
-                row.style.background = '#e9ecef';
-            });
-            row.addEventListener('mouseleave', () => {
-                row.style.background = '#f8f9fa';
-            });
 
-            // 显示图层 ID（可加样式或 icon）
             const label = document.createElement('span');
-            label.textContent = layerId;
-            label.style.fontFamily = 'Arial, sans-serif';
-            label.style.fontSize = '13px';
-            label.style.color = '#333';
+            label.textContent = layer.id;
+            label.style.cssText = `
+        flex: 1;
+        font-size: 13px;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `;
 
+            const upBtn = document.createElement('button');
+            upBtn.textContent = '↑';
+            upBtn.disabled = index === 0;
+            upBtn.onclick = () => this._moveTempLayer(index, index - 1);
+
+            const downBtn = document.createElement('button');
+            downBtn.textContent = '↓';
+            downBtn.disabled = index === this._tempLayers.length - 1;
+            downBtn.onclick = () => this._moveTempLayer(index, index + 1);
+
+            [upBtn, downBtn].forEach(btn => {
+                btn.style.cssText = `
+          padding: 2px 6px;
+          border: 1px solid #ccc;
+          background: #fff;
+          border-radius: 3px;
+          cursor: pointer;
+        `;
+            });
+
+            row.appendChild(checkbox);
             row.appendChild(label);
-            this._layerListContainer && this._layerListContainer.appendChild(row);
+            row.appendChild(upBtn);
+            row.appendChild(downBtn);
+            this._layerListContainer.appendChild(row);
         });
-        if (rasterLayers.length === 0) {
-            this._layerListContainer && this._layerListContainer.appendChild(document.createTextNode('无可选内容'));
+    }
+
+    _moveTempLayer(from, to) {
+        const item = this._tempLayers.splice(from, 1)[0];
+        this._tempLayers.splice(to, 0, item);
+
+        // ✅ 按 Mapbox 官方语义：从“最上层”往下重排
+        for (let i = this._tempLayers.length - 1; i >= 0; i--) {
+            const layerId = this._tempLayers[i].id;
+            const beforeId =
+                i === this._tempLayers.length - 1
+                    ? undefined               // 最上面的图层：移到最顶
+                    : this._tempLayers[i + 1].id;
+
+            // 关键防御：避免 moveLayer 自己到自己前面
+            if (beforeId && beforeId === layerId) continue;
+
+            this._map.moveLayer(layerId, beforeId);
+        }
+
+        this._renderLayerList();
+    }
+
+
+    _applyChanges() {
+        // 现在不再做任何地图操作，只是关闭面板
+        this._closePanel();
+    }
+
+
+    _updateButtonText() {
+        if (!this._map) return;
+
+        const layers = this._map.getStyle().layers || [];
+        const rasterLayers = layers.filter(l => l.type === 'raster');
+
+        let firstVisible = null;
+        for (const layer of rasterLayers) {
+            if (this._map.getLayoutProperty(layer.id, 'visibility') === 'visible') {
+                firstVisible = layer.id;
+                break;
+            }
         }
+
+        this._button.innerHTML = firstVisible
+            ? `底图：${firstVisible}`
+            : rasterLayers.length ? '底图：无' : '底图：无栅格图层';
     }
 }