qy-vue-plugins 0.1.7 → 0.1.8

package/README.md

@@ -17,7 +17,62 @@
 
 ## 安装与使用
 
-(此处添加项目安装和使用说明)
+```bash
+npm install qy-vue-plugins
+```
+
+### 导入组件
+
+```js
+// 导入单个组件
+import MapView from "qy-vue-plugins/mapbox/MapView";
+import mapLayer from "qy-vue-plugins/mapbox/components/mapLayer";
+
+// 或者导入整个模块
+import * as MapComponents from "qy-vue-plugins/mapbox/components";
+```
+
+### TypeScript 配置
+
+如果在 TypeScript 项目中使用时遇到模块解析问题（例如"找不到模块或其相应的类型声明"错误），请尝试以下解决方案：
+
+1. **更新 tsconfig.json 中的模块解析策略**
+
+   确保使用 "node16"、"nodenext" 或 "bundler" 作为 `moduleResolution` 选项：
+
+   ```json
+   {
+     "compilerOptions": {
+       "moduleResolution": "node16" // 或者 "nodenext" 或 "bundler"
+       // 其他配置...
+     }
+   }
+   ```
+
+2. **添加路径映射**
+
+   或者，将以下路径映射添加到你的 `tsconfig.json` 配置中：
+
+   ```json
+   {
+     "compilerOptions": {
+       "paths": {
+         "qy-vue-plugins/*": ["./node_modules/qy-vue-plugins/dist/types/*"]
+       }
+     }
+   }
+   ```
+
+3. **直接从 dist 目录导入类型**
+
+   作为临时解决方案，也可以直接从 dist 目录导入类型：
+
+   ```ts
+   // 导入组件
+   import MapView from "qy-vue-plugins/mapbox/MapView";
+   // 显式导入类型
+   import type { MapViewProps } from "qy-vue-plugins/dist/types/mapbox/MapView.vue";
+   ```
 
 ## 功能详情
 

package/package/mapbox/EventKeys.js

@@ -0,0 +1,41 @@
+import { useEventBus } from "@vueuse/core";
+// 删除专题
+const deleteTopicKey = Symbol("delete-topic");
+//  删除专题实例
+export const deleteTopicBus = useEventBus(deleteTopicKey);
+// 新建专题
+const createTopicKey = Symbol("create-topic");
+// 新建专题实例
+export const createTopicBus = useEventBus(createTopicKey);
+// 修改专题
+const updateTopicKey = Symbol("update-topic");
+// 修改专题实例
+export const updateTopicBus = useEventBus(updateTopicKey);
+//专题面板点击事件
+const topicPanelClickKey = Symbol("topic-panel-click");
+export const topicPanelClickBus = useEventBus(topicPanelClickKey);
+// 渲染地理数据
+export const renderGeographicDataKey = Symbol("render-geographic-data");
+// 渲染地理数据实例
+export const renderGeographicDataKeyBus = useEventBus(renderGeographicDataKey);
+// 显示或隐藏专题图层
+export const toggleGeographicLayerKey = Symbol("toggle-geographic-layer");
+// 显示或隐藏专题图层实例
+export const toggleGeographicLayerKeyBus = useEventBus(toggleGeographicLayerKey);
+// 显示图层编辑事件
+const showLayerEditKey = Symbol("show-layer-edit");
+// 显示图层编辑实例
+export const showLayerEditKeyBus = useEventBus(showLayerEditKey);
+// 定位到图层中心的事件
+const locateToLayerCenterKey = Symbol("locate-to-layer-center");
+// 定位到图层中心的实例
+export const locateToLayerCenterKeyBus = useEventBus(locateToLayerCenterKey);
+// 图层管理弹窗事件
+const showLayerDialogKey = Symbol("show-layer-dialog");
+export const showLayerDialogKeyBus = useEventBus(showLayerDialogKey);
+// 地图加载完成事件
+const mapLoadedKey = Symbol("map-loaded");
+export const mapLoadedBus = useEventBus(mapLoadedKey);
+// 地图样式切换事件
+const mapStyleChangedKey = Symbol("map-style-changed");
+export const mapStyleChangedBus = useEventBus(mapStyleChangedKey);

