npm - @gis_victory/gismap - Versions diffs - 1.0.0 - Mend

@gis_victory/gismap 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/.vscode/extensions.json +3 -0
package/README.md +5 -0
package/dist/gismap.css +1 -0
package/dist/gismap.es.js +34794 -0
package/dist/gismap.umd.js +2767 -0
package/dist/index.d.ts +1 -0
package/dist/vite.svg +1 -0
package/index.html +13 -0
package/package.json +32 -0
package/public/vite.svg +1 -0
package/src/App.vue +24 -0
package/src/components/MapLayer/MCheckbox.vue +38 -0
package/src/components/MapLayer/MapLayerApi.ts +97 -0
package/src/components/MapLayer/index.vue +34 -0
package/src/components/MapLegend/index.vue +20 -0
package/src/components/MapTools/index.vue +20 -0
package/src/components/MapView/index.vue +70 -0
package/src/components/Widgets/MapCompass/index.vue +89 -0
package/src/gismap.css +21 -0
package/src/index.css +11 -0
package/src/index.ts +7 -0
package/src/main.ts +6 -0
package/src/manager/EraserManager.ts +50 -0
package/src/manager/IconManager.ts +40 -0
package/src/manager/InitManager.ts +35 -0
package/src/manager/LayerManager.ts +119 -0
package/src/manager/MarkerManager.ts +65 -0
package/src/manager/MaskManager.ts +37 -0
package/src/manager/PopupManager.ts +46 -0
package/src/manager/RadarManager.ts +156 -0
package/src/manager/TDTManager.ts +149 -0
package/src/manager/TemplateManager.ts +13 -0
package/src/manager/TerrainManager.ts +61 -0
package/src/manager/VectorManager.ts +51 -0
package/src/manager/layer/Tile3DLayer.ts +114 -0
package/src/style/gismap-layer.css +3 -0
package/src/style/gismap-legend.css +3 -0
package/src/style/gismap-maptools.css +3 -0
package/src/style/mapbox-gl.css +1 -0
package/src/types/GSMap.ts +25 -0
package/src/utils/index.ts +22 -0
package/src/utils/pubsub.ts +54 -0
package/src/views/MapLayout.vue +28 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.app.json +15 -0
package/tsconfig.json +7 -0
package/tsconfig.node.json +25 -0
package/vite.config.ts +35 -0

package/dist/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {}

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "name": "@gis_victory/gismap",
+  "private": false,
+  "main": "dist/gismap.umd.js",
+  "module": "dist/gismap.es.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/gismap.css",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.18",
+    "deck.gl": "^9.1.14",
+    "@deck.gl/geo-layers": "^9.1.14",
+    "@deck.gl/mapbox": "^9.1.14",
+    "@gis_victory/mapbox-gl": "^3.14.5",
+    "@turf/turf": "^7.2.0",
+    "wellknown": "^0.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.0.5"
+  }
+}

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/App.vue ADDED Viewed

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import MapLayout from './views/MapLayout.vue'
+</script>
+<template>
+  <MapLayout />
+</template>
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/src/components/MapLayer/MCheckbox.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+  <div class="map-layer-group-item">
+    <el-checkbox v-model="checked" @change="onCheckedChange">
+      <div class="checked-content">
+        <span class="img"
+          ><img :src="data?.icon" height="16" width="16"
+        /></span>
+        <span class="title">{{ data?.title }}</span>
+      </div>
+    </el-checkbox>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "MCheckbox",
+}
+</script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+const props = defineProps({
+  data: {
+    type: Object,
+  },
+});
+const emit = defineEmits(["change"]);
+const checked = ref(props.data?.checked);
+const onCheckedChange = (val: boolean) => {
+  emit("change", val, props.data);
+};
+onMounted(() => {
+  if (props.data?.checked) onCheckedChange(props.data?.checked);
+});
+</script>

package/src/components/MapLayer/MapLayerApi.ts ADDED Viewed

