vue3-mapbox-hooks 3.0.0

package/dist/types/mapbox.d.ts

@@ -0,0 +1,349 @@
+declare global {
+    namespace mapboxgl {
+        class Map {
+            constructor(options: MapOptions);
+            on(event: string, callback: (e: any) => void): void;
+            on(event: string, layerId: string | number, callback: (e: any) => void): void;
+            off(event: string, callback: (e: any) => void): void;
+            off(event: string, layerId: string | number, callback: (e: any) => void): void;
+            getCanvas(): HTMLCanvasElement;
+            addSource(id: string | number, source: Source): void;
+            addLayer(layer: Layer): void;
+            setLayoutProperty(id: string, property: string, value: any): void;
+            hasImage(id: string | number): boolean;
+            removeImage(id: string | number): void;
+            removeLayer(id: string | number): void;
+            removeSource(id: string | number): void;
+            queryRenderedFeatures(point: any, options: {
+                layers: (string | number)[];
+            }): any[];
+            easeTo(options: {
+                center: [number, number];
+                zoom: number;
+                padding?: {
+                    top: number;
+                    bottom: number;
+                    left: number;
+                    right: number;
+                };
+            }): void;
+            setPadding(padding: {
+                top: number;
+                bottom: number;
+                left: number;
+                right: number;
+            }): void;
+            loadImage(url: string, callback: (error: any, image: any) => void): void;
+            addImage(id: string | number, image: any, options?: {
+                width?: number;
+                height?: number;
+                sdf?: boolean;
+            }): void;
+            getSource(id: string | number): SourceIns | undefined;
+            getLayer(id: string | number): Layer | undefined;
+            getZoom(): number;
+            setZoom(zoom: number): this;
+            setCenter(center: [number, number]): this;
+            flyTo(options: {
+                center?: [number, number];
+                zoom?: number;
+                padding?: {
+                    top?: number;
+                    bottom?: number;
+                    left?: number;
+                    right?: number;
+                };
+            }): void;
+            project(lngLat: [number, number]): any;
+            fitScreenCoordinates(min: any, max: any, bearing?: number, options?: any): void;
+            getBearing(): number;
+            remove(): void;
+            getStyle(): styles;
+            setStyle(theme?: string): void;
+            doubleClickZoom: {
+                enable(): void;
+                disable(): void;
+            };
+            moveLayer(layerId: string | number, beforeId: string | number): void;
+        }
+        interface SourceIns {
+            setData(data: any): void;
+            getClusterExpansionZoom?(clusterId: any, callback: (error: any, zoom: number) => void): void;
+            _frameImages?: string[];
+            _frameCount?: number;
+            _animationIntervalId?: number;
+            _data?: GeoJSON;
+        }
+        interface styles {
+            layers: Layer[];
+            sources: source[];
+        }
+        class Popup {
+            constructor(options?: {
+                offset?: [number, number] | number | {
+                    [key: string]: [number, number];
+                };
+                closeOnClick?: boolean;
+                closeButton?: boolean;
+                anchor?: 'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+                className?: string;
+            });
+            setLngLat(lngLat: [number, number]): this;
+            setDOMContent(content: HTMLElement | Element | string): this;
+            setHTML(html: string): this;
+            addTo(map: Map): this;
+            remove(): void;
+        }
+        class Marker {
+            constructor(options?: {
+                element?: HTMLElement;
+                anchor?: string;
+                offset?: [number, number];
+                color?: string;
+                draggable?: boolean;
+            });
+            setLngLat(lngLat: [number, number]): this;
+            addTo(map: Map): this;
+            remove(): void;
+            getElement(): HTMLElement;
+        }
+        interface MapOptions {
+            container: string | HTMLElement;
+            style?: any;
+            center?: number[];
+            zoom?: number;
+            minZoom?: number;
+            maxZoom?: number;
+            dragRotate?: boolean;
+            antialias?: boolean;
+            attributionControl?: boolean;
+            trackResize?: boolean;
+            renderWorldCopies?: boolean;
+        }
+        interface Source {
+            type: string;
+            tiles?: string[];
+            tileSize?: number;
+            maxzoom?: number;
+            minzoom?: number;
+            data?: any;
+            cluster?: boolean;
+            clusterMaxZoom?: number;
+            clusterRadius?: number;
+            lineMetrics?: boolean;
+        }
+        interface Layer {
+            id: string | number;
+            type: string;
+            source: any;
+            paint?: any;
+            layout?: any;
+        }
+        interface source {
+            data: any;
+            type: string;
+        }
+    }
+    const turf: {
+        featureCollection(features: any[]): any;
+        point(coordinates: [number, number]): any;
+        nearestPoint(targetPoint: any, pointsCollection: any): any;
+        centerOfMass(features: any): any;
+        bbox(features: any): any;
+        bearing(from: any, to: any): any;
+        lineDistance(features: any): any;
+        distance(from: any, to: any, options?: any): any;
+        lineString(param: any[]): any;
+        along(line: any, distance: number, options?: any): any;
+        polygon(coordinates: any[]): any;
+        area(polygon: any): number;
+        length(line: any, options?: any): number;
+        buffer(line: any, distance: number, options?: any): any;
+    };
+}
+/** mapboxgl.Map 类类型 */
+export type MapboxglMap = {
+    new (options: mapboxgl.MapOptions): mapboxgl.Map;
+};
+/** mapboxgl.Map 实例类型 */
+export type MapboxglMapInstance = mapboxgl.Map;
+/** mapboxgl.Popup 类类型 */
+export type MapboxglPopup = {
+    new (options?: {
+        offset?: [number, number] | number | {
+            [key: string]: [number, number];
+        };
+        closeOnClick?: boolean;
+        closeButton?: boolean;
+        anchor?: 'bottom' | 'top' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        className?: string;
+    }): mapboxgl.Popup;
+};
+/** mapboxgl.Popup 实例类型 */
+export type MapboxglPopupInstance = mapboxgl.Popup;
+/** mapboxgl.Marker 类类型 */
+export type MapboxglMarker = {
+    new (options?: {
+        element?: HTMLElement;
+        anchor?: string;
+        offset?: [number, number];
+        color?: string;
+        draggable?: boolean;
+    }): mapboxgl.Marker;
+};
+/** mapboxgl.Marker 实例类型 */
+export type MapboxglMarkerInstance = mapboxgl.Marker;
+/** mapboxgl.MapOptions 类型 */
+export type MapboxglMapOptions = mapboxgl.MapOptions;
+/** mapboxgl.Source 类型 */
+export type MapboxglSource = mapboxgl.Source;
+/** mapboxgl.SourceIns 类型 */
+export type MapboxglSourceIns = mapboxgl.SourceIns;
+/** mapboxgl.Layer 类型 */
+export type MapboxglLayer = mapboxgl.Layer;
+/** mapboxgl.styles 类型 */
+export type MapboxglStyles = mapboxgl.styles;
+/** turf 命名空间类型 */
+export interface TurfNamespace {
+    featureCollection(features: any[]): any;
+    point(coordinates: [number, number]): any;
+    nearestPoint(targetPoint: any, pointsCollection: any): any;
+    centerOfMass(features: any): any;
+    bbox(features: any): any;
+    bearing(from: any, to: any): any;
+    lineDistance(features: any): any;
+    distance(from: any, to: any, options?: any): any;
+    lineString(param: any[]): any;
+    along(line: any, distance: number, options?: any): any;
+    polygon(coordinates: any[]): any;
+    area(polygon: any): number;
+    length(line: any, options?: any): number;
+    buffer(line: any, distance: number, options?: any): any;
+}
+export interface MarkerInstance {
+    setLngLat(coordinates: [number, number]): MarkerInstance;
+    addTo(map: mapboxgl.Map): MarkerInstance;
+    remove(): void;
+    getElement(): HTMLElement;
+}
+export interface GeoJSON {
+    type: string;
+    features: GeoJSONFeature[] | any;
+}
+export interface GeoJSONFeature {
+    type: string;
+    properties?: any;
+    geometry: {
+        type: string;
+        coordinates: [number, number] | [number, number][];
+    };
+}
+export interface TiandituMapConfig {
+    paint?: any;
+}
+export interface MapboxConfig {
+    theme?: string;
+    center?: [number, number];
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    glyphs?: string;
+    [key: string]: any;
+}
+export interface Point {
+    coordinates: [number, number];
+    properties?: Record<string, any>;
+    [key: string]: any;
+}
+export interface MarkerOptions {
+    icon: string | null;
+    layerId: string | number;
+    iconSize: number;
+    textField: string;
+    smoothlyAdd: boolean;
+    cluster: boolean;
+    [key: string]: any;
+}
+export interface SpriteMarkerOptions {
+    icon: string | null;
+    layerId: string | number;
+    iconSize: number;
+    textField: string;
+    frameCount: number;
+    frameWidth: number;
+    frameHeight: number;
+    fps: number;
+    cluster: boolean;
+    smoothlyAdd: boolean;
+    [key: string]: any;
+}
+export interface HeatmapOptions {
+    layerId: string;
+    heatmapRadius: any[];
+    heatmapIntensity: any[];
+    heatmapOpacity: number;
+    heatmapColor: any[];
+    [key: string]: any;
+}
+export interface HeatmapPoint {
+    gpsX: number;
+    gpsY: number;
+    [key: string]: any;
+}
+export interface GraphicOptions {
+    'point-area': string;
+    'point-move': string;
+    'line-single': string;
+    'line-move': string;
+    'line-area': string;
+    'radius-line': string;
+    'radius-label': string;
+    [key: string]: any;
+}
+export interface ShowGraphicOptions {
+    bufferDistance?: number;
+}
+export interface MapEvent {
+    lngLat: {
+        lng: number;
+        lat: number;
+    };
+    point: {
+        x: number;
+        y: number;
+    };
+}
+export interface GeoJSONData {
+    type: string;
+    features: GeoJSONFeature[];
+}
+export interface TurfLineString {
+    type: 'LineString';
+    coordinates: [number, number][];
+}
+export interface TurfPolygon {
+    type: 'Polygon';
+    coordinates: [number, number][][];
+}
+export interface PointPolygon {
+    type: 'Point';
+    coordinates: [number, number];
+}
+export interface TurfFeature {
+    type: 'Feature';
+    geometry: TurfLineString | TurfPolygon | PointPolygon;
+}
+export interface GeoJsonFeatureCollection {
+    type: 'FeatureCollection';
+    features: GeoJsonFeature[];
+}
+export interface GeoJsonFeature {
+    type: string;
+    properties?: any;
+    geometry: {
+        type: string;
+        coordinates: [number, number] | [number, number][] | [number, number][][];
+    };
+}
+export type DrawCallback = (coordinates: any) => void;
+export type LayerClickCallback = (e: any) => void;