package/package/mapbox/EventKeys.ts

@@ -0,0 +1,55 @@
+import { useEventBus, type EventBusKey } from "@vueuse/core";
+import type { GeographicLayerEntity, GeographicLayerFormEntity } from "../types/map";
+
+// 删除专题
+const deleteTopicKey: EventBusKey<GeographicLayerEntity> = Symbol("delete-topic");
+//  删除专题实例
+export const deleteTopicBus = useEventBus(deleteTopicKey);
+
+// 新建专题
+const createTopicKey: EventBusKey<GeographicLayerFormEntity> = Symbol("create-topic");
+// 新建专题实例
+export const createTopicBus = useEventBus(createTopicKey);
+
+// 修改专题
+const updateTopicKey: EventBusKey<GeographicLayerFormEntity> = Symbol("update-topic");
+// 修改专题实例
+export const updateTopicBus = useEventBus(updateTopicKey);
+
+//专题面板点击事件
+const topicPanelClickKey = Symbol("topic-panel-click");
+export const topicPanelClickBus = useEventBus(topicPanelClickKey);
+
+// 渲染地理数据
+export const renderGeographicDataKey: EventBusKey<{ mapRootId: string; layer: GeographicLayerEntity }> = Symbol("render-geographic-data");
+
+// 渲染地理数据实例
+export const renderGeographicDataKeyBus = useEventBus(renderGeographicDataKey);
+
+// 显示或隐藏专题图层
+export const toggleGeographicLayerKey: EventBusKey<{ mapRootId: string; topic: GeographicLayerEntity; visible: boolean; delLayer?: boolean }> =
+  Symbol("toggle-geographic-layer");
+// 显示或隐藏专题图层实例
+export const toggleGeographicLayerKeyBus = useEventBus(toggleGeographicLayerKey);
+
+// 显示图层编辑事件
+const showLayerEditKey: EventBusKey<{ e: MouseEvent; mapRootId: string; layer: GeographicLayerEntity }> = Symbol("show-layer-edit");
+// 显示图层编辑实例
+export const showLayerEditKeyBus = useEventBus(showLayerEditKey);
+
+// 定位到图层中心的事件
+const locateToLayerCenterKey: EventBusKey<{ mapRootId: string; layer: GeographicLayerEntity }> = Symbol("locate-to-layer-center");
+// 定位到图层中心的实例
+export const locateToLayerCenterKeyBus = useEventBus(locateToLayerCenterKey);
+
+// 图层管理弹窗事件
+const showLayerDialogKey: EventBusKey<{ action: "add" | "edit"; pid: number | string; layer?: GeographicLayerEntity }> = Symbol("show-layer-dialog");
+export const showLayerDialogKeyBus = useEventBus(showLayerDialogKey);
+
+// 地图加载完成事件
+const mapLoadedKey: EventBusKey<{ mapRootId: string }> = Symbol("map-loaded");
+export const mapLoadedBus = useEventBus(mapLoadedKey);
+
+// 地图样式切换事件
+const mapStyleChangedKey: EventBusKey<{ mapRootId: string }> = Symbol("map-style-changed");
+export const mapStyleChangedBus = useEventBus(mapStyleChangedKey);

package/package/mapbox/ProvideKeys.js

@@ -0,0 +1,14 @@
+// 主题选择的键
+export const selectTopicsKey = Symbol("selectTopics");
+// 取属性表的接口key
+export const dbfDataRequestKey = Symbol("dbfDataRequest");
+//调查数据查询接口
+export const researchDataRequestKey = Symbol("researchDataRequest");
+// 专题列表数据
+export const geographicLayerListKey = Symbol("geographicLayerList");
+// 地图实例
+export const mapInstanceKey = Symbol("mapInstance");
+// 已加载的图层
+export const thirdPartyLayersKey = Symbol("thirdPartyLayers");
+// 权限检查
+export const permissionCheckKey = Symbol("permissionCheck");

package/package/mapbox/ProvideKeys.ts

