raintee-maputils 1.0.52 → 1.0.53

package/dist/index.js

@@ -21429,6 +21429,301 @@ 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;
@@ -21659,18 +21954,30 @@ class RasterLayerControl {
             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;
-        `;
-            });
+            // 定位按钮
+            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);
+            row.appendChild(locateBtn);
             row.appendChild(upBtn);
             row.appendChild(downBtn);
             this._layerListContainer.appendChild(row);
@@ -21723,6 +22030,65 @@ class RasterLayerControl {
             ? `底图：${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;
+    }
 }
 
 // terrain-toggle-control.js