package/dist/utils/common.d.ts

@@ -0,0 +1,63 @@
+import type { Point, GeoJSONData, TurfFeature, GeoJSONFeature } from '@/types/mapbox';
+/**
+ * 按指定字段对数组进行分组
+ * @param arr - 需要分组的原始数组
+ * @param key - 分组依据的字段名
+ * @returns - 返回分组后的数组
+ */
+export declare function groupBy<T extends Record<string, any>, K extends keyof T>(arr: T[], key: K): {
+    key: string;
+    items: unknown;
+}[];
+/**
+ * 计算点位中相同点位的数量
+ * @param array - 点位数组
+ * @returns - 带有重复计数的点位数组
+ */
+export declare const countDuplicates: (array?: Point[]) => Point[];
+/**
+ * 从待选点位数组中找出距离目标点位最近的点位
+ * @param targetLngLat - 目标经纬度
+ * @param coordinates - 待选点位坐标数组
+ * @returns - 最近点位的坐标
+ */
+export declare const findMinPointByCoordinates: (targetLngLat: [number, number], coordinates: [number, number][]) => [number, number];
+/**
+ * 获取点位集合的中心点
+ * @param points - 点位数组
+ * @returns - 中心点坐标
+ */
+export declare function getCenterPoints(points?: [number, number][]): [number, number];
+/**
+ * 对弹框数据进行修正，由于mapbox接收值的特性，当对象中存在引用类型数据时会转为Json字符串，在展示前需要对数据进行修复还原
+ * @param data - 原始弹框数据
+ * @returns - 修正后的弹框数据
+ */
+export declare const parseJSONStrings: (data: any) => any;
+/**
+ * 获取线要素
+ * 从点数据生成线要素数组
+ * @param jsonPoint - 点数据
+ * @returns 线要素数组
+ */
+export declare function getLineFeatures(jsonPoint: GeoJSONData): GeoJSONFeature[];
+/**
+ * 创建圆形 GeoJSON
+ * 根据中心点和半径生成圆形多边形
+ * @param center - 中心点坐标 [经度, 纬度]
+ * @param radiusInKm - 半径（公里）
+ * @param points - 圆周上的点数，默认128
+ * @returns 圆形 GeoJSON Feature
+ */
+export declare function createGeoJSONCircle(center: [number, number], radiusInKm: number, points?: number): TurfFeature;
+/**
+ * 创建扇形 GeoJSON
+ * 根据中心点、半径和角度范围生成扇形多边形
+ * @param center - 中心点坐标 [经度, 纬度]
+ * @param radiusInKm - 半径（公里）
+ * @param startAngle - 起始角度（度，0-360，0为正北方向顺时针）
+ * @param endAngle - 结束角度（度，0-360）
+ * @param steps - 圆弧上的步数，默认64
+ * @returns 扇形 GeoJSON Feature
+ */
+export declare function createGeoJSONSector(center: [number, number], radiusInKm: number, startAngle: number, endAngle: number, steps?: number): TurfFeature;

