@gis_victory/gismap 1.0.0

package/src/manager/LayerManager.ts

@@ -0,0 +1,119 @@
+export default class LayerManager {
+  private map: mapboxgl.Map;
+  private checkedParentLayers: Map<string, any> = new Map();
+  private checkedLayers: Map<string, any> = new Map();
+  public queryLayerIds: string[] = [];
+  private symbolLayerIds: string[] = [];
+  private pointLayerIds: string[] = [];
+  private lineLayerIds: string[] = [];
+  private polygonLayerIds: 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);
+    }
+    switch (layer.type) {
+      case "symbol":
+        this.symbolLayerIds.push(layer.id);
+        break;
+      case "point":
+        this.pointLayerIds.push(layer.id);
+        break;
+      case "line":
+        this.lineLayerIds.push(layer.id);
+        break;
+      case "fill":
+      case "fill-extrusion":
+        this.polygonLayerIds.push(layer.id);
+        break;
+      default:
+        break;
+    }
+    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/manager/MarkerManager.ts

@@ -0,0 +1,65 @@
+import mapboxgl from "@gis_victory/mapbox-gl";
+import type GSMap from "../types/GSMap";
+
+export default class MarkerManager {
+  private map: GSMap;
+  private marker?: mapboxgl.Marker;
+  constructor(map: GSMap) {
+    this.map = map;
+  }
+
+  show({
+    position,
+    html,
+    markerIcon = "marker",
+    offset = [0, -30],
+    iconName,
+    flyTo = false,
+  }: {
+    position: any;
+    html?: string;
+    markerIcon?: string;
+    offset?: number[];
+    iconName?: string;
+    flyTo?: boolean;
+  }) {
+    if (this.marker) {
+      this.marker.remove();
+    }
+    debugger;
+    const markerContainer = document.createElement("div");
+    markerContainer.className = "marker-container";
+    const markerIconElement = document.createElement("div");
+    markerIconElement.className = `${markerIcon}`;
+    if (iconName) {
+      markerIconElement.innerHTML = `<img src='${iconName}' class="marker-icon" />`;
+    }
+    markerContainer.appendChild(markerIconElement);
+    this.marker = new mapboxgl.Marker({
+      element: markerContainer,
+      anchor: "bottom",
+    })
+      .setLngLat(position)
+      .addTo(this.map);
+    if (html) {
+      this.marker.setPopup(
+        new mapboxgl.Popup({
+          closeOnClick: false,
+          closeOnMove: false,
+          className: "map-popup",
+          anchor: "bottom",
+          offset: offset as [number, number],
+        }).setHTML(html)
+      ).togglePopup();
+    }
+    if (flyTo) {
+      this.map.flyTo({
+        center: position,
+      });
+    }
+  }
+
+  close() {
+    this.marker?.remove();
+  }
+}

package/src/manager/MaskManager.ts

@@ -0,0 +1,37 @@
+import type GSMap from "../types/GSMap";
+
+export default class MaskManager {
+  private map: GSMap;
+  private layerId: string = "mask_layer";
+  constructor(map: GSMap) {
+    this.map = map;
+  }
+  add(url: string, style: any = {}, beforeId?: string) {
+    if (!this.map.getSource(this.layerId)) {
+      this.map.addSource(this.layerId, {
+        type: "geojson",
+        data: url,
+      });
+    }
+    const option = Object.assign(
+      {
+        id: this.layerId,
+        source: this.layerId,
+        type: "fill",
+        paint: {
+          "fill-color": "#000000",
+          "fill-opacity": 0.5,
+        },
+      },
+      style
+    );
+    if (!this.map.getLayer(this.layerId)) {
+      this.map.addLayer(option, beforeId);
+    }
+  }
+
+  remove() {
+    this.map.removeLayer(this.layerId);
+    this.map.removeSource(this.layerId);
+  }
+}

package/src/manager/PopupManager.ts

@@ -0,0 +1,46 @@
+import mapboxgl from "@gis_victory/mapbox-gl";
+import type GSMap from "../types/GSMap";
+
+export default class PopupManager {
+  private map: GSMap;
+  private popup: mapboxgl.Popup;
+  constructor(map: GSMap) {
+    this.map = map;
+    this.popup = new mapboxgl.Popup({
+      closeOnClick: false,
+      closeOnMove: false,
+      className: "map-popup",
+      anchor: "bottom",
+    });
+  }
+
+  show({
+    position,
+    html,
+    offset = [0, -10],
+    flyTo = false,
+  }: {
+    position: any;
+    html: string;
+    offset: any;
+    flyTo: boolean;
+  }) {
+    if (html) {
+      this.popup.setHTML(html);
+    }
+    if (offset) {
+      this.popup.setOffset(offset);
+    }
+    this.popup.setLngLat(position);
+    this.popup.addTo(this.map);
+    if (flyTo) {
+      this.map.flyTo({
+        center: position,
+      });
+    }
+  }
+
+  close() {
+    this.popup.remove();
+  }
+}

