qy-vue-plugins 1.0.2-beta → 1.0.2

package/dist/types/types/map.d.ts

@@ -45,6 +45,104 @@ export interface ResearchCommonEntry {
     longitudeStart?: string;
     latitudeStart?: string;
 }
+/**
+ * GeographicLayerEntity 地理专题图层实体
+ */
+/**
+ * 轨迹图片信息
+ */
+export interface TrackImage {
+    text: string;
+    id: string;
+    altitude: string;
+    longitude: string;
+    latitude: string;
+    imageList: string;
+    voiceList: string;
+    createDate: number;
+    editDate: number;
+    trackLineId: string;
+    type: "image";
+    title: string;
+    remark: string;
+    accuracy: string;
+    speed: string;
+    isLocalDelete: number;
+    syncDate: number;
+}
+/**
+ * 轨迹文本信息
+ */
+export interface TrackText {
+    text: string;
+    id: string;
+    altitude: string;
+    longitude: string;
+    latitude: string;
+    imageList: string;
+    voiceList: string;
+    createDate: number;
+    editDate: number;
+    trackLineId: string;
+    type: "text";
+    title: string;
+    remark: string;
+    accuracy: string;
+    speed: string;
+    isLocalDelete: number;
+    syncDate: number;
+}
+/**
+ * 轨迹音频信息
+ */
+export interface TrackVoice {
+    text: string;
+    id: string;
+    altitude: string;
+    longitude: string;
+    latitude: string;
+    imageList: string;
+    voiceList: string;
+    createDate: number;
+    editDate: number;
+    trackLineId: string;
+    type: "voice";
+    title: string;
+    remark: string | null;
+    accuracy: string | null;
+    speed: string | null;
+    isLocalDelete: number;
+    syncDate: number;
+}
+/**
+ * 图片项
+ */
+export interface ImageItem {
+    imagePath: string;
+    id: string;
+    url: string;
+    title: string | null;
+    remark: string | null;
+    size: string | null;
+    disabled: string | null;
+}
+/**
+ * 音频项
+ */
+export interface VoiceItem {
+    id: string;
+    url: string;
+    title?: string;
+    duration?: number;
+}
+/**
+ * 轨迹媒体信息
+ */
+export interface TrackMedia {
+    images?: TrackImage[];
+    texts?: TrackText[];
+    voices?: TrackVoice[];
+}
 /**
  * GeographicLayerEntity 地理专题图层实体
  */
@@ -94,6 +192,12 @@ export interface GeographicLayerEntity {
     children?: any[];
     layerShapes?: string | null;
     subCount?: number | null;
+    speciesGroupWhere?: Record<string, any>;
+    dbfUrl?: string | null;
+    /**
+     * 轨迹媒体信息（仅 track 类型使用）
+     */
+    media?: TrackMedia;
 }
 /**
  * GeographicLayerEntity 地理专题图层实体
@@ -188,14 +292,14 @@ export interface LineSettings {
     /** 点标签颜色（用于表单显示） */
     pointLabelColor?: string;
 }
