raintee-maputils 1.0.1 → 1.0.2

package/lib/RainteeGISUtil.js

@@ -0,0 +1,149 @@
+import * as turf from '@turf/turf';
+
+
+/**
+ * 传入一个 features 数组（至少包含两个要素），
+ * 计算第二个要素（features[1]）中，不在第一个要素（features[0]）内部的部分，
+ * 即：features[1] 减去 features[0]，返回这一部分（GeoJSON Feature）。
+ *
+ * @param {Array<turf.Feature>} features - GeoJSON Feature 数组，至少包含两个要素
+ * @returns {turf.Feature | null} - 返回 features[1] 减去 features[0] 的部分，如果出错或无效返回 null
+ */
+export function getFeatureOutsidePart(features) {
+    if (!Array.isArray(features) || features.length < 2) {
+        console.error('Input must be an array of at least two GeoJSON Features.');
+        return null;
+    }
+
+    // 我们要计算的是：featureB - featureA，即 featureB 的外部部分（不在 featureA 中的部分）
+    const differenceResult = turf.difference(turf.featureCollection(features));
+
+    if (!differenceResult) {
+        console.warn('Difference result is empty or invalid. The second feature may be fully inside the first one.');
+        return null; // 两者无差异，或者输入几何有问题
+    }
+
+    return differenceResult; // 返回的就是 features[1] 在 features[0] 外部的部分
+}
+export const RT_FitBoundsMapbox = (map, featureCollection) => {
+    try {
+        if (!map || !featureCollection) {
+            console.error('RT_FitBoundsMapbox: map 或 featureCollection 参数不能为空');
+            return;
+        }
+
+
+        const boundsArray = turf.bbox(featureCollection); // [minLng, minLat, maxLng, maxLat]
+
+        if (!boundsArray || boundsArray.length !== 4) {
+            console.error('RT_FitBoundsMapbox: 无法计算有效的包围盒');
+            return;
+        }
+
+        const [minLng, minLat, maxLng, maxLat] = boundsArray;
+
+        const bounds = [
+            [minLng, minLat], // 左下角
+            [maxLng, maxLat]  // 右上角
+        ];
+
+        map.fitBounds(bounds, {
+            padding: 20,          // 可选：边距（单位像素）
+            maxZoom: 15,          // 可选：最大缩放级别，避免太近
+            duration: 1000,        // 可选：动画时长（毫秒）
+            easing: (t) => {
+                return t;
+            }
+        });
+    } catch (error) {
+        console.error('RT_FitBoundsMapbox: 拟合地图边界时出错', error);
+    }
+
+};
+export const RT_FitBoundsMapboxNative = (map, featureCollection) => {
+    try {
+        if (!map || !featureCollection) {
+            console.error('RT_FitBoundsMapbox: map 或 featureCollection 参数不能为空');
+            return;
+        }
+
+        // ✅ 手写函数：计算 FeatureCollection 的 Bounding Box [minLng, minLat, maxLng, maxLat]
+        const calculateBoundingBox = (featureCollection) => {
+            let minLng = Infinity;
+            let minLat = Infinity;
+            let maxLng = -Infinity;
+            let maxLat = -Infinity;
+
+            // 遍历每个 feature
+            for (const feature of featureCollection.features) {
+                const coords = feature.geometry.coordinates;
+
+                // 递归遍历坐标（支持 Point、LineString、Polygon、Multi 等）
+                const traverseCoordinates = (coords) => {
+                    if (!Array.isArray(coords)) return;
+
+                    // 判断坐标类型：
+                    if (typeof coords[0] === 'number') {
+                        // 🟢 这是一个点 [lng, lat]
+                        const [lng, lat] = coords;
+                        if (lng < minLng) minLng = lng;
+                        if (lng > maxLng) maxLng = lng;
+                        if (lat < minLat) minLat = lat;
+                        if (lat > maxLat) maxLat = lat;
+                    } else if (Array.isArray(coords[0])) {
+                        // 🔵 可能是 LineString、Polygon、MultiPoint 等（嵌套数组）
+                        for (const subCoords of coords) {
+                            traverseCoordinates(subCoords);
+                        }
+                    }
+                    // 注意：更复杂的 GeometryCollection 或 MultiPolygon 也按类似方式递归，但此处已覆盖大部分情况
+                };
+
+                traverseCoordinates(coords);
+            }
+
+            // 如果没有有效的点（比如 featureCollection 为空或没有坐标）
+            if (
+                minLng === Infinity ||
+                minLat === Infinity ||
+                maxLng === -Infinity ||
+                maxLat === -Infinity
+            ) {
+                console.error('RT_FitBoundsMapbox: 未找到有效的坐标点');
+                return null;
+            }
+
+            return [minLng, minLat, maxLng, maxLat];
+        };
+
+        // ✅ 调用手写函数，计算 bounding box
+        const boundsArray = calculateBoundingBox(featureCollection);
+
+        if (!boundsArray) {
+            console.error('RT_FitBoundsMapbox: 无法计算有效的包围盒');
+            return;
+        }
+
+        const [minLng, minLat, maxLng, maxLat] = boundsArray;
+
+        const bounds = [
+            [minLng, minLat], // 左下角
+            [maxLng, maxLat]  // 右上角
+        ];
+        console.log(`output->bounds`, bounds)
+        bounds.forEach(item => {
+            item.forEach((i, index) => {
+                item[index] = Number((i).toFixed(6))
+            })
+        })
+        // ✅ 调用 Mapbox 的 fitBounds
+        map.fitBounds(bounds, {
+            padding: 50,          // 可选：边距（单位像素）
+            maxZoom: 15,          // 可选：最大缩放级别，避免太近
+            duration: 1000,        // 可选：动画时长（毫秒）
+        });
+
+    } catch (error) {
+        console.error('RT_FitBoundsMapbox: 拟合地图边界时出错', error);
+    }
+};