@@ -0,0 +1,23 @@
+import { GeographicLayerEntity, MapTopicAction } from "@/types/map";
+import type { InjectionKey, Ref } from "vue";
+
+// 主题选择的键
+export const selectTopicsKey: InjectionKey<Readonly<Ref<(number | string)[]>>> = Symbol("selectTopics");
+
+// 取属性表的接口key
+export const dbfDataRequestKey: InjectionKey<(sourceId: number | string, page: number, pageSize: number) => Promise<any>> = Symbol("dbfDataRequest");
+
+//调查数据查询接口
+export const researchDataRequestKey: InjectionKey<(topic: GeographicLayerEntity) => Promise<{ lineInfo: any[]; pointInfo: any }>> = Symbol("researchDataRequest");
+
+// 专题列表数据
+export const geographicLayerListKey: InjectionKey<Readonly<Ref<GeographicLayerEntity[]>>> = Symbol("geographicLayerList");
+
+// 地图实例
+export const mapInstanceKey: InjectionKey<Ref<mapboxgl.Map | undefined>> = Symbol("mapInstance");
+
+// 已加载的图层
+export const thirdPartyLayersKey: InjectionKey<Ref<GeographicLayerEntity[]>> = Symbol("thirdPartyLayers");
+
+// 权限检查
+export const permissionCheckKey: InjectionKey<(action: MapTopicAction, topic: GeographicLayerEntity) => boolean> = Symbol("permissionCheck");

package/package/mapbox/components/MapLegend.vue.js