-export type LayerType = "species-group" | "point" | "line" | "symbol" | "shape" | "topic" | "map-layer" | "sample-group" | "track" | "interest-point" | "shp" | "geojson";
+export type LayerType = "species-group" | "point" | "line" | "symbol" | "shape" | "topic" | "map-layer" | "sample-group" | "track" | "interest-point" | "shp" | "geojson" | "tif" | "kml" | "kmz";
 export interface FillColor {
     key: string;
-    rgb: string;
     type: "default" | "custom";
     color: string;
     value: string;
-    opacity: number;
+    rgb?: string;
+    opacity?: number;
 }
 export interface CircleBaseConfig {
     circleType: "icon";
@@ -212,9 +316,9 @@ export interface CircleConfig {
     circleColor: string;
     circleRadius: number;
     iconImageUrl?: string;
-    circleOpacity: number;
     circleStrokeColor?: string;
     circleStrokeWidth?: number;
+    circleOpacity?: number;
     circleStrokeOpacity?: number;
     /**
      * 渲染方式
@@ -224,7 +328,7 @@ export interface CircleConfig {
     renderMode?: "color" | "icon";
     /** 点位样式 */
     pointStyle?: string;
-    /** 点位着色颜色 */
+    /** 点位着色颜色 - rgba 格式 */
     pointTintColor?: string;
     /** 点位尺寸 */
     pointSize?: number;
@@ -247,7 +351,7 @@ export interface OutlineConfig {
     lineStyle: LineStyle;
     outlineColor: string;
     outlineWidth: number;
-    outlineOpacity: number;
+    outlineOpacity?: number;
 }
 export interface AntiAliasingConfig {
     value: boolean;
@@ -311,7 +415,7 @@ export interface CustomLayerConfig {
     lineWidth: number;
     textColor: string;
     targetScreen: "normal";
-    defaultChecked: boolean;
+    defaultChecked: number | boolean;
     synchronizeApp: boolean;
     lineStyle: LineStyle;
     remark?: string;

package/package/apply-element-plus-theme.ts

@@ -0,0 +1,23 @@
+const elementPlusThemeVars = {
+  "--el-color-primary": "#34c28a",
+  "--el-color-primary-rgb": "52, 194, 138",
+  "--el-color-primary-light-3": "#71d4ad",
+  "--el-color-primary-light-5": "#9ae1c5",
+  "--el-color-primary-light-7": "#c2eddc",
+  "--el-color-primary-light-8": "#d6f3e8",
+  "--el-color-primary-light-9": "#ebf9f3",
+  "--el-color-primary-dark-2": "#2a9b6e",
+};
+
+export function applyElementPlusTheme() {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const rootStyle = document.documentElement.style;
+  Object.entries(elementPlusThemeVars).forEach(([name, value]) => {
+    rootStyle.setProperty(name, value);
+  });
+}
+
+applyElementPlusTheme();

package/package/css/common.scss

@@ -0,0 +1,33 @@
+.qy-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.qy-flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.qy-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.qy-flex-justify {
+  display: flex;
+  justify-content: center;
+}
+.qy-flex-align {
+  display: flex;
+  align-items: center;
+}
+
+.qy-flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.qy-flex-align-end {
+  display: flex;
+  justify-content: flex-end;
+}

package/package/css/element-plus-theme.scss

@@ -0,0 +1,30 @@
+:root {
+  --el-color-primary: #34c28a;
+  --el-color-primary-rgb: 52, 194, 138;
+  --el-color-primary-light-3: #71d4ad;
+  --el-color-primary-light-5: #9ae1c5;
+  --el-color-primary-light-7: #c2eddc;
+  --el-color-primary-light-8: #d6f3e8;
+  --el-color-primary-light-9: #ebf9f3;
+  --el-color-primary-dark-2: #2a9b6e;
+}
+
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  --el-button-hover-border-color: var(--el-color-primary-light-3);
+  --el-button-active-bg-color: var(--el-color-primary-dark-2);
+  --el-button-active-border-color: var(--el-color-primary-dark-2);
+  --el-button-outline-color: var(--el-color-primary-light-5);
+}
+
+.el-button--primary.is-plain {
+  --el-button-bg-color: var(--el-color-primary-light-9);
+  --el-button-border-color: var(--el-color-primary-light-5);
+  --el-button-text-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary);
+  --el-button-hover-border-color: var(--el-color-primary);
+  --el-button-active-bg-color: var(--el-color-primary-dark-2);
+  --el-button-active-border-color: var(--el-color-primary-dark-2);
+}

package/package/css/map.scss

@@ -0,0 +1,42 @@
+.research-location-icon-el {
+  width: 32px;
+  height: 32px;
+  .research-location-img-el {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.research-location-point {
+  width: 28px;
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  .research-location-point-content {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .research-location-point-content-inner {
+      width: 22px;
+      height: 22px;
+      background-color: red;
+      border-radius: 50%;
+    }
+  }
+
+  .research-location-point-line {
+    width: 6px;
+    height: 16px;
+    background-color: #fff;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+}

package/package/element-plus-style.ts

@@ -0,0 +1,48 @@
+import "element-plus/es/components/alert/style/css";
+import "element-plus/es/components/autocomplete/style/css";
+import "element-plus/es/components/button/style/css";
+import "element-plus/es/components/carousel/style/css";
+import "element-plus/es/components/carousel-item/style/css";
+import "element-plus/es/components/cascader/style/css";
+import "element-plus/es/components/checkbox/style/css";
+import "element-plus/es/components/checkbox-group/style/css";
+import "element-plus/es/components/col/style/css";
+import "element-plus/es/components/collapse/style/css";
+import "element-plus/es/components/collapse-item/style/css";
+import "element-plus/es/components/color-picker/style/css";
+import "element-plus/es/components/date-picker/style/css";
+import "element-plus/es/components/dialog/style/css";
+import "element-plus/es/components/divider/style/css";
+import "element-plus/es/components/dropdown/style/css";
+import "element-plus/es/components/dropdown-item/style/css";
+import "element-plus/es/components/dropdown-menu/style/css";
+import "element-plus/es/components/empty/style/css";
+import "element-plus/es/components/form/style/css";
+import "element-plus/es/components/form-item/style/css";
+import "element-plus/es/components/icon/style/css";
+import "element-plus/es/components/image/style/css";
+import "element-plus/es/components/input/style/css";
+import "element-plus/es/components/input-number/style/css";
+import "element-plus/es/components/loading/style/css";
+import "element-plus/es/components/message/style/css";
+import "element-plus/es/components/message-box/style/css";
+import "element-plus/es/components/notification/style/css";
+import "element-plus/es/components/option/style/css";
+import "element-plus/es/components/option-group/style/css";
+import "element-plus/es/components/pagination/style/css";
+import "element-plus/es/components/popover/style/css";
+import "element-plus/es/components/radio/style/css";
+import "element-plus/es/components/radio-group/style/css";
+import "element-plus/es/components/scrollbar/style/css";
+import "element-plus/es/components/select/style/css";
+import "element-plus/es/components/slider/style/css";
+import "element-plus/es/components/switch/style/css";
+import "element-plus/es/components/tab-pane/style/css";
+import "element-plus/es/components/table/style/css";
+import "element-plus/es/components/table-column/style/css";
+import "element-plus/es/components/tabs/style/css";
+import "element-plus/es/components/tooltip/style/css";
+import "element-plus/es/components/tree-select/style/css";
+import "element-plus/es/components/upload/style/css";
+import "./css/element-plus-theme.scss";
+import "./apply-element-plus-theme";

package/package/manageTable/index.ts

@@ -1,7 +1,12 @@
+import "../element-plus-style";
+import { applyElementPlusTheme } from "../apply-element-plus-theme";
+
 import MangerTable from "./manageTable.vue";
 import imageReview from "./components/imageReview.vue";
 import { speciesNameQueryKey } from "./ProvideKeys";
 import { filterEventBus, sortEventBus } from "./EventKeys";
+
+applyElementPlusTheme();
 // 命名导出
 export { MangerTable, imageReview, speciesNameQueryKey, filterEventBus, sortEventBus };
 

package/package/mapbox/index.ts

@@ -1,3 +1,6 @@
+import "../element-plus-style";
+import { applyElementPlusTheme } from "../apply-element-plus-theme";
+
 import MapView from "./MapView.vue";
 import MapLayer from "./components/mapLayer.vue";
 import MapTopic from "./components/mapTopic.vue";
@@ -8,6 +11,8 @@ import MapCompass from "./components/mapCompass.vue";
 import MapTools from "./components/MapTools.vue";
 import MapLegend from "./components/MapLegend.vue";
 import { mapStyleChangedBus, locateToLayerCenterKeyBus } from "./EventKeys";
+
+applyElementPlusTheme();
 // Exporting all components and the mapStyleChangedBus for use in other parts of the application
 // This allows for easy import of all map-related components and functionality
 // in other modules or components within the application.

package/package/mapboxV2/constant.ts

@@ -20,8 +20,6 @@ export const fillColorList: FillColor[] = [
     key: "",
     value: "",
     color: DefaultColor,
-    rgb: "rgba(103, 194, 58)",
-    opacity: 0.6,
   },
 ];
 export const DefaultLineSettings: LineSettings = {
@@ -34,8 +32,7 @@ export const outlineConfigList: OutlineConfig[] = [
   {
     type: "default",
     outlineColor: "rgba(103, 194, 58, 1)",
-    outlineOpacity: 1,
-    outlineWidth: 1,
+    outlineWidth: 2, // 改为 2，与 LayerStyleEditDialog 保持一致
     zoom: 0,
     lineStyle: "solid", //dash
   },
@@ -53,8 +50,6 @@ export const circleConfigList: CircleConfig[] = [
     zoom: 0, //缩放级别
     circleRadius: 2,
     circleStrokeWidth: 0,
-    circleStrokeOpacity: 1,
-    circleOpacity: 1,
   },
 ];
 
@@ -66,10 +61,8 @@ export const circleBaseConfig: CircleBaseConfig = {
 };
 
 // 点图层默认样式配置
-export const defaultPointLayerPaintConfig:
-  | SpeciesGroupSettings
-  | PointSettings = {
-  pointTintColor: "#02d2e0",
+export const defaultPointLayerPaintConfig: SpeciesGroupSettings | PointSettings = {
+  pointTintColor: "rgba(103, 194, 58, 0.6)",
   pointRenderType: "color",
 };
 
@@ -88,8 +81,7 @@ export const defaultStyleConfig: MapStyleConfig = {
   },
 };
 
-export const mapIconBaseUrl =
-  "https://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/geojson/beijihua-map-icon/";
+export const mapIconBaseUrl = "https://shpfile-data-1314977817.cos.ap-guangzhou.myqcloud.com/geojson/beijihua-map-icon/";
 
 export const mapIconNameList = [
   {

package/package/mapboxV2/index.ts

@@ -1,3 +1,6 @@
+import "../element-plus-style";
+import { applyElementPlusTheme } from "../apply-element-plus-theme";
+
 import MapView from "./MapView.vue";
 import MapLayer from "./pages/MapLayer.vue";
 import MapTopic from "./components/mapTopic.vue";
@@ -8,6 +11,8 @@ import MapCompass from "./components/mapCompass.vue";
 import MapTools from "./components/MapTools.vue";
 import MapLegend from "./components/MapLegend.vue";
 import { mapStyleChangedBus, locateToLayerCenterKeyBus } from "./EventKeys";
+
+applyElementPlusTheme();
 // Exporting all components and the mapStyleChangedBus for use in other parts of the application
 // This allows for easy import of all map-related components and functionality
 // in other modules or components within the application.

package/package/mapboxV2/useTif.ts

@@ -45,22 +45,23 @@ export function useTif(map: Ref<mapboxgl.Map | undefined>) {
    *
    * @param url - TIF数据的URL或File对象
    * @param colorRange - 可选的颜色范围，默认为黑色到白色的渐变
+   * @param autoFit - 是否自动调整地图视图以显示完整图像，默认为false
    * @returns void
    */
-  async function addTifLayer(url: string | File, colorRange: string[] = ["#000000", "#FFFFFF"]) {
+  async function addTifLayer(url: string | File, colorRange: string[] = ["#000000", "#FFFFFF"], autoFit: boolean = false) {
     console.log("Adding TIF layer with URL/File:", url, colorRange);
     // 生成唯一的图层ID
     const tifId = `tif-layer-${new Date().getTime()}`;
     if (url instanceof File) {
       // 如果是File对象，读取为ArrayBuffer
       const arrayBuffer = await readFileAsArrayBuffer(url);
-      await processGeoTIFF(arrayBuffer, colorRange, tifId);
+      await processGeoTIFF(arrayBuffer, colorRange, tifId, autoFit);
       tifIds.value.push(tifId);
     } else if (typeof url === "string") {
       // 如果是URL字符串，直接请求数据
       const response = await fetch(url);
       const arrayBuffer = await response.arrayBuffer();
-      await processGeoTIFF(arrayBuffer, colorRange, tifId);
+      await processGeoTIFF(arrayBuffer, colorRange, tifId, autoFit);
       tifIds.value.push(tifId);
     }
     return { tifId, dataRange }; // 返回生成的图层ID
@@ -71,9 +72,11 @@ export function useTif(map: Ref<mapboxgl.Map | undefined>) {
    * 解析GeoTIFF文件，计算边界，读取数据，并创建可视化图层
    *
    * @param arrayBuffer - GeoTIFF文件的ArrayBuffer数据
-   * @param colorRange - 颜色渐变范围，默认从黑色到白色（目前未使用，保留为未来功能扩展）
+   * @param colorRange - 颜色渐变范围，默认从黑色到白色
+   * @param tifId - 图层ID
+   * @param autoFit - 是否自动调整地图视图以显示完整图像，默认为false
    */
-  async function processGeoTIFF(arrayBuffer: ArrayBuffer, colorRange: string[] = ["#000000", "#FFFFFF"], tifId = "geotiff-layer") {
+  async function processGeoTIFF(arrayBuffer: ArrayBuffer, colorRange: string[] = ["#000000", "#FFFFFF"], tifId = "geotiff-layer", autoFit: boolean = false) {
     // 解析GeoTIFF
     const tiff = await fromArrayBuffer(arrayBuffer);
     const image = await tiff.getImage();
@@ -143,14 +146,16 @@ export function useTif(map: Ref<mapboxgl.Map | undefined>) {
     // 将图像添加到Mapbox
     addImageToMap(imageData, width, height, bounds, tifId);
 
-    // 调整地图视图以显示完整图像
-    map.value?.fitBounds(
-      [
-        [bounds[0], bounds[1]],
-        [bounds[2], bounds[3]],
-      ],
-      { padding: 50 } // 添加50像素的内边距，确保图像完全可见
-    );
+    // 根据参数决定是否自动调整地图视图
+    if (autoFit) {
+      map.value?.fitBounds(
+        [
+          [bounds[0], bounds[1]],
+          [bounds[2], bounds[3]],
+        ],
+        { padding: 50 } // 添加50像素的内边距，确保图像完全可见
+      );
+    }
   }
 
   /**