ly-utils-lib 1.0.12 → 2.5.0

package/dist/map.js

@@ -0,0 +1,811 @@
+import { Map as Map$1, View, Feature } from 'ol';
+import { defaults, ScaleLine, FullScreen } from 'ol/control';
+import { Point, LineString, Polygon } from 'ol/geom';
+import { Draw, Snap, Modify, Select } from 'ol/interaction';
+import Overlay from 'ol/Overlay';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import { fromLonLat, transform, toLonLat } from 'ol/proj';
+import OSM from 'ol/source/OSM';
+import VectorSource from 'ol/source/Vector';
+import XYZ from 'ol/source/XYZ';
+import GeoJSON from 'ol/format/GeoJSON';
+import { Style, Icon, Circle, Stroke, Fill } from 'ol/style';
+import { boundingExtent } from 'ol/extent';
+
+// src/modules/map/index.ts
+var MapInstance = class {
+  constructor(options) {
+    this.vectorSources = /* @__PURE__ */ new Map();
+    this.vectorLayers = /* @__PURE__ */ new Map();
+    this.overlays = /* @__PURE__ */ new Map();
+    this.themeLayers = /* @__PURE__ */ new Map();
+    this.drawInteraction = null;
+    this.modifyInteraction = null;
+    this.snapInteraction = null;
+    this.selectInteraction = null;
+    this.currentTheme = "light";
+    this.icons = /* @__PURE__ */ new Map();
+    this.enableDynamicScale = false;
+    this.projection = "EPSG:4326";
+    this.enableDynamicScale = options.enableDynamicScale || false;
+    this.projection = options.projection || "EPSG:4326";
+    this.currentTheme = options.theme || "light";
+    if (options.icons) {
+      Object.entries(options.icons).forEach(([name, config]) => {
+        this.icons.set(name, config);
+      });
+    }
+    const controls = defaults({
+      zoom: false,
+      rotate: false,
+      attribution: false
+    });
+    if (options.showScaleLine !== false) {
+      controls.push(new ScaleLine());
+    }
+    if (options.showFullScreen !== false) {
+      controls.push(new FullScreen());
+    }
+    this.map = new Map$1({
+      target: options.container,
+      layers: [],
+      view: new View({
+        center: fromLonLat(options.center || [116.3974, 39.9093]),
+        // 默认北京
+        zoom: options.zoom || 10,
+        minZoom: options.minZoom || 1,
+        maxZoom: options.maxZoom || 20,
+        projection: this.projection,
+        constrainResolution: true,
+        smoothResolutionConstraint: false
+      }),
+      controls
+    });
+    if (options.themeConfig) {
+      this.setupThemeLayers(options.themeConfig);
+    }
+    if (options.layers) {
+      options.layers.forEach((layer) => this.map.addLayer(layer.layer));
+    }
+    if (this.enableDynamicScale) {
+      this.map.on("moveend", () => this.handleZoomChange());
+    }
+  }
+  // ==================== 主题管理 ====================
+  /**
+   * 设置主题图层
+   */
+  setupThemeLayers(config) {
+    const lightUrl = config.lightUrl || "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
+    const darkUrl = config.darkUrl || "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=9&x={x}&y={y}&z={z}";
+    const lightLayer = new TileLayer({
+      preload: Infinity,
+      source: new XYZ({ url: lightUrl })
+    });
+    const darkLayer = new TileLayer({
+      preload: Infinity,
+      source: new XYZ({ url: darkUrl })
+    });
+    this.themeLayers.set("light", lightLayer);
+    this.themeLayers.set("dark", darkLayer);
+    this.map.addLayer(lightLayer);
+    this.map.addLayer(darkLayer);
+    this.setTheme(this.currentTheme);
+  }
+  /**
+   * 切换主题
+   */
+  setTheme(theme) {
+    this.currentTheme = theme;
+    this.themeLayers.forEach((layer, key) => {
+      layer.setVisible(key === theme);
+    });
+  }
+  /**
+   * 获取当前主题
+   */
+  getTheme() {
+    return this.currentTheme;
+  }
+  // ==================== 图层管理 ====================
+  /**
+   * 创建矢量图层
+   */
+  createVectorLayer(config) {
+    if (this.vectorLayers.has(config.name)) {
+      console.warn(`\u56FE\u5C42 "${config.name}" \u5DF2\u5B58\u5728`);
+      return;
+    }
+    const source = new VectorSource({
+      format: new GeoJSON()
+    });
+    const layer = new VectorLayer({
+      source,
+      style: config.style,
+      minZoom: config.minZoom,
+      maxZoom: config.maxZoom,
+      zIndex: config.zIndex,
+      visible: config.visible !== false
+    });
+    this.vectorSources.set(config.name, source);
+    this.vectorLayers.set(config.name, layer);
+    this.map.addLayer(layer);
+  }
+  /**
+   * 获取矢量图层
+   */
+  getVectorLayer(name) {
+    return this.vectorLayers.get(name);
+  }
+  /**
+   * 获取矢量数据源
+   */
+  getVectorSource(name) {
+    return this.vectorSources.get(name);
+  }
+  /**
+   * 显示/隐藏矢量图层
+   */
+  setLayerVisible(name, visible) {
+    const layer = this.vectorLayers.get(name);
+    if (layer) {
+      layer.setVisible(visible);
+    }
+  }
+  /**
+   * 设置矢量图层样式
+   */
+  setLayerStyle(name, style) {
+    const layer = this.vectorLayers.get(name);
+    if (layer) {
+      layer.setStyle(style);
+    }
+  }
+  /**
+   * 清除矢量图层
+   */
+  clearLayer(name) {
+    const source = this.vectorSources.get(name);
+    if (source) {
+      source.clear();
+    }
+  }
+  /**
+   * 删除矢量图层
+   */
+  removeLayer(name) {
+    const layer = this.vectorLayers.get(name);
+    if (layer) {
+      this.map.removeLayer(layer);
+      this.vectorLayers.delete(name);
+      this.vectorSources.delete(name);
+    }
+  }
+  // ==================== 要素管理 ====================
+  /**
+   * 添加标记
+   */
+  addMarker(options, layerName = "default") {
+    if (!this.vectorLayers.has(layerName)) {
+      this.createVectorLayer({ name: layerName });
+    }
+    const source = this.vectorSources.get(layerName);
+    const feature = new Feature({
+      geometry: new Point(fromLonLat(options.coordinate))
+    });
+    const style = options.style || this.createMarkerStyle(options);
+    feature.setStyle(style);
+    source.addFeature(feature);
+    return feature;
+  }
+  /**
+   * 创建标记样式
+   */
+  createMarkerStyle(options) {
+    if (options.icon && this.icons.has(options.icon)) {
+      const iconConfig = this.icons.get(options.icon);
+      return new Style({
+        image: new Icon({
+          anchor: iconConfig.anchor || [0.5, 0.5],
+          src: iconConfig.src,
+          scale: iconConfig.scale || 1
+        })
+      });
+    }
+    if (options.iconConfig) {
+      return new Style({
+        image: new Icon({
+          anchor: options.iconConfig.anchor || [0.5, 0.5],
+          src: options.iconConfig.src,
+          scale: options.iconConfig.scale || 1
+        })
+      });
+    }
+    return new Style({
+      image: new Circle({
+        radius: options.radius || 7,
+        fill: new Fill({ color: options.color || "#ff3333" }),
+        stroke: new Stroke({
+          color: options.strokeColor || "#ffffff",
+          width: options.strokeWidth || 2
+        })
+      })
+    });
+  }
+  /**
+   * 移除标记
+   */
+  removeMarker(feature, layerName = "default") {
+    const source = this.vectorSources.get(layerName);
+    if (source) {
+      source.removeFeature(feature);
+    }
+  }
+  /**
+   * 从 GeoJSON 添加要素
+   */
+  addFeaturesFromGeoJSON(geoJson, layerName = "default") {
+    if (!this.vectorLayers.has(layerName)) {
+      this.createVectorLayer({ name: layerName });
+    }
+    const source = this.vectorSources.get(layerName);
+    const format = new GeoJSON();
+    const features = format.readFeatures(typeof geoJson === "string" ? geoJson : JSON.stringify(geoJson));
+    source.addFeatures(features);
+    return features;
+  }
+  /**
+   * 添加要素
+   */
+  addFeature(feature, layerName = "default") {
+    if (!this.vectorLayers.has(layerName)) {
+      this.createVectorLayer({ name: layerName });
+    }
+    const source = this.vectorSources.get(layerName);
+    source.addFeature(feature);
+  }
+  /**
+   * 批量添加要素
+   */
+  addFeatures(features, layerName = "default") {
+    if (!this.vectorLayers.has(layerName)) {
+      this.createVectorLayer({ name: layerName });
+    }
+    const source = this.vectorSources.get(layerName);
+    source.addFeatures(features);
+  }
+  /**
+   * 移除要素
+   */
+  removeFeature(feature, layerName = "default") {
+    const source = this.vectorSources.get(layerName);
+    if (source) {
+      source.removeFeature(feature);
+    }
+  }
+  /**
+   * 清除所有矢量要素
+   */
+  clearFeatures(layerName = "default") {
+    const source = this.vectorSources.get(layerName);
+    if (source) {
+      source.clear();
+    }
+  }
+  /**
+   * 获取图层中的所有要素
+   */
+  getFeatures(layerName = "default") {
+    const source = this.vectorSources.get(layerName);
+    return source ? source.getFeatures() : [];
+  }
+  /**
+   * 创建 GeoJSON
+   */
+  createGeoJSON(type, data) {
+    const coordinates = this.getCoordinates(type, data);
+    const id = this.generateUUID();
+    return {
+      type: "FeatureCollection",
+      features: [{
+        type: "Feature",
+        geometry: {
+          type,
+          coordinates
+        },
+        properties: {
+          id,
+          value: data
+        }
+      }]
+    };
+  }
+  /**
+   * 获取坐标
+   */
+  getCoordinates(type, data) {
+    if (type === "Point") {
+      return fromLonLat(transform(data.points, "EPSG:3857", "EPSG:4326"));
+    } else if (type === "LineString") {
+      return this.setPointArray(data.points);
+    } else if (type === "Polygon") {
+      return [this.setPointArray(data.points)];
+    }
+    return [];
+  }
+  /**
+   * 设置点数组
+   */
+  setPointArray(points) {
+    return points.map((item) => fromLonLat(transform(item, "EPSG:3857", "EPSG:4326")));
+  }
+  /**
+   * 生成 UUID
+   */
+  generateUUID() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  /**
+   * 设置要素样式
+   */
+  setFeatureStyle(feature, options) {
+    const style = this.createFeatureStyle(options);
+    feature.setStyle(style);
+  }
+  /**
+   * 创建要素样式
+   */
+  createFeatureStyle(options) {
+    if (options.style) {
+      return options.style;
+    }
+    if (options.icon && this.icons.has(options.icon)) {
+      const iconConfig = this.icons.get(options.icon);
+      return new Style({
+        image: new Icon({
+          anchor: iconConfig.anchor || [0.5, 0.5],
+          src: iconConfig.src,
+          scale: iconConfig.scale || 1
+        })
+      });
+    }
+    if (options.iconConfig) {
+      return new Style({
+        image: new Icon({
+          anchor: options.iconConfig.anchor || [0.5, 0.5],
+          src: options.iconConfig.src,
+          scale: options.iconConfig.scale || 1
+        })
+      });
+    }
+    return new Style({
+      stroke: new Stroke({
+        color: options.strokeColor || "#3388ff",
+        width: options.strokeWidth || 2
+      }),
+      fill: new Fill({
+        color: options.fillColor || "rgba(51, 136, 255, 0.2)"
+      }),
+      image: new Circle({
+        radius: 7,
+        fill: new Fill({ color: options.strokeColor || "#3388ff" }),
+        stroke: new Stroke({
+          color: "#ffffff",
+          width: 2
+        })
+      })
+    });
+  }
+  // ==================== 动态缩放 ====================
+  /**
+   * 处理缩放变化
+   */
+  handleZoomChange() {
+    const zoom = this.getZoom();
+    if (zoom !== void 0) {
+      this.updateIconScale(zoom);
+    }
+  }
+  /**
+   * 更新图标缩放比例
+   */
+  updateIconScale(zoom) {
+    let scale = 1;
+    if (zoom >= 14) {
+      scale = 0.5;
+    } else if (zoom < 14 && zoom >= 12) {
+      scale = 0.4;
+    } else if (zoom < 12) {
+      scale = 0.3;
+    }
+    this.vectorLayers.forEach((layer) => {
+      const features = layer.getSource()?.getFeatures();
+      if (features) {
+        features.forEach((feature) => {
+          const style = feature.getStyle();
+          if (style) {
+            const image = style.getImage();
+            if (image instanceof Icon) {
+              image.setScale(scale);
+            }
+          }
+        });
+      }
+    });
+  }
+  // ==================== Overlay 管理 ====================
+  /**
+   * 创建 Overlay
+   */
+  createOverlay(options) {
+    const overlay = new Overlay({
+      element: options.element,
+      autoPan: options.autoPan !== false,
+      offset: options.offset,
+      positioning: options.positioning || "bottom-center"
+    });
+    this.overlays.set(options.name, overlay);
+    this.map.addOverlay(overlay);
+  }
+  /**
+   * 显示 Overlay
+   */
+  showOverlay(name, coordinate) {
+    const overlay = this.overlays.get(name);
+    if (overlay) {
+      overlay.setPosition(fromLonLat(coordinate));
+    }
+  }
+  /**
+   * 隐藏 Overlay
+   */
+  hideOverlay(name) {
+    const overlay = this.overlays.get(name);
+    if (overlay) {
+      overlay.setPosition(void 0);
+    }
+  }
+  /**
+   * 移除 Overlay
+   */
+  removeOverlay(name) {
+    const overlay = this.overlays.get(name);
+    if (overlay) {
+      this.map.removeOverlay(overlay);
+      this.overlays.delete(name);
+    }
+  }
+  // ==================== 交互管理 ====================
+  /**
+   * 开始绘制
+   */
+  startDraw(options) {
+    this.stopDraw();
+    const source = options.layerName && this.vectorSources.has(options.layerName) ? this.vectorSources.get(options.layerName) : new VectorSource();
+    this.drawInteraction = new Draw({
+      source,
+      type: options.type,
+      style: options.style
+    });
+    this.map.addInteraction(this.drawInteraction);
+    if (options.onDrawEnd) {
+      this.drawInteraction.on("drawend", (evt) => {
+        options.onDrawEnd?.(evt.feature);
+      });
+    }
+    this.snapInteraction = new Snap({ source });
+    this.map.addInteraction(this.snapInteraction);
+  }
+  /**
+   * 停止绘制
+   */
+  stopDraw() {
+    if (this.drawInteraction) {
+      this.map.removeInteraction(this.drawInteraction);
+      this.drawInteraction = null;
+    }
+    if (this.snapInteraction) {
+      this.map.removeInteraction(this.snapInteraction);
+      this.snapInteraction = null;
+    }
+  }
+  /**
+   * 开始编辑
+   */
+  startModify(layerName = "default") {
+    this.stopModify();
+    const source = this.vectorSources.get(layerName);
+    if (!source) {
+      console.warn(`\u56FE\u5C42 "${layerName}" \u4E0D\u5B58\u5728`);
+      return;
+    }
+    this.modifyInteraction = new Modify({
+      source
+    });
+    this.map.addInteraction(this.modifyInteraction);
+    this.snapInteraction = new Snap({ source });
+    this.map.addInteraction(this.snapInteraction);
+  }
+  /**
+   * 停止编辑
+   */
+  stopModify() {
+    if (this.modifyInteraction) {
+      this.map.removeInteraction(this.modifyInteraction);
+      this.modifyInteraction = null;
+    }
+    if (this.snapInteraction) {
+      this.map.removeInteraction(this.snapInteraction);
+      this.snapInteraction = null;
+    }
+  }
+  /**
+   * 开始选择
+   */
+  startSelect(layerName = "default", onSelect) {
+    this.stopSelect();
+    this.selectInteraction = new Select({
+      layers: this.vectorLayers.get(layerName) ? [this.vectorLayers.get(layerName)] : void 0
+    });
+    this.map.addInteraction(this.selectInteraction);
+    if (onSelect) {
+      this.selectInteraction.on("select", (evt) => {
+        onSelect(evt.selected);
+      });
+    }
+  }
+  /**
+   * 停止选择
+   */
+  stopSelect() {
+    if (this.selectInteraction) {
+      this.map.removeInteraction(this.selectInteraction);
+      this.selectInteraction = null;
+    }
+  }
+  /**
+   * 获取选中的要素
+   */
+  getSelectedFeatures() {
+    return this.selectInteraction?.getFeatures().getArray() || [];
+  }
+  // ==================== 地图控制 ====================
+  /**
+   * 获取原始地图实例
+   */
+  getOlMap() {
+    return this.map;
+  }
+  /**
+   * 获取视图
+   */
+  getView() {
+    return this.map.getView();
+  }
+  /**
+   * 设置中心点
+   */
+  setCenter(coord) {
+    const view = this.getView();
+    if (view) {
+      view.setCenter(fromLonLat(coord));
+      this.map.render();
+    }
+  }
+  /**
+   * 获取中心点
+   */
+  getCenter() {
+    const view = this.getView();
+    if (view) {
+      const center = view.getCenter();
+      return center ? toLonLat(center) : void 0;
+    }
+    return void 0;
+  }
+  /**
+   * 设置缩放级别
+   */
+  setZoom(zoom) {
+    const view = this.getView();
+    if (view) {
+      view.setZoom(zoom);
+      this.map.render();
+    }
+  }
+  /**
+   * 获取缩放级别
+   */
+  getZoom() {
+    return this.getView()?.getZoom();
+  }
+  /**
+   * 缩放到指定范围
+   */
+  fit(extent, options) {
+    if (!extent) return;
+    const view = this.getView();
+    if (view) {
+      view.fit(extent, options);
+      this.map.render();
+    }
+  }
+  /**
+   * 缩放到图层
+   */
+  fitLayer(layerName, options) {
+    const source = this.vectorSources.get(layerName);
+    if (source) {
+      const extent = source.getExtent();
+      if (extent && extent[0] !== Infinity) {
+        this.fit(extent, options);
+      }
+    }
+  }
+  /**
+   * 缩放到坐标数组
+   */
+  fitCoordinates(coordinates, options) {
+    const extent = boundingExtent(coordinates);
+    this.fit(extent, options);
+  }
+  /**
+   * 添加图层
+   */
+  addLayer(layer) {
+    this.map.addLayer(layer.layer);
+  }
+  /**
+   * 移除图层
+   */
+  removeMapLayer(layer) {
+    this.map.removeLayer(layer.layer);
+  }
+  /**
+   * 更新地图大小
+   */
+  updateSize() {
+    this.map.updateSize();
+  }
+  /**
+   * 地图事件监听
+   */
+  on(event, callback) {
+    this.map.on(event, callback);
+  }
+  /**
+   * 移除事件监听
+   */
+  off(event, callback) {
+    this.map.un(event, callback);
+  }
+  /**
+   * 销毁地图
+   */
+  destroy() {
+    this.stopDraw();
+    this.stopModify();
+    this.stopSelect();
+    this.overlays.forEach((overlay) => this.map.removeOverlay(overlay));
+    this.overlays.clear();
+    this.vectorLayers.forEach((layer) => this.map.removeLayer(layer));
+    this.vectorLayers.clear();
+    this.vectorSources.clear();
+    this.map.setTarget(void 0);
+  }
+};
+function createOSMLayer(name = "OSM") {
+  return {
+    name,
+    layer: new TileLayer({
+      source: new OSM()
+    })
+  };
+}
+function createXYZLayer(url, name = "XYZ") {
+  return {
+    name,
+    layer: new TileLayer({
+      source: new XYZ({
+        url
+      })
+    })
+  };
+}
+function createGaodeLayer(name = "\u9AD8\u5FB7\u5730\u56FE") {
+  return createXYZLayer(
+    "https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+    name
+  );
+}
+function createTiandituLayer(token, type = "vec", name = "\u5929\u5730\u56FE") {
+  const url = `https://t{s}.tianditu.gov.cn/DataServer?T=${type}_w&x={x}&y={y}&l={z}&tk=${token}`;
+  return createXYZLayer(url, name);
+}
+function lonLatToXY(lon, lat) {
+  return fromLonLat([lon, lat]);
+}
+function xyToLonLat(x, y) {
+  return toLonLat([x, y]);
+}
+function createPointFeature(coordinate) {
+  return new Feature({
+    geometry: new Point(fromLonLat(coordinate))
+  });
+}
+function createLineFeature(coordinates) {
+  return new Feature({
+    geometry: new LineString(coordinates.map((coord) => fromLonLat(coord)))
+  });
+}
+function createPolygonFeature(coordinates) {
+  return new Feature({
+    geometry: new Polygon(coordinates.map((ring) => ring.map((coord) => fromLonLat(coord))))
+  });
+}
+function createStyledPointFeature(coordinate, style) {
+  const feature = createPointFeature(coordinate);
+  feature.setStyle(style);
+  return feature;
+}
+function createStyledLineFeature(coordinates, style) {
+  const feature = createLineFeature(coordinates);
+  feature.setStyle(style);
+  return feature;
+}
+function createStyledPolygonFeature(coordinates, style) {
+  const feature = createPolygonFeature(coordinates);
+  feature.setStyle(style);
+  return feature;
+}
+function createIconStyle(iconUrl, options) {
+  return new Style({
+    image: new Icon({
+      anchor: options?.anchor || [0.5, 0.5],
+      src: iconUrl,
+      scale: options?.scale || 1,
+      color: options?.color
+    })
+  });
+}
+function createCircleStyle(options) {
+  return new Style({
+    image: new Circle({
+      radius: options?.radius || 7,
+      fill: new Fill({ color: options?.fillColor || "#3388ff" }),
+      stroke: new Stroke({
+        color: options?.strokeColor || "#ffffff",
+        width: options?.strokeWidth || 2
+      })
+    })
+  });
+}
+function createStrokeStyle(options) {
+  return new Style({
+    stroke: new Stroke({
+      color: options?.color || "#3388ff",
+      width: options?.width || 2,
+      lineDash: options?.lineDash
+    })
+  });
+}
+function createFillStyle(options) {
+  return new Style({
+    stroke: new Stroke({
+      color: options?.strokeColor || "#3388ff",
+      width: options?.strokeWidth || 2
+    }),
+    fill: new Fill({
+      color: options?.fillColor || "rgba(51, 136, 255, 0.2)"
+    })
+  });
+}
+
+export { MapInstance, createCircleStyle, createFillStyle, createGaodeLayer, createIconStyle, createLineFeature, createOSMLayer, createPointFeature, createPolygonFeature, createStrokeStyle, createStyledLineFeature, createStyledPointFeature, createStyledPolygonFeature, createTiandituLayer, createXYZLayer, lonLatToXY, xyToLonLat };
+//# sourceMappingURL=map.js.map
+//# sourceMappingURL=map.js.map