@@ -0,0 +1,97 @@
+export default class MapLayerApi {
+  private map: mapboxgl.Map;
+  private checkedParentLayers: Map<string, any> = new Map();
+  private checkedLayers: Map<string, any> = new Map();
+  public queryLayerIds: string[] = [];
+  constructor(map: mapboxgl.Map) {
+    this.map = map;
+  }
+  private addSource(sourceConfig: any) {
+    if (!this.map.getSource(sourceConfig.id)) {
+      const source = Object.assign(
+        {
+          type: "geojson",
+          tiles: [sourceConfig.url],
+        },
+        sourceConfig
+      );
+      this.map.addSource(sourceConfig.id, source);
+    }
+    return this;
+  }
+  addLayer(layerConfig: any) {
+    this.addSource(layerConfig.source);
+    const layer = Object.assign(
+      {
+        id: layerConfig.id,
+        source: layerConfig.id,
+      },
+      layerConfig.layer
+    );
+    this.map.addLayer(layer);
+    this.checkedLayers.set(layer.id, {
+      layer,
+      extension: layerConfig?.extension,
+    });
+    if (layerConfig.isQuery) {
+      this.queryLayerIds.push(layer.id);
+    }
+    return this;
+  }
+  addGroupLayer(layer: any) {
+    const { id, layers } = layer;
+    if (layers) {
+      layers.forEach((_layer: any) => {
+        _layer.layer = Object.assign(
+          {
+            id: id,
+            source: id,
+          },
+          _layer.layer
+        );
+        _layer.source = Object.assign(
+          {
+            id: id,
+          },
+          _layer.source
+        );
+        this.addLayer(_layer);
+      });
+      this.checkedParentLayers.set(id, layer);
+    }
+  }
+  removeLayer(layer: any) {
+    if (this.map.getLayer(layer.layer.id)) {
+      this.map.removeLayer(layer.layer.id);
+    }
+    // if (this.map.getSource(layer.source.id)) {
+    //   this.map.removeSource(layer.source.id);
+    // }
+    this.checkedLayers.delete(layer.id);
+    if (layer.isQuery) {
+      this.queryLayerIds = this.queryLayerIds.filter(
+        (item) => item !== layer.layer.id
+      );
+    }
+  }
+  removeGroupLayer(layer: any) {
+    const { id, layers } = layer;
+    if (layers) {
+      layers.forEach((_layer: any) => {
+        _layer.layer = Object.assign({ id: id }, _layer.layer);
+        _layer.source = Object.assign({ id: id }, _layer.source);
+        this.removeLayer(_layer);
+      });
+    }
+    this.checkedParentLayers.delete(id);
+  }
+  getLayer(id: string) {
+    return id ? this.checkedLayers.get(id) : null;
+  }
+}

package/src/components/MapLayer/index.vue ADDED Viewed

@@ -0,0 +1,34 @@
+<template>
+  <div class="map-layer">
+    <div class="map-layer-box">
+      <div class="map-layer-group" v-for="(layer, index) in data" :key="index">
+        <div class="map-layer-group-title">{{ layer.title }}</div>
+        <div class="map-layer-group-content">
+          <div v-for="(item, index) in layer?.children || []" :key="index">
+            <MCheckbox :data="item" @change="onCheckedChange" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { inject } from "vue";
+import MCheckbox from "./MCheckbox.vue";
+import type GSMap from "../../types/GSMap";
+defineProps({
+  data: {
+    type: Array<any>,
+    default: () => [],
+  },
+});
+const map = inject<GSMap>("map");
+const onCheckedChange = (val: any, layer: any) => {
+  if (val) {
+    map?.manager.layerManager.addGroupLayer(layer);
+  } else {
+    map?.manager.layerManager.removeGroupLayer(layer);
+  }
+};
+</script>

package/src/components/MapLegend/index.vue ADDED Viewed

@@ -0,0 +1,20 @@
+<template>
+</template>
+<script lang="ts">
+export default {
+    name: "MapLegend",
+}
+</script>
+<script setup lang="ts">
+// import type GSMap from "../../types/GSMap";
+defineProps({
+    data: {
+        type: Array<any>,
+        default: () => [],
+    },
+});
+// const map = inject<GSMap>("map");
+</script>

package/src/components/MapTools/index.vue ADDED Viewed

@@ -0,0 +1,20 @@
+<template>
+</template>
+<script lang="ts">
+export default {
+    name: "MapTools",
+}
+</script>
+<script setup lang="ts">
+// import type GSMap from "../../types/GSMap";
+defineProps({
+    data: {
+        type: Array<any>,
+        default: () => [],
+    },
+});
+// const map = inject<GSMap>("map");
+</script>

package/src/components/MapView/index.vue ADDED Viewed

