haocang-csk-gis-frame-work

v1.0.23

Published

12 days ago

GIS地图框架工具集 — MapboxGL / MapGIS 地图初始化、图层管理、绘制编辑、巡检业务等功能模块

0High
0Medium
0Low

k2ethunger

gis mapboxgl mapgis map geospatial

🚀 快速开始 - 外部注入配置

方式一：外部注入配置（推荐）

// gis配置全局导入
import mapConfig from "@utils/gis-frame-work/baseSetting/config/mapConfig";
Vue.prototype.$mapConfig = mapConfig;
import {createMapboxUtils} from 'haocang-csk-gis-frame-work'
import {
    base_sources,
    business_layers,
    business_sources,
    Dark_Layers,
    Dark_Sources,
    Image_Layers,
    LayerConfig,
    Light_Layers,
    Light_Sources,
    Vector_Layers,
} from '@utils/gis-frame-work/baseSetting/gis-data/sources_layers';
import { Dark_Style, Light_Style } from '@utils/gis-frame-work/baseSetting/style/DevMapConfig';
import TokenUtils from '@utils/gis-frame-work/baseSetting/utils/TokenUtils';
// 工厂函数 (main.js中进行全局设置)
window.mapboxUtil = createMapboxUtils({
    mapConfig,
    sourcesData: {
        base_sources,
        business_layers,
        business_sources,
        Dark_Layers,
        Dark_Sources,
        Image_Layers,
        LayerConfig,
        Light_Layers,
        Light_Sources,
        Vector_Layers, },
    styles: { Dark_Style, Light_Style },
    tokenUtils: TokenUtils,
});

const mapboxUtil = createMapboxUtils({
  mapConfig,
  sourcesData: { Dark_Sources, Dark_Layers, Light_Sources, Light_Layers /* ... */ },
  styles: { Dark_Style, Light_Style },
  tokenUtils: TokenUtils,
});

mapboxUtil.create(opts, callback);

config 参数说明

工厂函数 createMapboxUtils 接收的 config 对象包含以下字段：

Mapbox GIS 工具集 API 文档

本文档基于 mapbox.js 源码整理，供二次开发人员快速查阅。该工具集封装了 Mapbox GL JS 及 AntV L7 的常用操作，统一了坐标系转换、图层管理与交互绘制逻辑。

📦 核心配置属性

一、地图初始化与生命周期

| 函数名 | 参数 | 返回值 | 功能简介 | | :--- | :--- | :--- | :--- | | create | (opts, callback) | void | 创建并初始化地图实例。自动处理资源加载、主题切换及 AntV L7 Scene 创建。回调返回 (map, antv7Scene)。 | | getMap | - | MapboxMap | 获取原生 Mapbox GL Map 实例。 | | getAntV7Scene | - | L7.Scene | 获取 AntV L7 Scene 实例，用于高级可视化扩展。 | | disposeMap | - | void | 销毁地图实例，释放 DOM 事件监听器及 WebGL 上下文。 |

二、底图与图层管理

三、样式与主题

四、点位标记与交互

五、绘制工具 (点/线/面)

💡 编辑提示: 所有绘制方法均支持 enableEditing 配置。开启后图形顶点可被鼠标拖拽，编辑完成触发 onEditComplete 回调。

六、巡检业务专用

七、POI 搜索

八、相机与视角控制

九、辅助工具

十、地图导出

| 函数名 | 参数 | 返回值 | 功能简介 | | :--- | :--- | :--- | :--- | | exportBlob | - | Promise | 异步导出当前视图为 PNG Blob。自动合成 Mapbox 主画布与 AntV L7 叠加层。 | | exportBase64 | - | Promise | 异步导出当前视图为 Base64 字符串。自动合成多图层画布。 |

⚠️ 二开注意事项

坐标系转换：高德相关方法内部已自动执行 WGS84 → GCJ02 转换，请勿在外部重复转换。
编辑状态清理：调用 render* 更新图形时会自动先禁用旧编辑状态；手动移除图层请务必使用对应的 remove* 方法以确保事件监听器被正确清理。
瓦片节流：内置 300ms 瓦片请求节流机制，避免短时间内重复请求相同瓦片。
弹窗偏移：addCustomPopup 基础偏移为 [37, -107]，不同尺寸弹窗需通过 addOnOffset 参数微调。
在线/离线模式：底图来源由 mapConfig.isOnline 决定。离线模式使用本地 GeoServer 瓦片，在线模式使用天地图服务，切换时需确保对应服务可用。