package/src/manager/RadarManager.ts

@@ -0,0 +1,156 @@
+import { GeoJSONSource } from "@gis_victory/mapbox-gl";
+import GSMap from "../types/GSMap";
+import * as turf from "@turf/turf";
+
+export default class RadarManager {
+  private map?: GSMap;
+  private id: string = `radar-${Math.random()}`;
+  private radius: number = 100; // 半径（米）
+  private period: number = 3000; // 扫描一圈时间（毫秒）
+  private backgroundColor: string = "rgba(255,0,0,0.1)"; // 背景颜色
+  private borderColor: string = "rgba(255,0,0,0.8)"; // 边框颜色
+  private borderWidth: number = 2; // 边框宽度
+  private sectorAngle: number = 30; // 扫描扇形角度（度）
+  private sectorColor: string = "rgba(0,255,0,0.4)"; // 扇形颜色
+  private sectorBorderColor: string = "rgba(0,0,255,0.8)"; // 扇形边框颜色
+  private center: [number, number] = [0, 0];
+  private animationId: number | null = null; // 添加动画ID属性
+  constructor(map?: GSMap) {
+    this.map = map;
+  }
+
+  add(options: any) {
+    this.center = options.center;
+    if (options.radius) {
+      this.radius = options.radius;
+    }
+    if (options.period) {
+      this.period = options.period;
+    }
+    if (options.backgroundColor) {
+      this.backgroundColor = options.backgroundColor;
+    }
+    if (options.borderColor) {
+      this.borderColor = options.borderColor;
+    }
+    if (options.borderWidth) {
+      this.borderWidth = options.borderWidth;
+    }
+    if (options.sectorAngle) {
+      this.sectorAngle = options.sectorAngle;
+    }
+    if (options.sectorColor) {
+      this.sectorColor = options.sectorColor;
+    }
+    if (options.sectorBorderColor) {
+      this.sectorBorderColor = options.sectorBorderColor;
+    }
+    // 圆背景数据
+    const circle = turf.circle(this.center, this.radius, {
+      steps: 64,
+      units: "meters",
+    });
+    // 初始扇形
+    const sector = turf.sector(this.center, this.radius, 0, this.sectorAngle, {
+      steps: 64,
+      units: "meters",
+    });
+    //添加圆背景图层
+    this.map?.addSource(this.id + "-circle", {
+      type: "geojson",
+      data: circle,
+    });
+    //添加扇形图层
+    this.map?.addSource(this.id + "-sector", {
+      type: "geojson",
+      data: sector,
+    });
+
+    //增加页面
+    this.map?.addLayer({
+      id: this.id + "-circle-fill",
+      type: "fill",
+      source: this.id + "-circle",
+      paint: {
+        "fill-color": this.backgroundColor,
+        "fill-outline-color": this.borderColor,
+      },
+    });
+
+    // 圆环边框
+    this.map?.addLayer({
+      id: this.id + "-circle-outline",
+      type: "line",
+      source: this.id + "-circle",
+      paint: {
+        "line-color": this.borderColor,
+        "line-width": this.borderWidth,
+      },
+    });
+
+    // 扇形
+    this.map?.addLayer({
+      id: this.id + "-sector-fill",
+      type: "fill",
+      source: this.id + "-sector",
+      paint: {
+        "fill-color": this.sectorColor,
+        "fill-outline-color": this.sectorBorderColor,
+      },
+    });
+    return this;
+  }
+
+  // 扫描
+  startScan() {
+    this.stopScan();
+    // 动画
+    let startTime = performance.now();
+    const animate = (time: number) => {
+      let elapsed = time - startTime;
+      let angle = ((elapsed % this.period) / this.period) * 360;
+      const newSector = turf.sector(this.center, this.radius, angle, angle + this.sectorAngle, {
+        steps: 64,
+        units: "meters",
+      });
+      if (this.map?.getSource(this.id + "-sector")) {
+        (this.map?.getSource(this.id + "-sector") as GeoJSONSource)?.setData(
+          newSector
+        );
+      }
+      this.animationId = requestAnimationFrame(animate);
+    };
+    this.animationId = requestAnimationFrame(animate);
+    return this;
+  }
+
+  stopScan() {
+    // 确保先停止之前可能存在的动画
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+    return this;
+  }
+
+  remove() {
+    this.stopScan();
+    // 移除图层
+    if (this.map?.getLayer(this.id + "-circle-fill")) {
+      this.map?.removeLayer(this.id + "-circle-fill");
+    }
+    if (this.map?.getLayer(this.id + "-circle-outline")) {
+      this.map?.removeLayer(this.id + "-circle-outline");
+    }
+    if (this.map?.getLayer(this.id + "-sector-fill")) {
+      this.map?.removeLayer(this.id + "-sector-fill");
+    }
+    // 移除数据源
+    if (this.map?.getSource(this.id + "-circle")) {
+      this.map?.removeSource(this.id + "-circle");
+    }
+    if (this.map?.getSource(this.id + "-sector")) {
+      this.map?.removeSource(this.id + "-sector");
+    }
+  }
+}