@@ -0,0 +1,185 @@
+import { inject, ref, computed, onMounted } from "vue";
+import { thirdPartyLayersKey } from "../ProvideKeys";
+import LegendPoint from "../widgets/LegendPoint.vue";
+import LegendLine from "../widgets/LegendLine.vue";
+import LegendSymbol from "../widgets/LegendSymbol.vue";
+import { parseLayerPaintConfig } from "../utils";
+import { outlineConfigList } from "../constant";
+const thirdPartyLayers = inject(thirdPartyLayersKey, ref([]));
+const legendVisible = ref(false);
+// 根据图层类型对图层进行分组
+const legendItems = computed(() => {
+    if (!thirdPartyLayers.value)
+        return [];
+    // 这里只展示可见的图层
+    return thirdPartyLayers.value.filter((layer) => {
+        // 可以根据实际需求添加筛选条件，例如只显示特定类型或有名称的图层
+        return layer.layerName && (layer.layerType === "species-group" || layer.layerType === "symbol" || layer.layerType === "line" || layer.layerType === "shape");
+    });
+});
+const fillColorList = (topic) => {
+    return parseLayerPaintConfig(topic.layerPaintConfig, topic.layerType).fillColorList || outlineConfigList;
+};
+// 切换图例显示/隐藏
+const toggleLegend = () => {
+    legendVisible.value = !legendVisible.value;
+};
+onMounted(() => {
+    // 组件挂载时可以进行一些初始化操作
+    console.log("Legend component mounted");
+});
+debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_ctx = {};
+let __VLS_components;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['legend-content']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-content']} */ ;
+// CSS variable injection 
+// CSS variable injection end 
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "map-legend qy-flex-col" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ onClick: (__VLS_ctx.toggleLegend) },
+    ...{ class: "legend-header qy-flex-row qy-flex-between" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+    ...{ class: "qyuan icon-tuli" },
+});
+__VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+    ...{ class: "close-icon" },
+});
+if (__VLS_ctx.legendVisible) {
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+        ...{ class: "qyuan icon-xiangxia" },
+    });
+}
+else {
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+        ...{ class: "qyuan icon-xiangshang" },
+    });
+}
+__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+    ...{ class: "legend-content" },
+    ...{ style: ({ height: __VLS_ctx.legendVisible ? '300px' : '0px', padding: __VLS_ctx.legendVisible ? '8px 12px' : '0px' }) },
+});
+if (__VLS_ctx.legendItems.length > 0) {
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+        ...{ class: "legend-section" },
+    });
+    for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.legendItems))) {
+        __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+            key: (index),
+            ...{ class: "legend-item qy-flex-col" },
+        });
+        __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+            ...{ class: "legend-label" },
+        });
+        (item.layerName);
+        if (item.layerType === 'species-group' || (item.layerType === 'symbol' && (item.layerDataType === 'research' || item.geoJSON))) {
+            /** @type {[typeof LegendPoint, ]} */ ;
+            // @ts-ignore
+            const __VLS_0 = __VLS_asFunctionalComponent(LegendPoint, new LegendPoint({
+                layerPaintConfig: (item.layerPaintConfig || item.customLayerConfig),
+                layerType: (item.layerType),
+            }));
+            const __VLS_1 = __VLS_0({
+                layerPaintConfig: (item.layerPaintConfig || item.customLayerConfig),
+                layerType: (item.layerType),
+            }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+        }
+        else if (item.layerType === 'symbol' && !item.layerDataType) {
+            /** @type {[typeof LegendSymbol, ]} */ ;
+            // @ts-ignore
+            const __VLS_3 = __VLS_asFunctionalComponent(LegendSymbol, new LegendSymbol({
+                topic: (item),
+            }));
+            const __VLS_4 = __VLS_3({
+                topic: (item),
+            }, ...__VLS_functionalComponentArgsRest(__VLS_3));
+        }
+        else if (item.layerType === 'line') {
+            /** @type {[typeof LegendLine, ]} */ ;
+            // @ts-ignore
+            const __VLS_6 = __VLS_asFunctionalComponent(LegendLine, new LegendLine({
+                topic: (item),
+            }));
+            const __VLS_7 = __VLS_6({
+                topic: (item),
+            }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+        }
+        else if (item.layerType === 'shape') {
+            __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                ...{ style: {} },
+            });
+            for (const [color, index] of __VLS_getVForSourceType((__VLS_ctx.fillColorList(item)))) {
+                __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                    key: (index),
+                    ...{ class: "qy-flex-row qy-flex-align legend-item" },
+                });
+                __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                    ...{ class: "legend-block" },
+                    ...{ style: ({ backgroundColor: color.color }) },
+                });
+                __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+                    ...{ class: "legend-block-label" },
+                });
+                (color.value || "默认");
+            }
+        }
+    }
+}
+if (!__VLS_ctx.legendItems.length) {
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+        ...{ class: "qy-flex-center empty-state" },
+    });
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({
+        ...{ class: "qyuan icon-empty" },
+    });
+}
+/** @type {__VLS_StyleScopedClasses['map-legend']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-header']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-row']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-between']} */ ;
+/** @type {__VLS_StyleScopedClasses['qyuan']} */ ;
+/** @type {__VLS_StyleScopedClasses['icon-tuli']} */ ;
+/** @type {__VLS_StyleScopedClasses['close-icon']} */ ;
+/** @type {__VLS_StyleScopedClasses['qyuan']} */ ;
+/** @type {__VLS_StyleScopedClasses['icon-xiangxia']} */ ;
+/** @type {__VLS_StyleScopedClasses['qyuan']} */ ;
+/** @type {__VLS_StyleScopedClasses['icon-xiangshang']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-content']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-section']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-item']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-col']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-label']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-row']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-align']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-item']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-block']} */ ;
+/** @type {__VLS_StyleScopedClasses['legend-block-label']} */ ;
+/** @type {__VLS_StyleScopedClasses['qy-flex-center']} */ ;
+/** @type {__VLS_StyleScopedClasses['empty-state']} */ ;
+/** @type {__VLS_StyleScopedClasses['qyuan']} */ ;
+/** @type {__VLS_StyleScopedClasses['icon-empty']} */ ;
+var __VLS_dollars;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            LegendPoint: LegendPoint,
+            LegendLine: LegendLine,
+            LegendSymbol: LegendSymbol,
+            legendVisible: legendVisible,
+            legendItems: legendItems,
+            fillColorList: fillColorList,
+            toggleLegend: toggleLegend,
+        };
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+});
+; /* PartiallyEnd: #4569/main.vue */