raintee-maputils 1.0.3 → 1.0.5

package/index.js

@@ -1,11 +1,11 @@
-import CustomOptionsControl from './src/CustomOptionsControl';
-import CustomToggleControl from './src/CustomToggleControl';
-import RainteeConstants from './src/RainteeConstants';
-import RainteeGISUtil from './src/RainteeGISUtil';
-import RainteeSourceMapTool from './src/RainteeSourceMapTool';
-import RasterLayerController from './src/RasterLayerController';
-import TerrainToggleControl from './src/TerrainToggleControl';
-import useDrawCache from './src/useDrawCache';
+import * as CustomOptionsControl from './src/CustomOptionsControl.js';
+import * as CustomToggleControl from './src/CustomToggleControl.js';
+import * as RainteeConstants from './src/RainteeConstants.js';
+import * as RainteeGISUtil from './src/RainteeGISUtil.js';
+import * as RainteeSourceMapTool from './src/RainteeSourceMapTool.js';
+import * as RasterLayerController from './src/RasterLayerController.js';
+import * as TerrainToggleControl from './src/TerrainToggleControl.js';
+import * as useDrawCache from './src/useDrawCache.js';
 
 export default {
   RainteeConstants,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raintee-maputils",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Raintee的GIS开发工具包",
   "main": "index.js",
   "type": "module",
@@ -8,8 +8,8 @@
     "raintee-maputils": "index.js"
   },
   "files": [
-    "index.js",
-    "lib"
+    "in dex.js",
+    "src"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/CustomOptionsControl.js

@@ -0,0 +1,168 @@
+export default class CustomOptionsControl {
+    constructor(args) {
+        const { options, onConfirm } = args;
+
+        this._container = null;
+        this._map = null;
+
+        this._options = options || [];
+        this._onConfirm = onConfirm || (() => { });
+
+        if (!this._options || !Array.isArray(this._options)) {
+            console.error('请传入有效的 options 参数（数组）');
+        }
+    }
+
+    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.style.cssText = `
+            width: 100%;
+            height: 100%;
+            padding: 0.25rem 0.5rem;
+            margin: 0;
+            border: 1px solid #ccc;
+            background: white;
+            border-radius: 4px;
+            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();
+
+        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';
+
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.value = opt.value;
+            checkbox.style.marginRight = '8px';
+
+            // 绑定选中状态
+            checkbox.checked = this._getSelectedOption(opt.value);
+            checkbox.addEventListener('change', () => this._toggleOption(opt.value));
+
+            const span = document.createElement('span');
+            span.textContent = opt.label;
+
+            label.appendChild(checkbox);
+            label.appendChild(span);
+            optionDiv.appendChild(label);
+            this._panel.appendChild(optionDiv);
+        });
+
+        // 创建按钮组：取消 / 确定
+        const buttonGroup = document.createElement('div');
+        buttonGroup.style.marginTop = '12px';
+        buttonGroup.style.display = 'flex';
+        buttonGroup.style.gap = '8px';
+        buttonGroup.style.justifyContent = 'flex-end';
+
+        const cancelButton = document.createElement('button');
+        cancelButton.textContent = '取消';
+        cancelButton.style.cssText = `
+            padding: 6px 12px;
+            background: #ccc;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            width: auto;
+        `;
+        cancelButton.addEventListener('click', () => this._handleCancel());
+
+        const confirmButton = document.createElement('button');
+        confirmButton.textContent = '确定';
+        confirmButton.style.cssText = `
+            padding: 6px 12px;
+            background: #007cba;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            width: auto;
+        `;
+        confirmButton.addEventListener('click', () => this._handleConfirm());
+
+        buttonGroup.appendChild(cancelButton);
+        buttonGroup.appendChild(confirmButton);
+        this._panel.appendChild(buttonGroup);
+    }
+
+    _getSelectedOption(value) {
+        return this._selectedOptions?.includes(value) || false;
+    }
+
+    _toggleOption(value) {
+        if (!this._selectedOptions) this._selectedOptions = [];
+
+        const idx = this._selectedOptions.indexOf(value);
+        if (idx > -1) {
+            this._selectedOptions.splice(idx, 1);
+        } else {
+            this._selectedOptions.push(value);
+        }
+
+        // 可选：重新渲染复选框状态（如果需要动态更新 UI，但目前 onchange 已处理）
+    }
+
+    _handleConfirm() {
+        this._setExpanded(false);
+
+        this._onConfirm({
+            selectedOptions: this._selectedOptions || [],
+            unselectedOptions: this._options.filter((item) => !this._selectedOptions?.includes(item.value)),
+            allOptions: this._options,
+        });
+    }
+
+    _handleCancel() {
+        this._setExpanded(false);
+    }
+
+    onRemove() {
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
+        }
+    }
+}

package/src/CustomToggleControl.js

@@ -0,0 +1,125 @@
+// 自定义控件类：ToggleControl
+export default class ToggleControl {
+    /**
+     * 构造函数
+     * @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] - 可选的回调函数，状态切换后调用，参数为最新的布尔值
+     */
+    constructor({ name, field, defaultValue = false, svgIcon, onToggle }) {
+        this.name = name;
+        this.field = field;
+        this.defaultValue = defaultValue;
+        this.svgIcon = svgIcon;
+        this.onToggle = onToggle; // ✅ 新增：回调函数
+
+        // 控件容器
+        this._container = null;
+        this._button = null;
+        this.isActive = false; // 当前是否为激活状态（高亮/true）
+    }
+
+    // Mapbox 要求的 onAdd 方法
+    onAdd(map) {
+        this.map = map;
+
+        // 创建外层容器 div
+        this._container = document.createElement('div');
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
+
+        // 创建 button 元素
+        this._button = document.createElement('button');
+        this._button.type = 'button';
+        this._button.innerHTML = this.svgIcon;
+
+        // 设置按钮样式
+        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.updateStatus();
+
+        // 绑定点击事件
+        this._button.addEventListener('click', () => {
+            this.toggle();
+        });
+
+        this._container.appendChild(this._button);
+
+        return this._container;
+    }
+
+    // Mapbox 要求的 onRemove 方法
+    onRemove() {
+        if (this._container && this._container.parentNode) {
+            this._container.parentNode.removeChild(this._container);
+        }
+        this.map = null;
+        this._container = null;
+        this._button = null;
+    }
+
+    // 更新控件状态（根据当前 field 值）
+    updateStatus() {
+        // 从 map.SourceMap 中获取当前 field 的值，如果不存在则使用 defaultValue
+        let currentValue = this.defaultValue;
+
+        if (
+            this.map &&
+            this.map.SourceMap &&
+            typeof this.map.SourceMap[this.field] === 'boolean'
+        ) {
+            currentValue = this.map.SourceMap[this.field];
+        }
+
+        this.isActive = currentValue; // true 表示激活，false 表示未激活
+
+        // 更新按钮样式
+        if (this.isActive) {
+            this._button.style.opacity = '1';
+            this._button.style.filter = 'none';
+        } else {
+            this._button.style.opacity = '0.4';
+            this._button.style.filter = 'grayscale(100%)';
+        }
+    }
+
+    // 切换状态
+    toggle() {
+        // 获取当前值
+        let currentValue = this.defaultValue;
+
+        if (
+            this.map &&
+            this.map.SourceMap &&
+            typeof this.map.SourceMap[this.field] === 'boolean'
+        ) {
+            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); // 安全调用，仅当函数存在时才执行
+    }
+}