package/src/manager/TDTManager.ts

@@ -0,0 +1,149 @@
+import type GSMap from "../types/GSMap";
+
+export default class TDTManager {
+  private map: GSMap;
+  private tdtImgId: string = "tdt-img";
+  private tdtVecId: string = "tdt-vec";
+  private tdtCiaId: string = "tdt-cia";
+  private tdtLayer: Map<string, any> = new Map();
+  private token: string = "6c8a0fffe8f584f8310306723f5bc776";
+  constructor(map: GSMap, token?: string) {
+    this.map = map;
+    this.token = token || this.token;
+    this.tdtLayer.set(this.tdtImgId, {
+      type: "raster",
+      tiles: [
+        `https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t1.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t4.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t6.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+      ],
+      tileSize: 256,
+      maxzoom: 17,
+      crs: "EPSG:4326",
+    });
+    this.tdtLayer.set(this.tdtCiaId, {
+      type: "raster",
+      tiles: [
+        `https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t2.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t3.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t4.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t5.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t6.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `https://t7.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+      ],
+      tileSize: 256,
+      maxzoom: 17,
+      crs: "EPSG:4326",
+    });
+    this.tdtLayer.set(this.tdtVecId, {
+      type: "raster",
+      tiles: [
+        `http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t2.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t5.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t6.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+        `http://t7.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${this.token}`,
+      ],
+      tileSize: 256,
+      maxzoom: 18,
+      crs: "EPSG:4326",
+    });
+  }
+
+  addImgLayer(beforeId?: string) {
+    let source: any = this.map.getSource(this.tdtImgId);
+    if (!source) {
+      source = this.tdtLayer.get(this.tdtImgId);
+      this.map.addSource(this.tdtImgId, source);
+    }
+    if (beforeId && this.map.getLayer(beforeId)) {
+      this.map.addLayer({
+        id: this.tdtImgId,
+        type: "raster",
+        source: this.tdtImgId,
+      }, beforeId);
+    } else {
+      this.map.addLayer({
+        id: this.tdtImgId,
+        type: "raster",
+        source: this.tdtImgId,
+      });
+    }
+  }
+
+  removeImgLayer() {
+    if (this.map.getLayer(this.tdtImgId)) {
+      this.map.removeLayer(this.tdtImgId);
+    }
+  }
+
+  addVecLayer(beforeId?: string) {
+    let source: any = this.map.getSource(this.tdtVecId);
+    if (!source) {
+      source = this.tdtLayer.get(this.tdtVecId);
+      this.map.addSource(this.tdtVecId, source);
+    }
+    if (beforeId && this.map.getLayer(beforeId)) {
+      this.map.addLayer({
+        id: this.tdtVecId,
+        type: "raster",
+        source: this.tdtVecId
+      }, beforeId);
+    } else {
+      this.map.addLayer({
+        id: this.tdtVecId,
+        type: "raster",
+        source: this.tdtVecId
+      });
+    }
+  }
+
+  removeVecLayer() {
+    if (this.map.getLayer(this.tdtVecId)) {
+      this.map.removeLayer(this.tdtVecId);
+    }
+  }
+
+  addCiaLayer(beforeId?: string) {
+    let source: any = this.map.getSource(this.tdtCiaId);
+    if (!source) {
+      source = this.tdtLayer.get(this.tdtCiaId);
+      this.map.addSource(this.tdtCiaId, source);
+    }
+    if (beforeId && this.map.getLayer(beforeId)) {
+      this.map.addLayer({
+        id: this.tdtCiaId,
+        type: "raster",
+        source: this.tdtCiaId
+      }, beforeId);
+    } else {
+      this.map.addLayer({
+        id: this.tdtCiaId,
+        type: "raster",
+        source: this.tdtCiaId
+      });
+    }
+  }
+
+  removeCiaLayer() {
+    if (this.map.getLayer(this.tdtCiaId)) {
+      this.map.removeLayer(this.tdtCiaId);
+    }
+  }
+
+  clear() {
+    this.removeImgLayer();
+    this.removeVecLayer();
+    this.removeCiaLayer();
+  }
+}

