raintee-maputils 1.0.51 → 1.0.53

package/dist/index.js

@@ -21429,10 +21429,308 @@ class CustomToggleControl {
 
 // RasterLayerController.js
 
+// class RasterLayerControl {
+//     constructor() {
+//         this._panel = null;
+//         this._dialog = null;
+//         this._layerListContainer = null;
+//         this._isOpen = false;
+//         this._tempLayers = [];
+//     }
+
+//     onAdd(map) {
+//         this._map = map;
+
+//         this._container = document.createElement('div');
+//         this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-raster-control';
+
+//         this._button = document.createElement('button');
+//         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;
+//     `;
+
+//         this._button.addEventListener('mouseenter', () => {
+//             this._button.style.background = '#e9ecef';
+//         });
+//         this._button.addEventListener('mouseleave', () => {
+//             this._button.style.background = '#f8f9fa';
+//         });
+
+//         this._button.addEventListener('click', () => {
+//             this._togglePanel();
+//         });
+
+//         this._container.appendChild(this._button);
+
+//         this._map.on('idle', () => this._updateButtonText());
+//         this._map.on('styledata', () => this._updateButtonText());
+//         this._map.on('sourcedata', () => this._updateButtonText());
+
+//         this._updateButtonText();
+
+//         return this._container;
+//     }
+
+//     onRemove() {
+//         if (this._panel && this._panel.parentNode) {
+//             this._panel.parentNode.removeChild(this._panel);
+//         }
+//         if (this._container && this._container.parentNode) {
+//             this._container.parentNode.removeChild(this._container);
+//         }
+//         this._map = undefined;
+//     }
+
+//     _togglePanel() {
+//         this._isOpen ? this._closePanel() : this._openPanel();
+//     }
+
+//     _openPanel() {
+//         this._createPanelIfNeeded();
+
+//         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;
+//     }
+
+//     _closePanel() {
+//         if (this._panel) {
+//             this._panel.style.display = 'none';
+//         }
+//         this._isOpen = false;
+//     }
+
+//     _createPanelIfNeeded() {
+//         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;
+//     `;
+
+//         // 列表容器
+//         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);
+
+//         // 点击遮罩关闭
+//         this._panel.addEventListener('click', (e) => {
+//             if (e.target === this._panel) this._closePanel();
+//         });
+//     }
+
+//     _renderLayerList() {
+//         if (!this._layerListContainer) return;
+//         this._layerListContainer.innerHTML = '';
+
+//         if (!this._tempLayers.length) {
+//             this._layerListContainer.textContent = '无可选栅格图层';
+//             return;
+//         }
+
+//         this._tempLayers.forEach((layer, index) => {
+//             const row = document.createElement('div');
+//             row.style.cssText = `
+//         display: flex;
+//         align-items: center;
+//         gap: 6px;
+//         padding: 6px 8px;
+//         background: #f8f9fa;
+//         border-radius: 4px;
+//       `;
+
+//             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();
+//             };
+
+
+
+//             const label = document.createElement('span');
+//             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);
+//             row.appendChild(upBtn);
+//             row.appendChild(downBtn);
+//             this._layerListContainer.appendChild(row);
+//         });
+//     }
+
+//     _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 ? '底图：无' : '底图：无栅格图层';
+//     }
+// }
 class RasterLayerControl {
     constructor() {
         this._panel = null;
+        this._dialog = null;
+        this._layerListContainer = null;
         this._isOpen = false;
+        this._tempLayers = [];
     }
 
     onAdd(map) {
@@ -21445,21 +21743,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 +21766,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 +21788,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 +21819,275 @@ 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);
+
+            // 定位按钮
+            const locateBtn = document.createElement('button');
+            locateBtn.textContent = '⊕';
+            locateBtn.title = '定位到该图层';
+            let locateInfo = null;
+            try {
+                locateInfo = this._getLayerLocateInfo(layer.id);
+            } catch (e) {
+                console.warn('获取图层定位信息失败:', layer.id, e);
+            }
+            if (!locateInfo) {
+                locateBtn.disabled = true;
+                locateBtn.style.opacity = '0.3';
+            }
+            locateBtn.onclick = () => this._locateToLayer(layer.id, locateBtn);
 
+            const btnStyle = `padding: 2px 6px; border: 1px solid #ccc; background: #fff; border-radius: 3px; cursor: pointer;`;
+            upBtn.style.cssText = btnStyle;
+            downBtn.style.cssText = btnStyle;
+            locateBtn.style.cssText = locateInfo ? btnStyle : (btnStyle + ' opacity: 0.3; cursor: not-allowed;');
+
+            row.appendChild(checkbox);
             row.appendChild(label);
-            this._layerListContainer && this._layerListContainer.appendChild(row);
+            row.appendChild(locateBtn);
+            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 ? '底图：无' : '底图：无栅格图层';
+    }
+
+    _getLayerLocateInfo(layerId) {
+        if (!this._map) return null;
+        const style = this._map.getStyle();
+        const layer = style.layers.find(l => l.id === layerId);
+        if (!layer || !layer.source) return null;
+        const source = style.sources[layer.source];
+        if (!source || !source.tiles || !source.tiles.length) return null;
+        const tileUrl = source.tiles[0];
+        // 提取后端基础地址
+        let baseUrl = '';
+        try {
+            const u = new URL(tileUrl, window.location.origin);
+            baseUrl = u.origin;
+        } catch (e) {
+            baseUrl = '';
+        }
+        // 动态栅格
+        const dynMatch = tileUrl.match(/\/raster\/dynamic\/tile\/([^/]+)\//);
+        if (dynMatch) return { type: 'dynamic', name: dynMatch[1], baseUrl };
+        // mbtiles栅格
+        const staticMatch = tileUrl.match(/\/raster\/([^/]+)\//);
+        if (staticMatch && !tileUrl.includes('/dynamic/')) return { type: 'static', name: staticMatch[1], baseUrl };
+        return null;
+    }
+
+    async _locateToLayer(layerId, btn) {
+        const info = this._getLayerLocateInfo(layerId);
+        if (!info) return;
+        const origText = btn.textContent;
+        btn.textContent = '...';
+        btn.disabled = true;
+        try {
+            let url = '';
+            if (info.type === 'static') {
+                url = `${info.baseUrl}/raster/center/${info.name}`;
+            } else {
+                url = `${info.baseUrl}/raster/dynamic/center/${info.name}`;
+            }
+            const resp = await fetch(url);
+            if (!resp.ok) throw new Error('请求失败');
+            const data = await resp.json();
+            if (data.x != null && data.y != null) {
+                this._map.flyTo({
+                    center: [data.x, data.y],
+                    zoom: data.zoom || 10,
+                    duration: 1500
+                });
+                this._closePanel();
+            }
+        } catch (e) {
+            console.error('定位失败:', e);
+            btn.textContent = '✕';
+            setTimeout(() => { btn.textContent = origText; btn.disabled = false; }, 1500);
+            return;
         }
+        btn.textContent = origText;
+        btn.disabled = false;
     }
 }