@@ -0,0 +1,70 @@
+<template>
+  <div ref="mapContainer" class="gismap-container" />
+  <div class="gismap-control" v-if="isLoad">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "MapView",
+}
+</script>
+<script setup lang="ts">
+import { ref, onMounted, provide } from "vue";
+import mapboxgl from "@gis_victory/mapbox-gl";
+import MapInit from "../../manager/InitManager";
+import GSMap from "../../types/GSMap";
+const emit = defineEmits(["load"]);
+const props = defineProps({
+  accessToken: {
+    type: String,
+    default: () => "",
+  },
+  tdtToken: {
+    type: String,
+    default: () => "",
+  },
+  options: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const isLoad = ref(false);
+const mapContainer = ref<HTMLElement>();
+onMounted(() => {
+  if (props.accessToken) {
+    mapboxgl.accessToken = props.accessToken;
+  }
+  const config: any = {
+    container: mapContainer.value!,
+    center: [120.65851, 29.5714],
+    minZoom: 8,
+    maxZoom: 20,
+    zoom: 15,
+    pitch: 65,
+    bearing: 0,
+    maxPitch: 85,
+    attributionControl: false,
+    spriteFormat: "auto",
+    ...props.options,
+  };
+  if (!config.style) {
+    config.style = {
+      version: 8,
+      sources: {},
+      layers: [],
+    }
+  }
+  const map = new GSMap(config);
+  map.on("load", () => {
+    map.manager = new MapInit(map, props.tdtToken);
+    isLoad.value = true;
+    emit("load", map);
+  });
+  provide("map", map);
+});
+</script>

package/src/components/Widgets/MapCompass/index.vue ADDED Viewed

@@ -0,0 +1,89 @@
+<template>
+  <div class="map-compass" @click="handleClick">
+    <svg
+      class="compass"
+      :style="{
+        transformStyle: 'preserve-3d',
+        transform: `rotate(${-bearing}deg)`,
+      }"
+      viewBox="0 0 100 100"
+    >
+      <!-- 指南针外圈 -->
+      <circle
+        cx="50"
+        cy="50"
+        r="45"
+        fill="rgba(0, 0, 0, 0.01)"
+        stroke="#333"
+        stroke-width="3"
+      />
+      <!-- 方向标记 -->
+      <text
+        x="50"
+        y="20"
+        text-anchor="middle"
+        font-size="12"
+        font-weight="bold"
+      >
+        N
+      </text>
+      <text
+        x="80"
+        y="50"
+        text-anchor="middle"
+        font-size="12"
+        font-weight="bold"
+      >
+        E
+      </text>
+      <text
+        x="50"
+        y="85"
+        text-anchor="middle"
+        font-size="12"
+        font-weight="bold"
+      >
+        S
+      </text>
+      <text
+        x="20"
+        y="50"
+        text-anchor="middle"
+        font-size="12"
+        font-weight="bold"
+      >
+        W
+      </text>
+      <!-- 指针 -->
+      <g class="needle">
+        <!-- 修改指针形状使其完全包含在圆内 -->
+        <polygon points="50,25 53,50 50,35 47,50" fill="#ff3333" />
+        <circle cx="50" cy="50" r="5" fill="#333" />
+      </g>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import GSMap from "../../../types/GSMap";
+import { inject, onMounted, ref } from "vue";
+const map = inject<GSMap>("map");
+// 获取地图旋转角度
+let bearing = ref(map?.getBearing() || 0);
+let pitch = ref(map?.getPitch() || 0);
+const handleClick = () => {
+  map?.resetNorthPitch();
+};
+onMounted(() => {
+  map?.on("rotate", (e) => {
+    bearing.value = e.target.getBearing();
+  });
+  map?.on("pitch", (e) => {
+    let _pitch = e.target.getPitch();
+    const correctedBearing =
+      e.target.getBearing() * Math.cos((_pitch * Math.PI) / 180);
+    pitch.value = correctedBearing;
+  });
+});
+</script>

package/src/gismap.css ADDED Viewed

@@ -0,0 +1,21 @@
+@import url(./style/mapbox-gl.css);
+@import url(./style/gismap-maptools.css);
+@import url(./style/gismap-layer.css);
+@import url(./style/gismap-legend.css);
+.map-layout {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+.gismap-container {
+    height: 100%;
+    width: 100%;
+    background-color: #000;
+    overflow: hidden;
+}
+.mapboxgl-ctrl-logo {
+    display: none !important;
+}

package/src/index.css ADDED Viewed

@@ -0,0 +1,11 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+#app {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import './gismap.css';
+import GisMapView from './components/MapView/index.vue';
+import GisMapLayer from './components/MapLayer/index.vue';
+import GisMapLegend from './components/MapLegend/index.vue';
+import GisMapTools from './components/MapTools/index.vue';
+export { GisMapView, GisMapLayer, GisMapLegend, GisMapTools };

package/src/main.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import './gismap.css'
+import './index.css'
+import App from './App.vue'
+createApp(App).mount('#app')

package/src/manager/EraserManager.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import type GSMap from "../types/GSMap";
+export default class EraserManager {
+  private map: GSMap;
+  private eraserLayerId: string = "eraser_layer";
+  private eraserDebugLayerId: string = "eraser_debug_layer";
+  constructor(map: GSMap) {
+    this.map = map;
+  }
+  add(url: string, clipLayerTypes: any) {
+    this.map.addSource(this.eraserLayerId, {
+      type: "geojson",
+      data: url,
+    });
+    this.map.addLayer({
+      id: this.eraserLayerId,
+      source: this.eraserLayerId,
+      type: "clip",
+      layout: {
+        "clip-layer-types": clipLayerTypes,
+        "clip-layer-scope": ["basemap"],
+      },
+    });
+  }
+  remove() {
+    this.map.removeLayer(this.eraserLayerId);
+    this.map.removeSource(this.eraserLayerId);
+  }
+  showPolygon() {
+    this.map.addLayer({
+      id: this.eraserDebugLayerId,
+      type: "line",
+      source: this.eraserLayerId,
+      paint: {
+        "line-color": "rgba(255, 0, 0, 0.9)",
+        "line-dasharray": [0, 4, 3],
+        "line-width": 5,
+      },
+    });
+  }
+  hidePolygon() {
+    if (this.map.getLayer(this.eraserDebugLayerId)) {
+      this.map.removeLayer(this.eraserDebugLayerId);
+    }
+  }
+}

package/src/manager/IconManager.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { Map } from "@gis_victory/mapbox-gl";
+export default class IconManager {
+  private map: Map;
+  constructor(map: Map) {
+    this.map = map;
+  }
+  load(icons: any[]) {
+    let promises = [];
+    for (let icon of icons) {
+      promises.push(this._loadImage(icon));
+    }
+    return new Promise((resolve, reject) => {
+      Promise.all(promises)
+        .then((_) => {
+          resolve(true);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+  _loadImage(icon: any) {
+    return new Promise((resolve, reject) => {
+      this.map.loadImage(icon.url, (error, image: any) => {
+        if (error) {
+          reject(false);
+          throw error;
+        }
+        if (this.map.hasImage(icon.name))
+          this.map.updateImage(icon.name, image);
+        else this.map.addImage(icon.name, image);
+        resolve(true);
+      });
+    });
+  }
+}

package/src/manager/InitManager.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import LayerManager from "./LayerManager";
+import EraserManager from "./EraserManager";
+import MaskManager from "./MaskManager";
+import PopupManager from "./PopupManager";
+import TDTManager from "./TDTManager";
+import TerrainManager from "./TerrainManager";
+import VectorManager from "./VectorManager";
+import TemplateManager from "./TemplateManager";
+import MarkerManager from "./MarkerManager";
+export default class MapInit {
+  private map: mapboxgl.Map;
+  public layerManager: LayerManager;
+  public maskManager: MaskManager;
+  public tdtManager: TDTManager;
+  public eraserManager: EraserManager;
+  public popupManager: PopupManager;
+  public markerManager: MarkerManager;
+  public terrainManager: TerrainManager;
+  public vectorManager: VectorManager;
+  public templateManager: TemplateManager;
+  constructor(map: mapboxgl.Map, tdtToken?: string) {
+    this.map = map;
+    this.layerManager = new LayerManager(this.map);
+    this.maskManager = new MaskManager(this.map);
+    this.tdtManager = new TDTManager(this.map, tdtToken);
+    this.eraserManager = new EraserManager(this.map);
+    this.popupManager = new PopupManager(this.map);
+    this.markerManager = new MarkerManager(this.map);
+    this.terrainManager = new TerrainManager(this.map);
+    this.vectorManager = new VectorManager(this.map);
+    this.templateManager = new TemplateManager();
+  }
+}