package/src/manager/TemplateManager.ts

@@ -0,0 +1,13 @@
+export default class TemplateManager {
+  private templates: Map<string, string> = new Map();
+  constructor() {}
+  add(id: string, template: string) {
+    this.templates.set(id, template);
+  }
+  remove(id: string) {
+    this.templates.delete(id);
+  }
+  get(id: string) {
+    return this.templates.get(id);
+  }
+}

package/src/manager/TerrainManager.ts

@@ -0,0 +1,61 @@
+import GSMap from "../types/GSMap";
+
+export default class TerrainManager {
+  private map: GSMap;
+  constructor(map: GSMap) {
+    this.map = map;
+  }
+
+  addSource() {
+    // map.addSource("raster-dem", {
+    //   type: "raster-dem",
+    //   tiles: [
+    //     "http://121.228.31.116:8066/geoserver/gwc/service/tms/1.0.0/cite%3Asx_dem30@EPSG%3A900913@png/{z}/{x}/{y}.png",
+    //   ],
+    //   scheme: "tms",
+    //   minzoom: 6,
+    //   maxzoom: 18,
+    //   tileSize: 256,
+    // });
+    // map.setTerrain({
+    //   source: "raster-dem",
+    //   exaggeration: 1, // 地形拉升强度（1.0为原始高度）
+    // });
+    this.map.addSource("raster-dem", {
+      type: "raster-dem",
+      url: "mapbox://mapbox.mapbox-terrain-dem-v1",
+      minzoom: 6,
+      maxzoom: 18,
+      tileSize: 256,
+    });
+    return this;
+  }
+
+  setTerrain() {
+    if (!this.map.getSource("raster-dem")) {
+      this.addSource();
+    }
+    this.map.setTerrain({
+      source: "raster-dem",
+      exaggeration: 1.5, // 地形拉升强度（1.0为原始高度）
+    });
+    return this;
+  }
+  
+  addHillshade() {
+    if (!this.map.getSource("raster-dem")) {
+      this.addSource();
+    }
+    this.map.addLayer({
+      id: "hillshade",
+      type: "hillshade",
+      source: "raster-dem",
+      paint: {
+        "hillshade-exaggeration": 0.5, //地形起伏强度（默认 0.5）
+        "hillshade-highlight-color": "#FFFFFF", // 受光面颜色 :ml-citation{ref="1" data="citationList"}
+        "hillshade-shadow-color": "#025505", // 阴影区颜色 :ml-citation{ref="1" data="citationList"}
+      },
+    });
+    return this;
+  }
+}

package/src/manager/VectorManager.ts

@@ -0,0 +1,51 @@
+import type GSMap from "../types/GSMap";
+
+export default class VectorManager {
+  private map: GSMap;
+  constructor(map: GSMap) {
+    this.map = map;
+  }
+
+  addSource(config: any) {
+    if (!this.map.getSource(config.id)) {
+      const source = Object.assign(
+        {
+          type: "geojson",
+          tiles: [config.url],
+          tileSize: 256,
+        },
+        config
+      );
+      this.map.addSource(config.id, source);
+    }
+    return this;
+  }
+
+  addLayer(config: any) {
+    if (!this.map.getLayer(config.id)) {
+      const layer = Object.assign(
+        {
+          id: config.id,
+          source: config.source,
+        },
+        config
+      );
+      this.map.addLayer(layer);
+    }
+    return this;
+  }
+
+  removeSource(id: string) {
+    if (this.map.getSource(id)) {
+      this.map.removeSource(id);
+    }
+    return this;
+  }
+
+  removeLayer(id: string) {
+    if (this.map.getLayer(id)) {
+      this.map.removeLayer(id);
+    }
+    return this;
+  }
+}