package/dist/utils/config.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 地图默认配置
+ */
+export declare const mapConfig: MapConfig;
+export interface MapConfig {
+    mapType: 'tianditu' | 'vector' | 'raster';
+    center: [number, number];
+    zoom: number;
+    minZoom: number;
+    maxZoom: number;
+    tk: string;
+    glyphs: string;
+    styleBaseUrl: string;
+    getBaseUrl: () => string;
+    [key: string]: any;
+}
+/**
+ * 栅格瓦片地图底图配置
+ */
+export interface RasterMapConfig {
+    layerId: string;
+    url: string;
+    isDefault: boolean;
+}
+export declare const rasterMapUrlList: RasterMapConfig[];
+/**
+ * 天地图瓦片地图底图配置
+ */
+export declare const tiandituTiles: string[];
+/**
+ * 设置栅格地图配置
+ * @param configs 栅格地图配置数组
+ */
+export declare function setRasterMapConfigs(configs: RasterMapConfig[]): void;
+/**
+ * 设置地图默认配置
+ * @param config 部分配置项
+ */
+export declare function setMapConfig(config: Partial<MapConfig>): void;

package/dist/utils/loadMap.d.ts

@@ -0,0 +1,71 @@
+import type { MapboxConfig, Point, MarkerOptions, SpriteMarkerOptions, HeatmapOptions, HeatmapPoint, TiandituMapConfig } from '@/types/mapbox';
+/**
+ * 加载地图
+ * @param containerId - 地图容器的ID
+ * @param options - 配置选项
+ * @returns - 返回加载的 mapboxgl.Map 对象
+ */
+export declare const initMap: (containerId: string, options?: MapboxConfig | TiandituMapConfig) => mapboxgl.Map | null;
+/**
+ * 加载栅格瓦片地图
+ * @param containerId - 地图容器的ID
+ * @param options
+ * @returns - 返回加载的 mapboxgl.Map 对象
+ */
+export declare const loadRasterMap: (containerId: string, options?: MapboxConfig) => mapboxgl.Map;
+/**
+ * 加载矢量地图
+ * @param containerId - 地图容器的ID
+ * @param theme - 样式主题
+ * @param options - 额外配置
+ * @returns - 返回加载的 mapboxgl.Map 对象
+ */
+export declare const loadVectorMap: (containerId: string, theme?: string, options?: MapboxConfig) => mapboxgl.Map;
+/**
+ * 加载天地图
+ * @param containerId - 地图容器的ID
+ * @param options - 额外的配置
+ * @returns - 返回加载的 mapboxgl.Map 对象
+ */
+export declare const loadTiandituMap: (containerId: string, options?: MapboxConfig) => mapboxgl.Map | null;
+/**
+ * 栅格地图切换底图
+ * @param map - mapboxgl.Map 对象
+ * @param layerId - 底图id
+ */
+export declare const changeRasterMapLayer: (map: mapboxgl.Map, layerId: string) => void;
+/**
+ * 矢量地图切换主题
+ * @param map - mapboxgl.Map 对象
+ * @param theme - 主题
+ */
+export declare function changeMapVectorTheme(map: mapboxgl.Map, theme: string): void;
+/**
+ * 添加标记
+ * @param map - mapboxgl.Map 对象
+ * @param points - 点位数组
+ * @param options - 配置选项
+ * @param callback - 点击回调函数
+ */
+export declare const addMarker: (map: mapboxgl.Map, points?: Point[], options?: Partial<MarkerOptions>, callback?: (feature: any, features: any[]) => void) => void;
+/**
+ * 添加精灵图标记点
+ * @param map - mapboxgl.Map 对象
+ * @param points - 点位数组
+ * @param options - 配置选项
+ * @param callback - 点击回调函数
+ */
+export declare const addSpriteMarker: (map: mapboxgl.Map, points?: Point[], options?: Partial<SpriteMarkerOptions>, callback?: (feature: any, features: any[]) => void) => void;
+/**
+ * 删除指定标记点图层（静态图，精灵图都可以）
+ * @param map - mapboxgl.Map 对象
+ * @param layerId - 图层id
+ */
+export declare const removeMarker: (map: mapboxgl.Map, layerId: string | number) => void;
+/**
+ * 添加热力图
+ * @param map - mapboxgl.Map 对象
+ * @param points - 热力图点位数组
+ * @param options - 配置选项
+ */
+export declare const addHeatmap: (map: mapboxgl.Map, points: HeatmapPoint[], options?: Partial<HeatmapOptions>) => void;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "vue3-mapbox-hooks",
+  "version": "3.0.0",
+  "description": "Vue 3 Composition API hooks for Mapbox GL JS",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/mapbox-gl.css": "./dist/mapbox-gl.css",
+    "./dist/mapbox-gl.js": "./dist/mapbox-gl.js",
+    "./dist/turf.min.js": "./dist/turf.min.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly && npm run copy:assets:win",
+    "copy:assets": "cp -r src/assets dist/ && cp src/mapbox-gl.css dist/ && cp src/mapbox-gl.js dist/ && cp src/turf.min.js dist/",
+    "copy:assets:win": "xcopy /E /I /Y src\\assets dist\\assets && copy /Y src\\mapbox-gl.css dist\\ && copy /Y src\\mapbox-gl.js dist\\ && copy /Y src\\turf.min.js dist\\",
+    "dev": "vite build --watch",
+    "test": "vitest",
+    "lint": "eslint src --ext .ts,.vue",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "rollup-plugin-string": "^3.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-static-copy": "^4.0.0",
+    "vue": "^3.4.0"
+  },
+  "keywords": [
+    "vue3",
+    "mapbox",
+    "hooks",
+    "composition-api",
+    "gis"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": ""
+}