package/lib/RainteeSourceMapTool.js

@@ -0,0 +1,104 @@
+export const treeDataAdapter = (data) => {
+    let i = 0
+    let treeData = []
+    let checkedKeys = []
+    data.forEach((item) => {
+        let kvs = item.id.split(';').map(kvstr => kvstr.split('='))
+        let groups = kvs.find(item => item[0] === 'Main')[1].split('/')
+        let layerName = kvs.find(item => item[0] === 'CN')[1]
+        let currentNode = treeData;
+        groups.forEach((group, index) => {
+            currentNode.find(item => item.label === group) || i++
+            currentNode.find(item => item.label === group) || currentNode.push({
+                id: i,
+                label: group,
+                children: []
+            })
+            currentNode = currentNode.find(item => item.label === group).children
+        })
+        i++
+        currentNode.push({
+            id: i,
+            label: layerName,
+            fullLayerName: groups.length === 0 ? layerName : groups.join('-') + '-' + layerName,
+            layerId: item.id,
+            opacity: '1.0',
+        })
+        if (item.layout && item.layout.visibility == 'visible') {
+            checkedKeys.push(i)
+        }
+    })
+    return { treeData, checkedKeys }
+}
+export const treeDataAdapterNext = (data) => {
+    let i = 0
+    let treeData = []
+    let checkedKeys = []
+    data.forEach((item) => {
+        let kvs = item.id.split(';').map(kvstr => kvstr.split('='))
+        let groups = kvs.find(item => item[0] === 'Main')[1].split('/')
+        let layerName = kvs.find(item => item[0] === 'CN')[1]
+        let currentNode = treeData;
+        let fullLayerName = groups.length === 0 ? layerName : groups.join('-') + '-' + layerName
+        groups.forEach((group, index) => {
+            currentNode.find(item => item.label === group) || i++
+            currentNode.find(item => item.label === group) || currentNode.push({
+                id: `TreeId=${i};`,
+                label: group,
+                children: []
+            })
+            currentNode = currentNode.find(item => item.label === group).children
+        })
+        i++
+        currentNode.push({
+            id: item.id,
+            label: layerName,
+            fullLayerName: getLayerIdFidld(item.id, 'Main') + '-' + getLayerIdFidld(item.id, 'CN'),
+            layerId: item.id,
+            opacity: '1.0',
+        })
+        if (item.layout && item.layout.visibility == 'visible') {
+            checkedKeys.push(i)
+        }
+    })
+    return { treeData, checkedKeys }
+}
+export const getLayerIdFidld = (str, field) => {
+    let kvs = str.split(';').map(kvstr => kvstr.split('='))
+    let layerId = kvs.find(item => item[0] === field)[1]
+    return layerId
+}
+/**
+ * 生成唯一ID字符串
+ * @param {string} projectId 项目ID
+ * @param {string} objectTypeId 对象种类ID
+ * @param {string} groupId 对象分组ID
+ * @param {string} objectId 对象ID
+ * @returns {string} 唯一ID字符串
+ */
+export const GenerateUniqueId = (
+    projectId,
+    objectTypeId,
+    groupId,
+    objectId
+) => {
+    // 将参数组合成一个字符串
+    const combinedString = `${projectId}|${objectTypeId}|${groupId}|${objectId}`;
+
+    // 使用简单的哈希函数生成固定长度的字符串
+    let hash = 0;
+    for (let i = 0; i < combinedString.length; i++) {
+        const char = combinedString.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+
+    // 转换为16进制字符串并补零到8位
+    const hexHash = (hash >>> 0).toString(16).padStart(8, "0");
+
+    // 添加前缀和分隔符增强可读性
+    return `UID-${projectId.slice(0, 2)}-${objectTypeId.slice(
+        0,
+        2
+    )}-${groupId.slice(0, 2)}-${hexHash}`;
+}

package/lib/RasterLayerController.js

@@ -0,0 +1,261 @@
+// RasterLayerController.js
+
+export default class RasterLayerController {
+    constructor() {
+        this._panel = null;
+        this._isOpen = false;
+    }
+
+    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._container.appendChild(this._button);
+
+        this._button.addEventListener('click', () => {
+            this._togglePanel();
+        });
+
+        this._map.on('idle', () => {
+            this._updateRasterLayers();
+
+        });
+
+        this._map.on('styledata', () => {
+            this._updateRasterLayers();
+        });
+
+        this._map.on('sourcedata', () => {
+            this._updateRasterLayers();
+        });
+
+        this._updateRasterLayers();
+
+        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);
+        }
+    }
+
+    _togglePanel() {
+        if (this._isOpen) {
+            this._closePanel();
+        } else {
+            this._openPanel();
+        }
+    }
+
+    _openPanel() {
+        this._createPanelIfNeeded();
+        this._updateRasterLayers();
+        this._panel.style.display = 'block';
+        this._isOpen = true;
+    }
+
+    _closePanel() {
+        if (this._panel) {
+            this._panel.style.display = 'none';
+        }
+        this._isOpen = false;
+    }
+
+    _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 = '15px';
+            title.style.fontSize = '16px';
+            this._dialog.appendChild(title);
+
+            // 图层列表容器（原 _layerListContainer）
+            this._layerListContainer = document.createElement('div');
+            this._layerListContainer.style.cssText = `
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+          `;
+            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() {
+
+        const layers = this._map.getStyle().layers || [];
+        const rasterLayers = layers.filter(layer => layer.type === 'raster');
+
+        let buttonText = '底图：无';
+        let firstVisibleLayerId = null;
+
+        // 查找当前显示的图层（visibility === 'visible'）
+        for (const layer of rasterLayers) {
+            const visibility = this._map.getLayoutProperty(layer.id, 'visibility');
+            if (visibility === 'visible') {
+                firstVisibleLayerId = layer.id;
+                break;
+            }
+        }
+
+        if (firstVisibleLayerId) {
+            buttonText = `底图：${firstVisibleLayerId}`;
+        } else if (rasterLayers.length > 0) {
+            buttonText = '底图：无';
+        }
+
+        this._button.innerHTML = buttonText;
+
+        // 清空旧的图层列表
+        if (this._layerListContainer) { this._layerListContainer.innerHTML = '' };
+
+        rasterLayers.forEach(layer => {
+            const layerId = layer.id;
+            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;
+            `;
+
+            row.addEventListener('click', () => {
+                // 设置当前图层为 visible，其他为 none
+                rasterLayers.forEach(l => {
+                    const vis = l.id === layerId ? 'visible' : 'none';
+                    this._map.setLayoutProperty(l.id, 'visibility', vis);
+                });
+
+                // 更新按钮文字
+                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';
+
+            row.appendChild(label);
+            this._layerListContainer && this._layerListContainer.appendChild(row);
+        });
+        if (rasterLayers.length === 0) {
+            this._layerListContainer && this._layerListContainer.appendChild(document.createTextNode('无可选内容'));
+        }
+    }
+}

package/lib/TerrainToggleControl.js

@@ -0,0 +1,127 @@
+// terrain-toggle-control.js
+
+// 自定义控件类
+export default class TerrainToggleControl {
+    constructor() {
+        // 创建外层容器
+        this._container = document.createElement('div');
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group terrain-toggle-ctrl';
+
+        // 默认状态为关闭
+        this._terrainEnabled = false;
+
+        // 创建按钮
+        this._toggleButton = document.createElement('button');
+        this._toggleButton.type = 'button';
+        this._toggleButton.className = 'terrain-toggle-button';
+
+        // 创建一个包裹容器，用于放置 SVG 图标
+        this._iconWrapper = document.createElement('span');
+        this._iconWrapper.className = 'terrain-toggle-icon';
+
+        // === 重点：插入你自己的 SVG 图标到这里 ===
+        // 我们使用 currentColor 来控制颜色，你可以替换下面的 SVG 为你自己的
+        this._iconWrapper.innerHTML = `
+          <svg t="1761534052011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16743" width="16" height="16"><path d="M1012.736 833.44a12910.144 12910.144 0 0 0-104.096-221.248 15708.992 15708.992 0 0 1-60.48-126.56c-20.384-43.072-22.592-86.208-42.176-126.272-45.056-94.496-57.6-342.528-158.4-287.808-100.864 54.624-272.512 581.472-272.512 581.472S302.272 313.088 236.672 340.96c-65.6 27.872-76.224 113.376-103.2 171.104-11.584 24.16-15.04 53.92-27.392 80.64l-24.16 77.664c-12.256 26.912-24.48 53.056-36.544 79.104-12.032 25.984-23.04 50.048-33.28 72.768a137.088 137.088 0 0 0-11.968 49.472c-0.704 16.32 1.856 30.88 7.552 43.904 5.888 12.96 15.04 23.68 27.84 32.064 12.736 8.288 28.96 12.544 48.48 12.544H931.84a109.472 109.472 0 0 0 47.968-9.92 80.096 80.096 0 0 0 32.064-26.816c7.584-11.296 11.68-24.736 12.096-40.128a110.176 110.176 0 0 0-11.2-49.92h-0.064z m0 0" p-id="16744" fill="#000000"></path></svg>
+        `;
+        // 如果你有自己的 SVG 文件，也可以通过 <img src="..." /> 引入，但无法直接改颜色，推荐用内联 SVG + currentColor
+
+        // 将图标插入按钮
+        this._toggleButton.appendChild(this._iconWrapper);
+
+        // 绑定点击事件
+        this._toggleButton.addEventListener('click', () => {
+            this._toggle();
+        });
+
+        // 将按钮加入控件容器
+        this._container.appendChild(this._toggleButton);
+    }
+
+    // 切换地形状态
+    _toggle() {
+        const map = this._map; // 获取当前地图实例
+        if (!map) return;
+
+        if (this._terrainEnabled) {
+            // 当前是开启的，要关闭
+            map.setTerrain(null);
+            // setPitch with an animation of 2 seconds.
+            map.setPitch(0, { duration: 2000 });
+
+            this._terrainEnabled = false;
+        } else {
+            // 当前是关闭的，要开启
+            this._load3DTerrain(map);
+            map.setPitch(45, { duration: 2000 });
+
+            // setPitch with an animation of 2 seconds.
+            this._terrainEnabled = true;
+        }
+
+        // 更新 UI 显示
+        this._updateToggleTextAndStyle();
+    }
+
+    // 加载并开启 3D 地形（复用你提供的逻辑）
+    _load3DTerrain(map) {
+        if (!map) return;
+        if (map.getTerrain()) return;
+        if (!map.getSource('三维地形')) {
+            map.addSource('三维地形', this._default3DTerrainProperties);
+        }
+        map.setTerrain({ source: '三维地形', exaggeration: 1.5 });
+    }
+
+    // 更新按钮文字和样式
+    _updateToggleTextAndStyle() {
+        const btn = this._toggleButton;
+        const isOn = this._terrainEnabled;
+
+        if (isOn) {
+            // 开启状态：亮蓝色
+            btn.style.backgroundColor = '#007cbf'; // 亮蓝色背景
+            btn.style.color = 'white'; // 文字颜色（如果有）
+            this._iconWrapper.style.color = '#007cbf'; // SVG 图标颜色
+        } else {
+            // 关闭状态：灰色
+            btn.style.backgroundColor = '#cccccc'; // 灰色背景
+            btn.style.color = 'black'; // 文字颜色
+            this._iconWrapper.style.color = '#666666'; // SVG 图标颜色（推荐用深灰）
+        }
+
+        // 按钮基础样式
+        btn.style.border = 'none';
+        btn.style.borderRadius = '4px';
+        btn.style.padding = '8px 12px';
+        btn.style.cursor = 'pointer';
+        btn.style.fontWeight = 'bold';
+        btn.style.display = 'flex';
+        btn.style.alignItems = 'center';
+        btn.style.justifyContent = 'center';
+    }
+    _onStyleData = () => {
+        let isTerrainOn = map.getTerrain() !== null;
+        if (this._terrainEnabled == isTerrainOn) { return } else {
+            this._terrainEnabled = isTerrainOn;
+            this._updateToggleTextAndStyle();
+        }
+    };
+    // Mapbox 要求的接口：当控件被添加到地图时调用
+    onAdd(map) {
+        this._map = map; // 保存地图实例的引用
+        this._default3DTerrainProperties = map._default3DTerrainProperties
+        const isTerrainEnabled = map.getTerrain() !== null;
+        this._terrainEnabled = isTerrainEnabled;
+        this._map.on('styledata', this._onStyleData);
+        return this._container; // 返回控件的 DOM 元素
+    }
+
+    // Mapbox 要求的接口：当控件从地图移除时调用
+    onRemove() {
+        this._container.remove();
+        this._map.off('styledata', _onStyleData);
+        this._map = null;
+    }
+}
+

package/lib/useDrawCache.js

@@ -0,0 +1,58 @@
+const taskQueue = [];
+const addTask = (task) => {
+    taskQueue.push(task)
+}
+const runTask = () => {
+
+    if (taskQueue.length > 0) {
+        const task = taskQueue.shift()
+        let drawCacheIndex = localStorage.getItem('drawCacheIndex') != null ? JSON.parse(localStorage.getItem('drawCacheIndex')) : []
+        if (task.action === 'add') {
+            drawCacheIndex.push(String(task.data.id))
+            localStorage.setItem(String(task.data.id), JSON.stringify(task.data))
+        } else if (task.action === 'remove') {
+            let index = drawCacheIndex.indexOf(String(task.data.id))
+            if (index !== -1) {
+                drawCacheIndex.splice(index, 1)
+                localStorage.removeItem(String(task.data.id))
+            }
+        }
+        localStorage.setItem('drawCacheIndex', JSON.stringify(drawCacheIndex))
+        runTask()
+    }
+}
+const addFeature = (feature) => {
+    addTask({
+        action: 'add',
+        data: feature
+    })
+    runTask()
+}
+
+const removeFeature = (feature) => {
+    addTask({
+        action: 'remove',
+        data: feature
+    })
+    runTask()
+}
+const getDrawCache = () => {
+    let drawCacheIndex = localStorage.getItem('drawCacheIndex') != null ? JSON.parse(localStorage.getItem('drawCacheIndex')) : []
+    let drawCache = drawCacheIndex.map(item => {
+        return JSON.parse(localStorage.getItem(item))
+    })
+    return drawCache
+}
+const clearDrawCache = () => {
+    let drawCacheIndex = localStorage.getItem('drawCacheIndex') != null ? JSON.parse(localStorage.getItem('drawCacheIndex')) : []
+    drawCacheIndex.forEach(item => {
+        localStorage.removeItem(item)
+    })
+    localStorage.removeItem('drawCacheIndex')
+}
+export {
+    addFeature,
+    removeFeature,
+    getDrawCache,
+    clearDrawCache
+}