raintee-maputils 1.0.14 → 1.0.16

package/index.js

@@ -1,19 +1,19 @@
-import { CustomOptionsControl } from './src/CustomOptionsControl.js';
-import { ToggleControl } from './src/CustomToggleControl.js';
+import { CustomOptionsControlBuilder } from './src/CustomOptionsControl.js';
+import { CustomToggleControlBuilder } 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 { RasterLayerController } from './src/RasterLayerController.js';
-import { TerrainToggleControl } from './src/TerrainToggleControl.js';
+import { RasterLayerControlBuilder } from './src/RasterLayerController.js';
+import { TerrainToggleControlBuilder } from './src/TerrainToggleControl.js';
 import { useDrawCache } from './src/useDrawCache.js';
 
 export {
   RainteeConstants,
   RainteeGISUtil,
   RainteeSourceMapTool,
-  CustomOptionsControl,
-  ToggleControl as CustomToggleControl,
-  RasterLayerController,
-  TerrainToggleControl,
+  CustomOptionsControlBuilder,
+  CustomToggleControlBuilder,
+  RasterLayerControlBuilder,
+  TerrainToggleControlBuilder,
   useDrawCache
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "raintee-maputils",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Raintee的GIS开发工具包",
-  "main": "index.js",
+  "main": "dist/index.js",
   "type": "module",
   "bin": {
     "raintee-maputils": "index.js"
   },
   "files": [
-    "index.js",
-    "src"
+    "dist"
   ],
   "scripts": {
+    "build": "rollup -c",
     "test": "echo \"Error: no test specified\" && exit 1",
     "publish": "npm publish --access public"
   },
@@ -26,6 +26,9 @@
   "author": "raintee",
   "license": "ISC",
   "devDependencies": {
-    "javascript-obfuscator": "^4.1.1"
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "javascript-obfuscator": "^4.1.1",
+    "rollup": "^4.53.2"
   }
 }

package/src/CustomOptionsControl.js

@@ -1,169 +0,0 @@
-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);
-        }
-    }
-}
-export { CustomOptionsControl };

package/src/CustomToggleControl.js

@@ -1,126 +0,0 @@
-// 自定义控件类：ToggleControl
-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); // 安全调用，仅当函数存在时才执行
-    }
-}
-export { ToggleControl };