@songcf/fy-map 1.0.0

package/dist/fy-map.es.js

@@ -0,0 +1,3769 @@
+import * as maptalks from "maptalks";
+function normalizeComponent(scriptExports, render18, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render18) {
+    options.render = render18;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+const _sfc_main$g = {
+  name: "MyButton"
+};
+var _sfc_render$g = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("button", { staticClass: "my-btn" }, [_vm._t("default")], 2);
+};
+var _sfc_staticRenderFns$g = [];
+var __component__$g = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$g,
+  _sfc_render$g,
+  _sfc_staticRenderFns$g,
+  false,
+  null,
+  "47deef6b"
+);
+const ButtonComponent = __component__$g.exports;
+const MyButton = ButtonComponent;
+MyButton.install = function(Vue) {
+  Vue.component(MyButton.name || "MyButton", MyButton);
+};
+const _sfc_main$f = {
+  name: "FyMap",
+  props: {
+    // 地图配置
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    // 中心点 [经度, 纬度]
+    center: {
+      type: Array,
+      default: () => [0, 0]
+    },
+    // 缩放级别
+    zoom: {
+      type: Number,
+      default: 13
+    },
+    // 最小缩放级别
+    minZoom: {
+      type: Number,
+      default: 1
+    },
+    // 最大缩放级别
+    maxZoom: {
+      type: Number,
+      default: 22
+    },
+    // 底图类型
+    baseLayer: {
+      type: String,
+      default: "osm"
+      // osm, cartoDB, google, custom
+    },
+    // 自定义底图URL模板
+    baseLayerUrl: {
+      type: String,
+      default: ""
+    },
+    // 底图子域名
+    subdomains: {
+      type: Array,
+      default: () => ["a", "b", "c"]
+    }
+  },
+  data() {
+    return {
+      map: null,
+      baseLayerInstance: null
+    };
+  },
+  mounted() {
+    this.initMap();
+    this.addBaseLayer();
+    this.$emit("ready", this.map);
+  },
+  beforeDestroy() {
+    if (this.map) {
+      this.map.remove();
+    }
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      const config = {
+        ...this.options,
+        center: this.center,
+        zoom: this.zoom,
+        minZoom: this.minZoom,
+        maxZoom: this.maxZoom
+      };
+      this.map = new maptalks.Map(this.$refs.mapContainer, config);
+    },
+    // 添加底图
+    addBaseLayer() {
+      if (!this.map) return;
+      let tileLayer;
+      switch (this.baseLayer) {
+        case "osm":
+          tileLayer = new maptalks.TileLayer("base", {
+            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            subdomains: ["a", "b", "c"],
+            attribution: "© OpenStreetMap contributors"
+          });
+          break;
+        case "cartoDB":
+          tileLayer = new maptalks.TileLayer("base", {
+            urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+            subdomains: ["a", "b", "c", "d"],
+            attribution: "© CartoDB"
+          });
+          break;
+        case "google":
+          tileLayer = new maptalks.TileLayer("base", {
+            urlTemplate: "http://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
+            subdomains: ["0", "1", "2", "3"],
+            attribution: "© Google"
+          });
+          break;
+        case "custom":
+          if (this.baseLayerUrl) {
+            tileLayer = new maptalks.TileLayer("base", {
+              urlTemplate: this.baseLayerUrl,
+              subdomains: this.subdomains
+            });
+          }
+          break;
+        default:
+          tileLayer = new maptalks.TileLayer("base", {
+            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            subdomains: ["a", "b", "c"],
+            attribution: "© OpenStreetMap contributors"
+          });
+      }
+      if (tileLayer) {
+        this.baseLayerInstance = tileLayer;
+        this.map.addLayer(tileLayer);
+      }
+    },
+    // 切换底图
+    switchBaseLayer(layerType, urlTemplate = "") {
+      if (!this.map) return;
+      if (this.baseLayerInstance) {
+        this.map.removeLayer(this.baseLayerInstance);
+      }
+      this.baseLayer = layerType;
+      if (urlTemplate) {
+        this.baseLayerUrl = urlTemplate;
+      }
+      this.addBaseLayer();
+    },
+    // 设置中心点
+    setCenter(center) {
+      if (this.map) {
+        this.map.setCenter(center);
+      }
+    },
+    // 设置缩放级别
+    setZoom(zoom) {
+      if (this.map) {
+        this.map.setZoom(zoom);
+      }
+    },
+    // 飞到指定位置
+    flyTo(center, zoom, options = {}) {
+      if (this.map) {
+        this.map.animateTo(
+          {
+            center,
+            zoom
+          },
+          options
+        );
+      }
+    },
+    // 获取地图实例
+    getMap() {
+      return this.map;
+    }
+  },
+  provide() {
+    return {
+      mapInstance: this.map
+    };
+  }
+};
+var _sfc_render$f = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { ref: "mapContainer", staticClass: "fy-map" });
+};
+var _sfc_staticRenderFns$f = [];
+var __component__$f = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$f,
+  _sfc_render$f,
+  _sfc_staticRenderFns$f,
+  false,
+  null,
+  "1c68cf57"
+);
+const FyMapComponent = __component__$f.exports;
+const FyMap = FyMapComponent;
+FyMap.install = function(Vue) {
+  Vue.component(FyMap.name || "FyMap", FyMap);
+};
+const _sfc_main$e = {
+  name: "FyTileLayer",
+  props: {
+    // 图层ID
+    id: {
+      type: String,
+      default: "tile-layer"
+    },
+    // 瓦片URL模板
+    urlTemplate: {
+      type: String,
+      required: true
+    },
+    // 子域名
+    subdomains: {
+      type: Array,
+      default: () => ["a", "b", "c"]
+    },
+    // 最小缩放级别
+    minZoom: {
+      type: Number,
+      default: null
+    },
+    // 最大缩放级别
+    maxZoom: {
+      type: Number,
+      default: null
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 版权信息
+    attribution: {
+      type: String,
+      default: ""
+    },
+    // 图层Z轴顺序
+    zIndex: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      layer: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initLayer();
+    }
+  },
+  beforeDestroy() {
+    this.removeLayer();
+  },
+  methods: {
+    // 初始化图层
+    initLayer() {
+      const config = {
+        id: this.id,
+        urlTemplate: this.urlTemplate,
+        subdomains: this.subdomains,
+        opacity: this.opacity,
+        visible: this.visible,
+        attribution: this.attribution,
+        zIndex: this.zIndex
+      };
+      if (this.minZoom !== null) {
+        config.minZoom = this.minZoom;
+      }
+      if (this.maxZoom !== null) {
+        config.maxZoom = this.maxZoom;
+      }
+      this.layer = new maptalks.TileLayer(this.id, config);
+      this.mapInstance.addLayer(this.layer);
+      this.$emit("ready", this.layer);
+    },
+    // 移除图层
+    removeLayer() {
+      if (this.layer && this.mapInstance) {
+        this.mapInstance.removeLayer(this.layer);
+        this.layer = null;
+      }
+    },
+    // 显示图层
+    show() {
+      if (this.layer) {
+        this.layer.show();
+      }
+    },
+    // 隐藏图层
+    hide() {
+      if (this.layer) {
+        this.layer.hide();
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.layer) {
+        this.layer.setOpacity(opacity);
+      }
+    },
+    // 设置Z轴顺序
+    setZIndex(zIndex) {
+      if (this.layer) {
+        this.layer.setZIndex(zIndex);
+      }
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    zIndex(newVal) {
+      this.setZIndex(newVal);
+    }
+  }
+};
+var _sfc_render$e = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-tile-layer" });
+};
+var _sfc_staticRenderFns$e = [];
+var __component__$e = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$e,
+  _sfc_render$e,
+  _sfc_staticRenderFns$e,
+  false,
+  null,
+  "56cfee19"
+);
+const FyTileLayerComponent = __component__$e.exports;
+const FyTileLayer = FyTileLayerComponent;
+FyTileLayer.install = function(Vue) {
+  Vue.component(FyTileLayer.name || "FyTileLayer", FyTileLayer);
+};
+const _sfc_main$d = {
+  name: "FyVectorLayer",
+  props: {
+    // 图层ID
+    id: {
+      type: String,
+      default: "vector-layer"
+    },
+    // 渲染类型
+    renderer: {
+      type: String,
+      default: "canvas"
+      // canvas, dom
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 最小缩放级别
+    minZoom: {
+      type: Number,
+      default: null
+    },
+    // 最大缩放级别
+    maxZoom: {
+      type: Number,
+      default: null
+    },
+    // 图层Z轴顺序
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    // 是否启用碰撞检测
+    enableCollision: {
+      type: Boolean,
+      default: false
+    },
+    // 图层样式
+    style: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      layer: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initLayer();
+    }
+  },
+  beforeDestroy() {
+    this.removeLayer();
+  },
+  methods: {
+    // 初始化图层
+    initLayer() {
+      const config = {
+        id: this.id,
+        renderer: this.renderer,
+        opacity: this.opacity,
+        visible: this.visible,
+        zIndex: this.zIndex,
+        enableCollision: this.enableCollision,
+        style: this.style
+      };
+      if (this.minZoom !== null) {
+        config.minZoom = this.minZoom;
+      }
+      if (this.maxZoom !== null) {
+        config.maxZoom = this.maxZoom;
+      }
+      this.layer = new maptalks.VectorLayer(this.id, config);
+      this.mapInstance.addLayer(this.layer);
+      this.$emit("ready", this.layer);
+    },
+    // 移除图层
+    removeLayer() {
+      if (this.layer && this.mapInstance) {
+        this.mapInstance.removeLayer(this.layer);
+        this.layer = null;
+      }
+    },
+    // 添加几何图形
+    addGeometry(geometries) {
+      if (this.layer && geometries) {
+        if (Array.isArray(geometries)) {
+          this.layer.addGeometry(geometries);
+        } else {
+          this.layer.addGeometry(geometries);
+        }
+      }
+    },
+    // 移除几何图形
+    removeGeometry(geometries) {
+      if (this.layer && geometries) {
+        if (Array.isArray(geometries)) {
+          this.layer.removeGeometry(geometries);
+        } else {
+          this.layer.removeGeometry(geometries);
+        }
+      }
+    },
+    // 清空图层
+    clear() {
+      if (this.layer) {
+        this.layer.clear();
+      }
+    },
+    // 显示图层
+    show() {
+      if (this.layer) {
+        this.layer.show();
+      }
+    },
+    // 隐藏图层
+    hide() {
+      if (this.layer) {
+        this.layer.hide();
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.layer) {
+        this.layer.setOpacity(opacity);
+      }
+    },
+    // 设置Z轴顺序
+    setZIndex(zIndex) {
+      if (this.layer) {
+        this.layer.setZIndex(zIndex);
+      }
+    },
+    // 设置样式
+    setStyle(style) {
+      if (this.layer) {
+        this.layer.setStyle(style);
+      }
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    },
+    // 获取所有几何图形
+    getGeometries() {
+      if (this.layer) {
+        return this.layer.getGeometries();
+      }
+      return [];
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    zIndex(newVal) {
+      this.setZIndex(newVal);
+    }
+  }
+};
+var _sfc_render$d = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-vector-layer" });
+};
+var _sfc_staticRenderFns$d = [];
+var __component__$d = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$d,
+  _sfc_render$d,
+  _sfc_staticRenderFns$d,
+  false,
+  null,
+  "cd2b9e14"
+);
+const FyVectorLayerComponent = __component__$d.exports;
+const FyVectorLayer = FyVectorLayerComponent;
+FyVectorLayer.install = function(Vue) {
+  Vue.component(FyVectorLayer.name || "FyVectorLayer", FyVectorLayer);
+};
+const _sfc_main$c = {
+  name: "FyMarker",
+  props: {
+    // 位置坐标 [经度, 纬度]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 图标图片URL
+    icon: {
+      type: String,
+      default: ""
+    },
+    // 图标尺寸
+    iconSize: {
+      type: Array,
+      default: () => [32, 32]
+    },
+    // 图标偏移
+    iconOffset: {
+      type: Array,
+      default: () => [0, 0]
+    },
+    // 旋转角度
+    rotation: {
+      type: Number,
+      default: 0
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 可拖拽
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    // 弹曲程度
+    curve: {
+      type: Number,
+      default: 0
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    // 层级
+    zIndex: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      marker: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initMarker();
+    }
+  },
+  beforeDestroy() {
+    this.removeMarker();
+  },
+  methods: {
+    // 初始化 Marker
+    initMarker() {
+      const config = {
+        coordinates: this.coordinates,
+        visible: this.visible,
+        draggable: this.draggable,
+        curve: this.curve,
+        properties: this.properties,
+        zIndex: this.zIndex
+      };
+      if (this.icon) {
+        config.symbol = {
+          markerFile: this.icon,
+          markerWidth: this.iconSize[0],
+          markerHeight: this.iconSize[1],
+          markerDx: this.iconOffset[0],
+          markerDy: this.iconOffset[1],
+          markerOpacity: this.opacity,
+          markerRotation: this.rotation
+        };
+      } else {
+        config.symbol = {
+          markerType: "ellipse",
+          markerFill: "#ff0000",
+          markerFillOpacity: 1,
+          markerLineColor: "#ffffff",
+          markerLineWidth: 2,
+          markerLineOpacity: 1,
+          markerWidth: 30,
+          markerHeight: 30,
+          markerDx: 0,
+          markerDy: 0,
+          markerOpacity: this.opacity
+        };
+      }
+      this.marker = new maptalks.Marker(this.coordinates, config);
+      this.marker.on("click", this.handleClick);
+      this.marker.on("mouseover", this.handleMouseover);
+      this.marker.on("mouseout", this.handleMouseout);
+      this.marker.on("dragstart", this.handleDragStart);
+      this.marker.on("dragging", this.handleDragging);
+      this.marker.on("dragend", this.handleDragEnd);
+      this.mapInstance.addMarker(this.marker);
+      this.$emit("ready", this.marker);
+    },
+    // 移除 Marker
+    removeMarker() {
+      if (this.marker && this.mapInstance) {
+        this.marker.off("click", this.handleClick);
+        this.marker.off("mouseover", this.handleMouseover);
+        this.marker.off("mouseout", this.handleMouseout);
+        this.marker.off("dragstart", this.handleDragStart);
+        this.marker.off("dragging", this.handleDragging);
+        this.marker.off("dragend", this.handleDragEnd);
+        this.mapInstance.removeMarker(this.marker);
+        this.marker = null;
+      }
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleMouseover(e) {
+      this.$emit("mouseover", e);
+    },
+    handleMouseout(e) {
+      this.$emit("mouseout", e);
+    },
+    handleDragStart(e) {
+      this.$emit("dragstart", e);
+    },
+    handleDragging(e) {
+      this.$emit("dragging", e);
+    },
+    handleDragEnd(e) {
+      this.$emit("dragend", e);
+    },
+    // 设置位置
+    setCoordinates(coordinates) {
+      if (this.marker) {
+        this.marker.setCoordinates(coordinates);
+      }
+    },
+    // 设置图标
+    setIcon(icon) {
+      if (this.marker) {
+        this.marker.setSymbol({
+          markerFile: icon
+        });
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.marker) {
+        this.marker.setOpacity(opacity);
+      }
+    },
+    // 显示
+    show() {
+      if (this.marker) {
+        this.marker.show();
+      }
+    },
+    // 隐藏
+    hide() {
+      if (this.marker) {
+        this.marker.hide();
+      }
+    },
+    // 打开信息窗口
+    openInfoWindow(content, options = {}) {
+      if (this.marker) {
+        this.marker.openInfoWindow(content, options);
+      }
+    },
+    // 关闭信息窗口
+    closeInfoWindow() {
+      if (this.marker) {
+        this.marker.closeInfoWindow();
+      }
+    },
+    // 获取 Marker 实例
+    getMarker() {
+      return this.marker;
+    }
+  },
+  watch: {
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    icon(newVal) {
+      this.setIcon(newVal);
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+};
+var _sfc_render$c = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-marker" });
+};
+var _sfc_staticRenderFns$c = [];
+var __component__$c = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$c,
+  _sfc_render$c,
+  _sfc_staticRenderFns$c,
+  false,
+  null,
+  "249684eb"
+);
+const FyMarkerComponent = __component__$c.exports;
+const FyMarker = FyMarkerComponent;
+FyMarker.install = function(Vue) {
+  Vue.component(FyMarker.name || "FyMarker", FyMarker);
+};
+const _sfc_main$b = {
+  name: "FyLabel",
+  props: {
+    // 位置坐标 [经度, 纬度]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 文本内容
+    content: {
+      type: String,
+      required: true
+    },
+    // 文本框宽度
+    boxWidth: {
+      type: Number,
+      default: 160
+    },
+    // 文本样式
+    textStyle: {
+      type: Object,
+      default: () => ({
+        fontSize: 12,
+        fill: "#333",
+        weight: "bold"
+      })
+    },
+    // 背景样式
+    boxStyle: {
+      type: Object,
+      default: () => ({
+        padding: [4, 4],
+        symbol: {
+          markerType: "square",
+          markerFill: "rgba(255,255,255,0.8)",
+          markerFillOpacity: 1,
+          markerLineColor: "#ccc",
+          markerLineWidth: 1,
+          markerLineOpacity: 1,
+          markerLineDasharray: [],
+          markerWidth: 40,
+          markerHeight: 20
+        }
+      })
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 文本方向
+    textDirection: {
+      type: String,
+      default: "right"
+      // right, left, center
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    },
+    // 层级
+    zIndex: {
+      type: Number,
+      default: 10
+    }
+  },
+  data() {
+    return {
+      label: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initLabel();
+    }
+  },
+  beforeDestroy() {
+    this.removeLabel();
+  },
+  methods: {
+    // 初始化 Label
+    initLabel() {
+      const config = {
+        coordinates: this.coordinates,
+        content: this.content,
+        visible: this.visible,
+        properties: this.properties,
+        zIndex: this.zIndex
+      };
+      const textSymbol = {
+        textName: this.content,
+        textSize: this.textStyle.fontSize || 12,
+        textFill: this.textStyle.fill || "#333",
+        textWeight: this.textStyle.weight || "normal",
+        textOpacity: this.opacity,
+        textHaloFill: "#ffffff",
+        textHaloRadius: 2,
+        textHaloOpacity: 1,
+        textWrapWidth: this.boxWidth,
+        textLineSpacing: 1
+      };
+      if (this.boxStyle && this.boxStyle.symbol) {
+        textSymbol.markerType = this.boxStyle.symbol.markerType || "square";
+        textSymbol.markerFill = this.boxStyle.symbol.markerFill || "rgba(255,255,255,0.8)";
+        textSymbol.markerFillOpacity = this.boxStyle.symbol.markerFillOpacity || 1;
+        textSymbol.markerLineColor = this.boxStyle.symbol.markerLineColor || "#ccc";
+        textSymbol.markerLineWidth = this.boxStyle.symbol.markerLineWidth || 1;
+        textSymbol.markerLineOpacity = this.boxStyle.symbol.markerLineOpacity || 1;
+        textSymbol.markerDx = this.boxStyle.padding && this.boxStyle.padding[0] || 4;
+        textSymbol.markerDy = this.boxStyle.padding && this.boxStyle.padding[1] || 4;
+      }
+      config.symbol = textSymbol;
+      this.label = new maptalks.Label(this.content, this.coordinates, config);
+      this.label.on("click", this.handleClick);
+      this.label.on("mouseover", this.handleMouseover);
+      this.label.on("mouseout", this.handleMouseout);
+      this.mapInstance.addLabel(this.label);
+      this.$emit("ready", this.label);
+    },
+    // 移除 Label
+    removeLabel() {
+      if (this.label && this.mapInstance) {
+        this.label.off("click", this.handleClick);
+        this.label.off("mouseover", this.handleMouseover);
+        this.label.off("mouseout", this.handleMouseout);
+        this.mapInstance.removeLabel(this.label);
+        this.label = null;
+      }
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleMouseover(e) {
+      this.$emit("mouseover", e);
+    },
+    handleMouseout(e) {
+      this.$emit("mouseout", e);
+    },
+    // 设置内容
+    setContent(content) {
+      if (this.label) {
+        this.label.setContent(content);
+      }
+    },
+    // 设置位置
+    setCoordinates(coordinates) {
+      if (this.label) {
+        this.label.setCoordinates(coordinates);
+      }
+    },
+    // 设置样式
+    setStyle(style) {
+      if (this.label) {
+        this.label.setStyle(style);
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.label) {
+        this.label.setOpacity(opacity);
+      }
+    },
+    // 显示
+    show() {
+      if (this.label) {
+        this.label.show();
+      }
+    },
+    // 隐藏
+    hide() {
+      if (this.label) {
+        this.label.hide();
+      }
+    },
+    // 获取 Label 实例
+    getLabel() {
+      return this.label;
+    }
+  },
+  watch: {
+    content(newVal) {
+      this.setContent(newVal);
+    },
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+};
+var _sfc_render$b = function render6() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-label" });
+};
+var _sfc_staticRenderFns$b = [];
+var __component__$b = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$b,
+  _sfc_render$b,
+  _sfc_staticRenderFns$b,
+  false,
+  null,
+  "2ad8e63e"
+);
+const FyLabelComponent = __component__$b.exports;
+const FyLabel = FyLabelComponent;
+FyLabel.install = function(Vue) {
+  Vue.component(FyLabel.name || "FyLabel", FyLabel);
+};
+const _sfc_main$a = {
+  name: "FyPopup",
+  props: {
+    // 位置坐标 [经度, 纬度]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 弹窗内容
+    content: {
+      type: String,
+      required: true
+    },
+    // 标题
+    title: {
+      type: String,
+      default: ""
+    },
+    // 宽度
+    width: {
+      type: Number,
+      default: 300
+    },
+    // 高度
+    height: {
+      type: Number,
+      default: null
+    },
+    // 最小宽度
+    minWidth: {
+      type: Number,
+      default: 200
+    },
+    // 最小高度
+    minHeight: {
+      type: Number,
+      default: null
+    },
+    // 最大宽度
+    maxWidth: {
+      type: Number,
+      default: 600
+    },
+    // 自动关闭
+    autoClose: {
+      type: Boolean,
+      default: false
+    },
+    // 自定义样式类名
+    className: {
+      type: String,
+      default: ""
+    },
+    // 是否显示关闭按钮
+    closeButton: {
+      type: Boolean,
+      default: true
+    },
+    // 偏移量
+    offset: {
+      type: Array,
+      default: () => [0, 0]
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      popup: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initPopup();
+    }
+  },
+  beforeDestroy() {
+    this.removePopup();
+  },
+  methods: {
+    // 初始化 Popup
+    initPopup() {
+      const config = {
+        content: this.content,
+        width: this.width,
+        minWidth: this.minWidth,
+        maxWidth: this.maxWidth,
+        autoClose: this.autoClose,
+        className: this.className,
+        closeButton: this.closeButton,
+        offset: this.offset,
+        properties: this.properties
+      };
+      if (this.height !== null) {
+        config.height = this.height;
+      }
+      if (this.minHeight !== null) {
+        config.minHeight = this.minHeight;
+      }
+      if (this.title) {
+        config.title = this.title;
+      }
+      this.popup = new maptalks.InfoWindow(config);
+      this.popup.setCoordinates(this.coordinates);
+      this.popup.on("open", this.handleOpen);
+      this.popup.on("close", this.handleClose);
+      this.popup.on("click", this.handleClick);
+      this.$emit("ready", this.popup);
+    },
+    // 移除 Popup
+    removePopup() {
+      if (this.popup) {
+        this.popup.off("open", this.handleOpen);
+        this.popup.off("close", this.handleClose);
+        this.popup.off("click", this.handleClick);
+        this.popup.remove();
+        this.popup = null;
+      }
+    },
+    // 事件处理
+    handleOpen(e) {
+      this.$emit("open", e);
+    },
+    handleClose(e) {
+      this.$emit("close", e);
+    },
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    // 显示弹窗
+    show() {
+      if (this.popup && this.mapInstance) {
+        this.mapInstance.openInfoWindow(this.popup, this.coordinates);
+      }
+    },
+    // 隐藏弹窗
+    hide() {
+      if (this.popup) {
+        this.popup.hide();
+      }
+    },
+    // 关闭弹窗
+    close() {
+      if (this.popup) {
+        this.popup.close();
+      }
+    },
+    // 设置内容
+    setContent(content) {
+      if (this.popup) {
+        this.popup.setContent(content);
+      }
+    },
+    // 设置位置
+    setCoordinates(coordinates) {
+      if (this.popup) {
+        this.popup.setCoordinates(coordinates);
+      }
+    },
+    // 设置标题
+    setTitle(title) {
+      if (this.popup) {
+        this.popup.setTitle(title);
+      }
+    },
+    // 设置尺寸
+    setSize(width, height) {
+      if (this.popup) {
+        this.popup.setSize(width, height);
+      }
+    },
+    // 是否打开
+    isOpen() {
+      if (this.popup) {
+        return this.popup.isOpen();
+      }
+      return false;
+    },
+    // 获取 Popup 实例
+    getPopup() {
+      return this.popup;
+    }
+  },
+  watch: {
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    content(newVal) {
+      this.setContent(newVal);
+    },
+    title(newVal) {
+      this.setTitle(newVal);
+    }
+  }
+};
+var _sfc_render$a = function render7() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-popup" });
+};
+var _sfc_staticRenderFns$a = [];
+var __component__$a = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$a,
+  _sfc_render$a,
+  _sfc_staticRenderFns$a,
+  false,
+  null,
+  "03c6ffc0"
+);
+const FyPopupComponent = __component__$a.exports;
+const FyPopup = FyPopupComponent;
+FyPopup.install = function(Vue) {
+  Vue.component(FyPopup.name || "FyPopup", FyPopup);
+};
+const _sfc_main$9 = {
+  name: "FyClusterMarker",
+  props: {
+    // Marker 数据数组
+    markers: {
+      type: Array,
+      default: () => []
+    },
+    // 图层ID
+    id: {
+      type: String,
+      default: "cluster-layer"
+    },
+    // 最大缩放级别，超过此级别不再聚合
+    maxZoom: {
+      type: Number,
+      default: 16
+    },
+    // 是否显示文本
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    // 聚合 Marker 样式
+    clusterStyle: {
+      type: Object,
+      default: () => ({
+        symbol: {
+          markerType: "ellipse",
+          markerFill: "#ff0000",
+          markerFillOpacity: 0.6,
+          markerLineColor: "#fff",
+          markerLineWidth: 3,
+          markerLineOpacity: 1
+        },
+        textSize: 14,
+        textFill: "#fff"
+      })
+    },
+    // 单个 Marker 样式
+    markerStyle: {
+      type: Object,
+      default: () => ({
+        symbol: {
+          markerType: "ellipse",
+          markerFill: "#3399ff",
+          markerFillOpacity: 1,
+          markerLineColor: "#fff",
+          markerLineWidth: 2,
+          markerLineOpacity: 1,
+          markerWidth: 24,
+          markerHeight: 24
+        }
+      })
+    },
+    // 图层可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 图层透明度
+    opacity: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      clusterMarkers: []
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initClusterLayer();
+    }
+  },
+  beforeDestroy() {
+    this.removeClusterLayer();
+  },
+  methods: {
+    // 初始化聚合图层
+    initClusterLayer() {
+      if (!this.mapInstance || this.markers.length === 0) return;
+      this.layer = new maptalks.VectorLayer(this.id, {
+        visible: this.visible,
+        opacity: this.opacity
+      });
+      this.mapInstance.addLayer(this.layer);
+      this.updateClusterMarkers();
+      this.layer.on("click", this.handleClick);
+      this.$emit("ready", this.layer);
+    },
+    // 更新聚合 Marker
+    updateClusterMarkers() {
+      if (!this.layer) return;
+      this.clearClusterMarkers();
+      const markerList = this.markers.map((item) => {
+        return new maptalks.Marker(item.coordinates, {
+          properties: item.properties || {}
+        });
+      });
+      this.clusterMarkers = new maptalks.ClusterLayer(this.id + "-cluster", markerList, {
+        noClusterWithHowManyPoints: 1,
+        maxZoom: this.maxZoom,
+        symbol: this.getClusterSymbol()
+      });
+      this.mapInstance.addLayer(this.clusterMarkers);
+      this.setupClusterEvents();
+    },
+    // 获取聚合符号
+    getClusterSymbol() {
+      return {
+        markerType: "ellipse",
+        markerFill: "#ff0000",
+        markerFillOpacity: 0.6,
+        markerLineColor: "#fff",
+        markerLineWidth: 3,
+        markerLineOpacity: 1,
+        textFaceName: "sans-serif",
+        textName: "{count}",
+        textFill: "#fff",
+        textSize: 12,
+        textWeight: "bold"
+      };
+    },
+    // 设置聚合事件
+    setupClusterEvents() {
+      if (!this.clusterMarkers) return;
+      this.clusterMarkers.on("click", this.handleClusterClick);
+      this.clusterMarkers.on("mouseover", this.handleClusterMouseover);
+      this.clusterMarkers.on("mouseout", this.handleClusterMouseout);
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleClusterClick(e) {
+      const cluster = e.target;
+      const markers = cluster.getGeometries();
+      this.$emit("cluster-click", {
+        cluster,
+        markers,
+        coordinates: cluster.getCoordinates(),
+        count: markers.length
+      });
+      if (markers.length > 1 && this.mapInstance.getZoom() < this.maxZoom) {
+        this.mapInstance.fitExtent(cluster.getExtent(), {
+          padding: [50, 50, 50, 50]
+        });
+      }
+    },
+    handleClusterMouseover(e) {
+      const cluster = e.target;
+      const markers = cluster.getGeometries();
+      this.$emit("cluster-mouseover", {
+        cluster,
+        markers,
+        coordinates: cluster.getCoordinates(),
+        count: markers.length
+      });
+    },
+    handleClusterMouseout(e) {
+      const cluster = e.target;
+      const markers = cluster.getGeometries();
+      this.$emit("cluster-mouseout", {
+        cluster,
+        markers,
+        coordinates: cluster.getCoordinates(),
+        count: markers.length
+      });
+    },
+    // 清除聚合 Marker
+    clearClusterMarkers() {
+      if (this.clusterMarkers) {
+        this.clusterMarkers.off("click", this.handleClusterClick);
+        this.clusterMarkers.off("mouseover", this.handleClusterMouseover);
+        this.clusterMarkers.off("mouseout", this.handleClusterMouseout);
+        if (this.mapInstance) {
+          this.mapInstance.removeLayer(this.clusterMarkers);
+        }
+        this.clusterMarkers = null;
+      }
+    },
+    // 移除聚合图层
+    removeClusterLayer() {
+      this.clearClusterMarkers();
+      if (this.layer) {
+        this.layer.off("click", this.handleClick);
+        if (this.mapInstance) {
+          this.mapInstance.removeLayer(this.layer);
+        }
+        this.layer = null;
+      }
+    },
+    // 添加 Marker
+    addMarker(markerData) {
+      this.markers.push(markerData);
+      this.updateClusterMarkers();
+    },
+    // 批量添加 Marker
+    addMarkers(markerDataArray) {
+      this.markers.push(...markerDataArray);
+      this.updateClusterMarkers();
+    },
+    // 移除 Marker
+    removeMarker(markerId) {
+      const index2 = this.markers.findIndex((m) => m.id === markerId);
+      if (index2 > -1) {
+        this.markers.splice(index2, 1);
+        this.updateClusterMarkers();
+      }
+    },
+    // 清空所有 Marker
+    clearMarkers() {
+      this.markers = [];
+      this.updateClusterMarkers();
+    },
+    // 显示图层
+    show() {
+      if (this.layer) {
+        this.layer.show();
+      }
+      if (this.clusterMarkers) {
+        this.clusterMarkers.show();
+      }
+    },
+    // 隐藏图层
+    hide() {
+      if (this.layer) {
+        this.layer.hide();
+      }
+      if (this.clusterMarkers) {
+        this.clusterMarkers.hide();
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.layer) {
+        this.layer.setOpacity(opacity);
+      }
+      if (this.clusterMarkers) {
+        this.clusterMarkers.setOpacity(opacity);
+      }
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    },
+    // 获取聚合实例
+    getCluster() {
+      return this.clusterMarkers;
+    }
+  },
+  watch: {
+    markers: {
+      handler() {
+        this.updateClusterMarkers();
+      },
+      deep: true
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    }
+  }
+};
+var _sfc_render$9 = function render8() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-cluster-marker" });
+};
+var _sfc_staticRenderFns$9 = [];
+var __component__$9 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$9,
+  _sfc_render$9,
+  _sfc_staticRenderFns$9,
+  false,
+  null,
+  "ee36769c"
+);
+const FyClusterMarkerComponent = __component__$9.exports;
+const FyClusterMarker = FyClusterMarkerComponent;
+FyClusterMarker.install = function(Vue) {
+  Vue.component(FyClusterMarker.name || "FyClusterMarker", FyClusterMarker);
+};
+const _sfc_main$8 = {
+  name: "FyDrawTool",
+  props: {
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "draw-layer"
+    },
+    // 默认绘制模式
+    mode: {
+      type: String,
+      default: "none"
+      // point, line, polygon, rectangle, circle, ellipse, none
+    },
+    // 绘制样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#ff0000",
+        lineWidth: 2,
+        lineOpacity: 0.8,
+        polygonFill: "#ff0000",
+        polygonOpacity: 0.3,
+        markerFill: "#ff0000",
+        markerFillOpacity: 1,
+        markerLineColor: "#ffffff",
+        markerLineWidth: 2,
+        markerLineOpacity: 1,
+        markerWidth: 16,
+        markerHeight: 16
+      })
+    },
+    // 是否允许编辑
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否允许删除
+    deletable: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示提示信息
+    showTooltip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      drawTool: null,
+      isDrawing: false
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initDrawTool();
+    }
+  },
+  beforeDestroy() {
+    this.removeDrawTool();
+  },
+  methods: {
+    // 初始化绘制工具
+    initDrawTool() {
+      if (!this.mapInstance) return;
+      this.layer = new maptalks.VectorLayer(this.layerId, {
+        enableAltitude: true,
+        altitudeProperty: "altitude"
+      });
+      this.mapInstance.addLayer(this.layer);
+      this.drawTool = new maptalks.DrawTool({
+        mode: this.mode,
+        symbol: this.symbol,
+        once: false,
+        editable: this.editable,
+        autoSurface: true
+      }).addTo(this.mapInstance);
+      this.bindDrawToolEvents();
+      this.$emit("ready", this.drawTool);
+    },
+    // 绑定绘制工具事件
+    bindDrawToolEvents() {
+      if (!this.drawTool) return;
+      this.drawTool.on("drawstart", this.handleDrawStart);
+      this.drawTool.on("drawvertex", this.handleDrawVertex);
+      this.drawTool.on("mousemove", this.handleMouseMove);
+      this.drawTool.on("drawend", this.handleDrawEnd);
+      this.drawTool.on("disable", this.handleDisable);
+      this.drawTool.on("editend", this.handleEditEnd);
+    },
+    // 事件处理
+    handleDrawStart(param) {
+      this.isDrawing = true;
+      this.$emit("drawstart", param);
+    },
+    handleDrawVertex(param) {
+      this.$emit("drawvertex", param);
+    },
+    handleMouseMove(param) {
+      this.$emit("mousemove", param);
+    },
+    handleDrawEnd(param) {
+      this.isDrawing = false;
+      this.$emit("drawend", param);
+    },
+    handleDisable() {
+      this.isDrawing = false;
+      this.$emit("disable");
+    },
+    handleEditEnd(param) {
+      this.$emit("editend", param);
+    },
+    // 设置绘制模式
+    setMode(mode) {
+      if (this.drawTool) {
+        this.drawTool.setMode(mode);
+      }
+    },
+    // 启用绘制
+    enable() {
+      if (this.drawTool) {
+        this.drawTool.enable();
+      }
+    },
+    // 禁用绘制
+    disable() {
+      if (this.drawTool) {
+        this.drawTool.disable();
+      }
+    },
+    // 获取当前模式
+    getMode() {
+      if (this.drawTool) {
+        return this.drawTool.getMode();
+      }
+      return "none";
+    },
+    // 获取当前状态
+    getStatus() {
+      if (this.drawTool) {
+        return this.drawTool.getStatus();
+      }
+      return null;
+    },
+    // 获取当前绘制的图形
+    getCurrentGeometry() {
+      if (this.drawTool) {
+        return this.drawTool.getCurrentGeometry();
+      }
+      return null;
+    },
+    // 获取所有绘制的图形
+    getGeometries() {
+      if (this.layer) {
+        return this.layer.getGeometries();
+      }
+      return [];
+    },
+    // 清除所有图形
+    clear() {
+      if (this.layer) {
+        this.layer.clear();
+      }
+      this.$emit("clear");
+    },
+    // 撤销上一步
+    undo() {
+      if (this.drawTool && this.isDrawing) {
+        this.drawTool.undo();
+      }
+    },
+    // 重做
+    redo() {
+      if (this.drawTool && this.isDrawing) {
+        this.drawTool.redo();
+      }
+    },
+    // 设置符号
+    setSymbol(symbol) {
+      if (this.drawTool) {
+        this.drawTool.setSymbol(symbol);
+      }
+    },
+    // 添加几何图形
+    addGeometry(geometry) {
+      if (this.layer && geometry) {
+        this.layer.addGeometry(geometry);
+      }
+    },
+    // 移除几何图形
+    removeGeometry(geometry) {
+      if (this.layer && geometry) {
+        this.layer.removeGeometry(geometry);
+      }
+    },
+    // 测距
+    measureDistance(coordinates) {
+      if (coordinates && coordinates.length >= 2) {
+        let distance = 0;
+        for (let i = 0; i < coordinates.length - 1; i++) {
+          const p1 = new maptalks.Coordinate(coordinates[i]);
+          const p2 = new maptalks.Coordinate(coordinates[i + 1]);
+          distance += p1.distanceTo(p2);
+        }
+        return distance;
+      }
+      return 0;
+    },
+    // 测面积
+    measureArea(coordinates) {
+      if (coordinates && coordinates.length >= 3) {
+        const polygon = new maptalks.Polygon(coordinates);
+        return polygon.getArea();
+      }
+      return 0;
+    },
+    // 获取绘制工具实例
+    getDrawTool() {
+      return this.drawTool;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  },
+  watch: {
+    mode(newVal) {
+      this.setMode(newVal);
+    },
+    symbol: {
+      handler(newVal) {
+        this.setSymbol(newVal);
+      },
+      deep: true
+    }
+  }
+};
+var _sfc_render$8 = function render9() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-draw-tool" });
+};
+var _sfc_staticRenderFns$8 = [];
+var __component__$8 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$8,
+  _sfc_render$8,
+  _sfc_staticRenderFns$8,
+  false,
+  null,
+  "f60f236f"
+);
+const FyDrawToolComponent = __component__$8.exports;
+const FyDrawTool = FyDrawToolComponent;
+FyDrawTool.install = function(Vue) {
+  Vue.component(FyDrawTool.name || "FyDrawTool", FyDrawTool);
+};
+const _sfc_main$7 = {
+  name: "FyDrawPoint",
+  props: {
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "draw-point-layer"
+    },
+    // 点样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        markerType: "ellipse",
+        markerFill: "#ff0000",
+        markerFillOpacity: 1,
+        markerLineColor: "#ffffff",
+        markerLineWidth: 2,
+        markerLineOpacity: 1,
+        markerWidth: 20,
+        markerHeight: 20
+      })
+    },
+    // 是否自动开始绘制
+    autoStart: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示提示信息
+    showTooltip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      drawTool: null,
+      points: []
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initDrawPoint();
+    }
+  },
+  beforeDestroy() {
+    this.removeDrawPoint();
+  },
+  methods: {
+    // 初始化绘制点工具
+    initDrawPoint() {
+      if (!this.mapInstance) return;
+      this.layer = new maptalks.VectorLayer(this.layerId);
+      this.mapInstance.addLayer(this.layer);
+      this.drawTool = new maptalks.DrawTool({
+        mode: "point",
+        symbol: this.symbol,
+        once: true,
+        enableAltitude: true
+      }).addTo(this.mapInstance);
+      this.bindDrawToolEvents();
+      if (this.autoStart) {
+        this.enable();
+      }
+      this.$emit("ready", this.drawTool);
+    },
+    // 绑定绘制工具事件
+    bindDrawToolEvents() {
+      if (!this.drawTool) return;
+      this.drawTool.on("drawstart", this.handleDrawStart);
+      this.drawTool.on("drawend", this.handleDrawEnd);
+      this.drawTool.on("disable", this.handleDisable);
+    },
+    // 事件处理
+    handleDrawStart(param) {
+      this.$emit("drawstart", param);
+    },
+    handleDrawEnd(param) {
+      const point = param.geometry;
+      this.points.push(point);
+      this.$emit("drawend", {
+        point,
+        coordinates: point.getCoordinates(),
+        allPoints: this.points
+      });
+    },
+    handleDisable() {
+      this.$emit("disable");
+    },
+    // 启用绘制
+    enable() {
+      if (this.drawTool) {
+        this.drawTool.enable();
+      }
+    },
+    // 禁用绘制
+    disable() {
+      if (this.drawTool) {
+        this.drawTool.disable();
+      }
+    },
+    // 获取所有绘制的点
+    getPoints() {
+      return this.points;
+    },
+    // 清除所有点
+    clear() {
+      this.points = [];
+      if (this.layer) {
+        this.layer.clear();
+      }
+      this.$emit("clear");
+    },
+    // 添加点
+    addPoint(coordinates) {
+      const point = new maptalks.Marker(coordinates, {
+        symbol: this.symbol
+      });
+      this.layer.addGeometry(point);
+      this.points.push(point);
+      this.$emit("add-point", { point, coordinates });
+    },
+    // 移除点
+    removePoint(index2) {
+      if (index2 >= 0 && index2 < this.points.length) {
+        const point = this.points[index2];
+        this.layer.removeGeometry(point);
+        this.points.splice(index2, 1);
+        this.$emit("remove-point", { point, index: index2 });
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.drawTool) {
+        this.drawTool.setSymbol(symbol);
+      }
+    },
+    // 获取绘制工具实例
+    getDrawTool() {
+      return this.drawTool;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  }
+};
+var _sfc_render$7 = function render10() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-draw-point" });
+};
+var _sfc_staticRenderFns$7 = [];
+var __component__$7 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$7,
+  _sfc_render$7,
+  _sfc_staticRenderFns$7,
+  false,
+  null,
+  "6fa54668"
+);
+const FyDrawPointComponent = __component__$7.exports;
+const FyDrawPoint = FyDrawPointComponent;
+FyDrawPoint.install = function(Vue) {
+  Vue.component(FyDrawPoint.name || "FyDrawPoint", FyDrawPoint);
+};
+const _sfc_main$6 = {
+  name: "FyDrawLine",
+  props: {
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "draw-line-layer"
+    },
+    // 线样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#ff0000",
+        lineWidth: 3,
+        lineOpacity: 0.8,
+        lineDasharray: []
+      })
+    },
+    // 是否自动开始绘制
+    autoStart: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示距离标注
+    showDistance: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示提示信息
+    showTooltip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      drawTool: null,
+      lines: []
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initDrawLine();
+    }
+  },
+  beforeDestroy() {
+    this.removeDrawLine();
+  },
+  methods: {
+    // 初始化绘制线工具
+    initDrawLine() {
+      if (!this.mapInstance) return;
+      this.layer = new maptalks.VectorLayer(this.layerId);
+      this.mapInstance.addLayer(this.layer);
+      this.drawTool = new maptalks.DrawTool({
+        mode: "linestring",
+        symbol: this.symbol,
+        once: true,
+        enableAltitude: true
+      }).addTo(this.mapInstance);
+      this.bindDrawToolEvents();
+      if (this.autoStart) {
+        this.enable();
+      }
+      this.$emit("ready", this.drawTool);
+    },
+    // 绑定绘制工具事件
+    bindDrawToolEvents() {
+      if (!this.drawTool) return;
+      this.drawTool.on("drawstart", this.handleDrawStart);
+      this.drawTool.on("drawend", this.handleDrawEnd);
+      this.drawTool.on("disable", this.handleDisable);
+    },
+    // 事件处理
+    handleDrawStart(param) {
+      this.$emit("drawstart", param);
+    },
+    handleDrawEnd(param) {
+      const line = param.geometry;
+      this.lines.push(line);
+      const result = {
+        line,
+        coordinates: line.getCoordinates(),
+        distance: this.calculateDistance(line.getCoordinates()),
+        allLines: this.lines
+      };
+      if (this.showDistance) {
+        this.addDistanceLabel(line, result.distance);
+      }
+      this.$emit("drawend", result);
+    },
+    handleDisable() {
+      this.$emit("disable");
+    },
+    // 计算距离
+    calculateDistance(coordinates) {
+      if (coordinates && coordinates.length >= 2) {
+        let distance = 0;
+        for (let i = 0; i < coordinates.length - 1; i++) {
+          const p1 = new maptalks.Coordinate(coordinates[i]);
+          const p2 = new maptalks.Coordinate(coordinates[i + 1]);
+          distance += p1.distanceTo(p2);
+        }
+        return distance;
+      }
+      return 0;
+    },
+    // 添加距离标注
+    addDistanceLabel(line, distance) {
+      if (!this.layer) return;
+      const coordinates = line.getCoordinates();
+      const centerIndex = Math.floor(coordinates.length / 2);
+      const center = coordinates[centerIndex];
+      const label = new maptalks.Label(this.formatDistance(distance), center, {
+        boxStyle: {
+          padding: [2, 2],
+          symbol: {
+            markerType: "square",
+            markerFill: "rgba(255,255,255,0.9)",
+            markerLineColor: "#666",
+            markerLineWidth: 1
+          }
+        },
+        textStyle: {
+          fontSize: 12,
+          fill: "#333",
+          weight: "bold"
+        }
+      });
+      this.layer.addGeometry(label);
+    },
+    // 格式化距离
+    formatDistance(distance) {
+      if (distance < 1e3) {
+        return Math.round(distance) + "m";
+      } else {
+        return (distance / 1e3).toFixed(2) + "km";
+      }
+    },
+    // 启用绘制
+    enable() {
+      if (this.drawTool) {
+        this.drawTool.enable();
+      }
+    },
+    // 禁用绘制
+    disable() {
+      if (this.drawTool) {
+        this.drawTool.disable();
+      }
+    },
+    // 获取所有绘制的线
+    getLines() {
+      return this.lines;
+    },
+    // 清除所有线
+    clear() {
+      this.lines = [];
+      if (this.layer) {
+        this.layer.clear();
+      }
+      this.$emit("clear");
+    },
+    // 添加线
+    addLine(coordinates) {
+      const line = new maptalks.LineString(coordinates, {
+        symbol: this.symbol
+      });
+      this.layer.addGeometry(line);
+      this.lines.push(line);
+      const distance = this.calculateDistance(coordinates);
+      if (this.showDistance) {
+        this.addDistanceLabel(line, distance);
+      }
+      this.$emit("add-line", { line, coordinates, distance });
+    },
+    // 移除线
+    removeLine(index2) {
+      if (index2 >= 0 && index2 < this.lines.length) {
+        const line = this.lines[index2];
+        this.layer.removeGeometry(line);
+        this.lines.splice(index2, 1);
+        this.$emit("remove-line", { line, index: index2 });
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.drawTool) {
+        this.drawTool.setSymbol(symbol);
+      }
+    },
+    // 获取绘制工具实例
+    getDrawTool() {
+      return this.drawTool;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  }
+};
+var _sfc_render$6 = function render11() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-draw-line" });
+};
+var _sfc_staticRenderFns$6 = [];
+var __component__$6 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$6,
+  _sfc_render$6,
+  _sfc_staticRenderFns$6,
+  false,
+  null,
+  "37cf3549"
+);
+const FyDrawLineComponent = __component__$6.exports;
+const FyDrawLine = FyDrawLineComponent;
+FyDrawLine.install = function(Vue) {
+  Vue.component(FyDrawLine.name || "FyDrawLine", FyDrawLine);
+};
+const _sfc_main$5 = {
+  name: "FyDrawPolygon",
+  props: {
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "draw-polygon-layer"
+    },
+    // 面样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#ff0000",
+        lineWidth: 2,
+        lineOpacity: 0.8,
+        polygonFill: "#ff0000",
+        polygonOpacity: 0.3,
+        lineDasharray: []
+      })
+    },
+    // 是否自动开始绘制
+    autoStart: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示面积标注
+    showArea: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示提示信息
+    showTooltip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      drawTool: null,
+      polygons: []
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initDrawPolygon();
+    }
+  },
+  beforeDestroy() {
+    this.removeDrawPolygon();
+  },
+  methods: {
+    // 初始化绘制面工具
+    initDrawPolygon() {
+      if (!this.mapInstance) return;
+      this.layer = new maptalks.VectorLayer(this.layerId);
+      this.mapInstance.addLayer(this.layer);
+      this.drawTool = new maptalks.DrawTool({
+        mode: "polygon",
+        symbol: this.symbol,
+        once: true,
+        enableAltitude: true
+      }).addTo(this.mapInstance);
+      this.bindDrawToolEvents();
+      if (this.autoStart) {
+        this.enable();
+      }
+      this.$emit("ready", this.drawTool);
+    },
+    // 绑定绘制工具事件
+    bindDrawToolEvents() {
+      if (!this.drawTool) return;
+      this.drawTool.on("drawstart", this.handleDrawStart);
+      this.drawTool.on("drawend", this.handleDrawEnd);
+      this.drawTool.on("disable", this.handleDisable);
+    },
+    // 事件处理
+    handleDrawStart(param) {
+      this.$emit("drawstart", param);
+    },
+    handleDrawEnd(param) {
+      const polygon = param.geometry;
+      this.polygons.push(polygon);
+      const result = {
+        polygon,
+        coordinates: polygon.getCoordinates(),
+        area: this.calculateArea(polygon),
+        perimeter: this.calculatePerimeter(polygon.getCoordinates()[0]),
+        allPolygons: this.polygons
+      };
+      if (this.showArea) {
+        this.addAreaLabel(polygon, result.area);
+      }
+      this.$emit("drawend", result);
+    },
+    handleDisable() {
+      this.$emit("disable");
+    },
+    // 计算面积
+    calculateArea(polygon) {
+      if (polygon) {
+        return polygon.getArea();
+      }
+      return 0;
+    },
+    // 计算周长
+    calculatePerimeter(coordinates) {
+      if (coordinates && coordinates.length >= 2) {
+        let perimeter = 0;
+        for (let i = 0; i < coordinates.length - 1; i++) {
+          const p1 = new maptalks.Coordinate(coordinates[i]);
+          const p2 = new maptalks.Coordinate(coordinates[i + 1]);
+          perimeter += p1.distanceTo(p2);
+        }
+        return perimeter;
+      }
+      return 0;
+    },
+    // 添加面积标注
+    addAreaLabel(polygon, area) {
+      if (!this.layer) return;
+      const center = polygon.getCenter();
+      const label = new maptalks.Label(this.formatArea(area), center, {
+        boxStyle: {
+          padding: [2, 2],
+          symbol: {
+            markerType: "square",
+            markerFill: "rgba(255,255,255,0.9)",
+            markerLineColor: "#666",
+            markerLineWidth: 1
+          }
+        },
+        textStyle: {
+          fontSize: 12,
+          fill: "#333",
+          weight: "bold"
+        }
+      });
+      this.layer.addGeometry(label);
+    },
+    // 格式化面积
+    formatArea(area) {
+      if (area < 1e6) {
+        return Math.round(area) + "m²";
+      } else {
+        return (area / 1e6).toFixed(2) + "km²";
+      }
+    },
+    // 启用绘制
+    enable() {
+      if (this.drawTool) {
+        this.drawTool.enable();
+      }
+    },
+    // 禁用绘制
+    disable() {
+      if (this.drawTool) {
+        this.drawTool.disable();
+      }
+    },
+    // 获取所有绘制的面
+    getPolygons() {
+      return this.polygons;
+    },
+    // 清除所有面
+    clear() {
+      this.polygons = [];
+      if (this.layer) {
+        this.layer.clear();
+      }
+      this.$emit("clear");
+    },
+    // 添加面
+    addPolygon(coordinates) {
+      const polygon = new maptalks.Polygon(coordinates, {
+        symbol: this.symbol
+      });
+      this.layer.addGeometry(polygon);
+      this.polygons.push(polygon);
+      const area = this.calculateArea(polygon);
+      if (this.showArea) {
+        this.addAreaLabel(polygon, area);
+      }
+      this.$emit("add-polygon", { polygon, coordinates, area });
+    },
+    // 移除面
+    removePolygon(index2) {
+      if (index2 >= 0 && index2 < this.polygons.length) {
+        const polygon = this.polygons[index2];
+        this.layer.removeGeometry(polygon);
+        this.polygons.splice(index2, 1);
+        this.$emit("remove-polygon", { polygon, index: index2 });
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.drawTool) {
+        this.drawTool.setSymbol(symbol);
+      }
+    },
+    // 获取绘制工具实例
+    getDrawTool() {
+      return this.drawTool;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  }
+};
+var _sfc_render$5 = function render12() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-draw-polygon" });
+};
+var _sfc_staticRenderFns$5 = [];
+var __component__$5 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
+  false,
+  null,
+  "515f74bf"
+);
+const FyDrawPolygonComponent = __component__$5.exports;
+const FyDrawPolygon = FyDrawPolygonComponent;
+FyDrawPolygon.install = function(Vue) {
+  Vue.component(FyDrawPolygon.name || "FyDrawPolygon", FyDrawPolygon);
+};
+const _sfc_main$4 = {
+  name: "FyDrawCircle",
+  props: {
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "draw-circle-layer"
+    },
+    // 圆样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#ff0000",
+        lineWidth: 2,
+        lineOpacity: 0.8,
+        polygonFill: "#ff0000",
+        polygonOpacity: 0.3
+      })
+    },
+    // 是否自动开始绘制
+    autoStart: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示半径和面积标注
+    showLabels: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示提示信息
+    showTooltip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      drawTool: null,
+      circles: []
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initDrawCircle();
+    }
+  },
+  beforeDestroy() {
+    this.removeDrawCircle();
+  },
+  methods: {
+    // 初始化绘制圆工具
+    initDrawCircle() {
+      if (!this.mapInstance) return;
+      this.layer = new maptalks.VectorLayer(this.layerId);
+      this.mapInstance.addLayer(this.layer);
+      this.drawTool = new maptalks.DrawTool({
+        mode: "circle",
+        symbol: this.symbol,
+        once: true,
+        enableAltitude: true
+      }).addTo(this.mapInstance);
+      this.bindDrawToolEvents();
+      if (this.autoStart) {
+        this.enable();
+      }
+      this.$emit("ready", this.drawTool);
+    },
+    // 绑定绘制工具事件
+    bindDrawToolEvents() {
+      if (!this.drawTool) return;
+      this.drawTool.on("drawstart", this.handleDrawStart);
+      this.drawTool.on("drawend", this.handleDrawEnd);
+      this.drawTool.on("disable", this.handleDisable);
+    },
+    // 事件处理
+    handleDrawStart(param) {
+      this.$emit("drawstart", param);
+    },
+    handleDrawEnd(param) {
+      const circle = param.geometry;
+      this.circles.push(circle);
+      const result = {
+        circle,
+        center: circle.getCoordinates(),
+        radius: this.calculateRadius(circle),
+        area: this.calculateArea(circle),
+        perimeter: this.calculatePerimeter(circle),
+        allCircles: this.circles
+      };
+      if (this.showLabels) {
+        this.addCircleLabels(circle, result.radius, result.area);
+      }
+      this.$emit("drawend", result);
+    },
+    handleDisable() {
+      this.$emit("disable");
+    },
+    // 计算半径
+    calculateRadius(circle) {
+      if (circle) {
+        return circle.getRadius();
+      }
+      return 0;
+    },
+    // 计算面积
+    calculateArea(circle) {
+      if (circle) {
+        return circle.getArea();
+      }
+      return 0;
+    },
+    // 计算周长
+    calculatePerimeter(circle) {
+      if (circle) {
+        const radius = circle.getRadius();
+        return 2 * Math.PI * radius;
+      }
+      return 0;
+    },
+    // 添加圆的标注
+    addCircleLabels(circle, radius, area) {
+      if (!this.layer) return;
+      const center = circle.getCoordinates();
+      const radiusLabel = new maptalks.Label(this.formatDistance(radius), center, {
+        boxStyle: {
+          padding: [2, 2],
+          symbol: {
+            markerType: "square",
+            markerFill: "rgba(255,255,255,0.9)",
+            markerLineColor: "#666",
+            markerLineWidth: 1
+          }
+        },
+        textStyle: {
+          fontSize: 12,
+          fill: "#333",
+          weight: "bold"
+        }
+      });
+      this.layer.addGeometry(radiusLabel);
+      const angle = Math.PI / 4;
+      const labelCoords = {
+        x: center.x + radius * Math.cos(angle),
+        y: center.y + radius * Math.sin(angle)
+      };
+      const areaLabel = new maptalks.Label(this.formatArea(area), labelCoords, {
+        boxStyle: {
+          padding: [2, 2],
+          symbol: {
+            markerType: "square",
+            markerFill: "rgba(255,255,255,0.9)",
+            markerLineColor: "#666",
+            markerLineWidth: 1
+          }
+        },
+        textStyle: {
+          fontSize: 11,
+          fill: "#666",
+          weight: "normal"
+        }
+      });
+      this.layer.addGeometry(areaLabel);
+    },
+    // 格式化距离
+    formatDistance(distance) {
+      if (distance < 1e3) {
+        return Math.round(distance) + "m";
+      } else {
+        return (distance / 1e3).toFixed(2) + "km";
+      }
+    },
+    // 格式化面积
+    formatArea(area) {
+      if (area < 1e6) {
+        return Math.round(area) + "m²";
+      } else {
+        return (area / 1e6).toFixed(2) + "km²";
+      }
+    },
+    // 启用绘制
+    enable() {
+      if (this.drawTool) {
+        this.drawTool.enable();
+      }
+    },
+    // 禁用绘制
+    disable() {
+      if (this.drawTool) {
+        this.drawTool.disable();
+      }
+    },
+    // 获取所有绘制的圆
+    getCircles() {
+      return this.circles;
+    },
+    // 清除所有圆
+    clear() {
+      this.circles = [];
+      if (this.layer) {
+        this.layer.clear();
+      }
+      this.$emit("clear");
+    },
+    // 添加圆
+    addCircle(center, radius) {
+      const circle = new maptalks.Circle(center, radius, {
+        symbol: this.symbol
+      });
+      this.layer.addGeometry(circle);
+      this.circles.push(circle);
+      const area = this.calculateArea(circle);
+      if (this.showLabels) {
+        this.addCircleLabels(circle, radius, area);
+      }
+      this.$emit("add-circle", { circle, center, radius, area });
+    },
+    // 移除圆
+    removeCircle(index2) {
+      if (index2 >= 0 && index2 < this.circles.length) {
+        const circle = this.circles[index2];
+        this.layer.removeGeometry(circle);
+        this.circles.splice(index2, 1);
+        this.$emit("remove-circle", { circle, index: index2 });
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.drawTool) {
+        this.drawTool.setSymbol(symbol);
+      }
+    },
+    // 获取绘制工具实例
+    getDrawTool() {
+      return this.drawTool;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  }
+};
+var _sfc_render$4 = function render13() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-draw-circle" });
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
+  null,
+  "93e35e4d"
+);
+const FyDrawCircleComponent = __component__$4.exports;
+const FyDrawCircle = FyDrawCircleComponent;
+FyDrawCircle.install = function(Vue) {
+  Vue.component(FyDrawCircle.name || "FyDrawCircle", FyDrawCircle);
+};
+const _sfc_main$3 = {
+  name: "FyPoint",
+  props: {
+    // 位置坐标 [经度, 纬度]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "point-layer"
+    },
+    // 点样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        markerType: "ellipse",
+        markerFill: "#ff0000",
+        markerFillOpacity: 1,
+        markerLineColor: "#ffffff",
+        markerLineWidth: 2,
+        markerLineOpacity: 1,
+        markerWidth: 24,
+        markerHeight: 24,
+        markerDx: 0,
+        markerDy: 0
+      })
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 层级
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      point: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initPoint();
+    }
+  },
+  beforeDestroy() {
+    this.removePoint();
+  },
+  methods: {
+    // 初始化点
+    initPoint() {
+      if (!this.mapInstance) return;
+      this.layer = this.mapInstance.getLayer(this.layerId);
+      if (!this.layer) {
+        this.layer = new maptalks.VectorLayer(this.layerId, {
+          zIndex: this.zIndex
+        });
+        this.mapInstance.addLayer(this.layer);
+      }
+      const config = {
+        symbol: this.symbol,
+        visible: this.visible,
+        opacity: this.opacity,
+        properties: this.properties,
+        zIndex: this.zIndex
+      };
+      this.point = new maptalks.Marker(this.coordinates, config);
+      this.point.on("click", this.handleClick);
+      this.point.on("mouseover", this.handleMouseover);
+      this.point.on("mouseout", this.handleMouseout);
+      this.point.on("dblclick", this.handleDblClick);
+      this.point.on("mousedown", this.handleMouseDown);
+      this.point.on("mouseup", this.handleMouseUp);
+      this.layer.addGeometry(this.point);
+      this.$emit("ready", this.point);
+    },
+    // 移除点
+    removePoint() {
+      if (this.point && this.layer) {
+        this.point.off("click", this.handleClick);
+        this.point.off("mouseover", this.handleMouseover);
+        this.point.off("mouseout", this.handleMouseout);
+        this.point.off("dblclick", this.handleDblClick);
+        this.point.off("mousedown", this.handleMouseDown);
+        this.point.off("mouseup", this.handleMouseUp);
+        this.layer.removeGeometry(this.point);
+        this.point = null;
+      }
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleMouseover(e) {
+      this.$emit("mouseover", e);
+    },
+    handleMouseout(e) {
+      this.$emit("mouseout", e);
+    },
+    handleDblClick(e) {
+      this.$emit("dblclick", e);
+    },
+    handleMouseDown(e) {
+      this.$emit("mousedown", e);
+    },
+    handleMouseUp(e) {
+      this.$emit("mouseup", e);
+    },
+    // 设置位置
+    setCoordinates(coordinates) {
+      if (this.point) {
+        this.point.setCoordinates(coordinates);
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.point) {
+        this.point.setSymbol(symbol);
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.point) {
+        this.point.setOpacity(opacity);
+      }
+    },
+    // 显示
+    show() {
+      if (this.point) {
+        this.point.show();
+      }
+    },
+    // 隐藏
+    hide() {
+      if (this.point) {
+        this.point.hide();
+      }
+    },
+    // 动画到指定位置
+    animateTo(coordinates, options = {}) {
+      if (this.point) {
+        this.point.animateTo(
+          {
+            coordinates
+          },
+          options
+        );
+      }
+    },
+    // 获取坐标
+    getCoordinates() {
+      if (this.point) {
+        return this.point.getCoordinates();
+      }
+      return null;
+    },
+    // 获取点实例
+    getPoint() {
+      return this.point;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  },
+  watch: {
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    symbol: {
+      handler(newVal) {
+        this.setSymbol(newVal);
+      },
+      deep: true
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+};
+var _sfc_render$3 = function render14() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-point" });
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
+  null,
+  "9191aada"
+);
+const FyPointComponent = __component__$3.exports;
+const FyPoint = FyPointComponent;
+FyPoint.install = function(Vue) {
+  Vue.component(FyPoint.name || "FyPoint", FyPoint);
+};
+const _sfc_main$2 = {
+  name: "FyLineString",
+  props: {
+    // 线的坐标数组 [[经度, 纬度], ...]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "linestring-layer"
+    },
+    // 线样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#3388ff",
+        lineWidth: 3,
+        lineOpacity: 0.8,
+        lineDasharray: [],
+        lineCap: "butt",
+        // butt, round, square
+        lineJoin: "miter"
+        // mitre, round, bevel
+      })
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 层级
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    // 是否平滑曲线
+    smooth: {
+      type: Boolean,
+      default: false
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      lineString: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initLineString();
+    }
+  },
+  beforeDestroy() {
+    this.removeLineString();
+  },
+  methods: {
+    // 初始化线
+    initLineString() {
+      if (!this.mapInstance) return;
+      this.layer = this.mapInstance.getLayer(this.layerId);
+      if (!this.layer) {
+        this.layer = new maptalks.VectorLayer(this.layerId, {
+          zIndex: this.zIndex
+        });
+        this.mapInstance.addLayer(this.layer);
+      }
+      const config = {
+        symbol: this.symbol,
+        visible: this.visible,
+        opacity: this.opacity,
+        properties: this.properties,
+        zIndex: this.zIndex
+      };
+      this.lineString = new maptalks.LineString(this.coordinates, config);
+      this.lineString.on("click", this.handleClick);
+      this.lineString.on("mouseover", this.handleMouseover);
+      this.lineString.on("mouseout", this.handleMouseout);
+      this.lineString.on("dblclick", this.handleDblClick);
+      this.lineString.on("mousedown", this.handleMouseDown);
+      this.lineString.on("mouseup", this.handleMouseUp);
+      this.layer.addGeometry(this.lineString);
+      this.$emit("ready", this.lineString);
+    },
+    // 移除线
+    removeLineString() {
+      if (this.lineString && this.layer) {
+        this.lineString.off("click", this.handleClick);
+        this.lineString.off("mouseover", this.handleMouseover);
+        this.lineString.off("mouseout", this.handleMouseout);
+        this.lineString.off("dblclick", this.handleDblClick);
+        this.lineString.off("mousedown", this.handleMouseDown);
+        this.lineString.off("mouseup", this.handleMouseUp);
+        this.layer.removeGeometry(this.lineString);
+        this.lineString = null;
+      }
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleMouseover(e) {
+      this.$emit("mouseover", e);
+    },
+    handleMouseout(e) {
+      this.$emit("mouseout", e);
+    },
+    handleDblClick(e) {
+      this.$emit("dblclick", e);
+    },
+    handleMouseDown(e) {
+      this.$emit("mousedown", e);
+    },
+    handleMouseUp(e) {
+      this.$emit("mouseup", e);
+    },
+    // 设置坐标
+    setCoordinates(coordinates) {
+      if (this.lineString) {
+        this.lineString.setCoordinates(coordinates);
+      }
+    },
+    // 添加坐标点
+    appendCoordinates(coordinates) {
+      if (this.lineString) {
+        this.lineString.appendCoordinates(coordinates);
+      }
+    },
+    // 移除坐标点
+    removeCoordinates(index2, count = 1) {
+      if (this.lineString) {
+        this.lineString.removeCoordinates(index2, count);
+      }
+    },
+    // 插入坐标点
+    insertCoordinates(index2, coordinates) {
+      if (this.lineString) {
+        this.lineString.insertCoordinates(index2, coordinates);
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.lineString) {
+        this.lineString.setSymbol(symbol);
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.lineString) {
+        this.lineString.setOpacity(opacity);
+      }
+    },
+    // 显示
+    show() {
+      if (this.lineString) {
+        this.lineString.show();
+      }
+    },
+    // 隐藏
+    hide() {
+      if (this.lineString) {
+        this.lineString.hide();
+      }
+    },
+    // 获取长度
+    getLength() {
+      if (this.lineString) {
+        return this.lineString.getLength();
+      }
+      return 0;
+    },
+    // 获取坐标
+    getCoordinates() {
+      if (this.lineString) {
+        return this.lineString.getCoordinates();
+      }
+      return [];
+    },
+    // 获取中心点
+    getCenter() {
+      if (this.lineString) {
+        return this.lineString.getCenter();
+      }
+      return null;
+    },
+    // 获取范围
+    getExtent() {
+      if (this.lineString) {
+        return this.lineString.getExtent();
+      }
+      return null;
+    },
+    // 获取线实例
+    getLineString() {
+      return this.lineString;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  },
+  watch: {
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    symbol: {
+      handler(newVal) {
+        this.setSymbol(newVal);
+      },
+      deep: true
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+};
+var _sfc_render$2 = function render15() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-linestring" });
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  "f5afe3b1"
+);
+const FyLineStringComponent = __component__$2.exports;
+const FyLineString = FyLineStringComponent;
+FyLineString.install = function(Vue) {
+  Vue.component(FyLineString.name || "FyLineString", FyLineString);
+};
+const _sfc_main$1 = {
+  name: "FyPolygon",
+  props: {
+    // 多边形的坐标数组 [[[经度, 纬度], ...], ...]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "polygon-layer"
+    },
+    // 多边形样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#3388ff",
+        lineWidth: 2,
+        lineOpacity: 0.8,
+        polygonFill: "#3388ff",
+        polygonOpacity: 0.3,
+        lineDasharray: []
+      })
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 层级
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      polygon: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initPolygon();
+    }
+  },
+  beforeDestroy() {
+    this.removePolygon();
+  },
+  methods: {
+    // 初始化多边形
+    initPolygon() {
+      if (!this.mapInstance) return;
+      this.layer = this.mapInstance.getLayer(this.layerId);
+      if (!this.layer) {
+        this.layer = new maptalks.VectorLayer(this.layerId, {
+          zIndex: this.zIndex
+        });
+        this.mapInstance.addLayer(this.layer);
+      }
+      const config = {
+        symbol: this.symbol,
+        visible: this.visible,
+        opacity: this.opacity,
+        properties: this.properties,
+        zIndex: this.zIndex
+      };
+      this.polygon = new maptalks.Polygon(this.coordinates, config);
+      this.polygon.on("click", this.handleClick);
+      this.polygon.on("mouseover", this.handleMouseover);
+      this.polygon.on("mouseout", this.handleMouseout);
+      this.polygon.on("dblclick", this.handleDblClick);
+      this.polygon.on("mousedown", this.handleMouseDown);
+      this.polygon.on("mouseup", this.handleMouseUp);
+      this.layer.addGeometry(this.polygon);
+      this.$emit("ready", this.polygon);
+    },
+    // 移除多边形
+    removePolygon() {
+      if (this.polygon && this.layer) {
+        this.polygon.off("click", this.handleClick);
+        this.polygon.off("mouseover", this.handleMouseover);
+        this.polygon.off("mouseout", this.handleMouseout);
+        this.polygon.off("dblclick", this.handleDblClick);
+        this.polygon.off("mousedown", this.handleMouseDown);
+        this.polygon.off("mouseup", this.handleMouseUp);
+        this.layer.removeGeometry(this.polygon);
+        this.polygon = null;
+      }
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleMouseover(e) {
+      this.$emit("mouseover", e);
+    },
+    handleMouseout(e) {
+      this.$emit("mouseout", e);
+    },
+    handleDblClick(e) {
+      this.$emit("dblclick", e);
+    },
+    handleMouseDown(e) {
+      this.$emit("mousedown", e);
+    },
+    handleMouseUp(e) {
+      this.$emit("mouseup", e);
+    },
+    // 设置坐标
+    setCoordinates(coordinates) {
+      if (this.polygon) {
+        this.polygon.setCoordinates(coordinates);
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.polygon) {
+        this.polygon.setSymbol(symbol);
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.polygon) {
+        this.polygon.setOpacity(opacity);
+      }
+    },
+    // 显示
+    show() {
+      if (this.polygon) {
+        this.polygon.show();
+      }
+    },
+    // 隐藏
+    hide() {
+      if (this.polygon) {
+        this.polygon.hide();
+      }
+    },
+    // 获取面积
+    getArea() {
+      if (this.polygon) {
+        return this.polygon.getArea();
+      }
+      return 0;
+    },
+    // 获取坐标
+    getCoordinates() {
+      if (this.polygon) {
+        return this.polygon.getCoordinates();
+      }
+      return [];
+    },
+    // 获取中心点
+    getCenter() {
+      if (this.polygon) {
+        return this.polygon.getCenter();
+      }
+      return null;
+    },
+    // 获取范围
+    getExtent() {
+      if (this.polygon) {
+        return this.polygon.getExtent();
+      }
+      return null;
+    },
+    // 获取外轮廓
+    getShell() {
+      if (this.polygon) {
+        return this.polygon.getShell();
+      }
+      return [];
+    },
+    // 获取内孔
+    getHoles() {
+      if (this.polygon) {
+        return this.polygon.getHoles();
+      }
+      return [];
+    },
+    // 获取多边形实例
+    getPolygon() {
+      return this.polygon;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  },
+  watch: {
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    symbol: {
+      handler(newVal) {
+        this.setSymbol(newVal);
+      },
+      deep: true
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+};
+var _sfc_render$1 = function render16() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-polygon" });
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  "762f4fba"
+);
+const FyPolygonComponent = __component__$1.exports;
+const FyPolygon = FyPolygonComponent;
+FyPolygon.install = function(Vue) {
+  Vue.component(FyPolygon.name || "FyPolygon", FyPolygon);
+};
+const _sfc_main = {
+  name: "FyCircle",
+  props: {
+    // 圆心坐标 [经度, 纬度]
+    coordinates: {
+      type: Array,
+      required: true
+    },
+    // 半径（米）
+    radius: {
+      type: Number,
+      required: true
+    },
+    // 图层ID
+    layerId: {
+      type: String,
+      default: "circle-layer"
+    },
+    // 圆样式
+    symbol: {
+      type: Object,
+      default: () => ({
+        lineColor: "#ff0000",
+        lineWidth: 2,
+        lineOpacity: 0.8,
+        polygonFill: "#ff0000",
+        polygonOpacity: 0.3
+      })
+    },
+    // 透明度
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    // 可见性
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 层级
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    // 圆弧数量（控制圆的平滑度）
+    numberOfPoints: {
+      type: Number,
+      default: 60
+    },
+    // 自定义属性
+    properties: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      layer: null,
+      circle: null
+    };
+  },
+  inject: {
+    mapInstance: {
+      default: null
+    }
+  },
+  mounted() {
+    if (this.mapInstance) {
+      this.initCircle();
+    }
+  },
+  beforeDestroy() {
+    this.removeCircle();
+  },
+  methods: {
+    // 初始化圆
+    initCircle() {
+      if (!this.mapInstance) return;
+      this.layer = this.mapInstance.getLayer(this.layerId);
+      if (!this.layer) {
+        this.layer = new maptalks.VectorLayer(this.layerId, {
+          zIndex: this.zIndex
+        });
+        this.mapInstance.addLayer(this.layer);
+      }
+      const config = {
+        symbol: this.symbol,
+        visible: this.visible,
+        opacity: this.opacity,
+        properties: this.properties,
+        zIndex: this.zIndex,
+        numberOfPoints: this.numberOfPoints
+      };
+      this.circle = new maptalks.Circle(this.coordinates, this.radius, config);
+      this.circle.on("click", this.handleClick);
+      this.circle.on("mouseover", this.handleMouseover);
+      this.circle.on("mouseout", this.handleMouseout);
+      this.circle.on("dblclick", this.handleDblClick);
+      this.circle.on("mousedown", this.handleMouseDown);
+      this.circle.on("mouseup", this.handleMouseUp);
+      this.layer.addGeometry(this.circle);
+      this.$emit("ready", this.circle);
+    },
+    // 移除圆
+    removeCircle() {
+      if (this.circle && this.layer) {
+        this.circle.off("click", this.handleClick);
+        this.circle.off("mouseover", this.handleMouseover);
+        this.circle.off("mouseout", this.handleMouseout);
+        this.circle.off("dblclick", this.handleDblClick);
+        this.circle.off("mousedown", this.handleMouseDown);
+        this.circle.off("mouseup", this.handleMouseUp);
+        this.layer.removeGeometry(this.circle);
+        this.circle = null;
+      }
+    },
+    // 事件处理
+    handleClick(e) {
+      this.$emit("click", e);
+    },
+    handleMouseover(e) {
+      this.$emit("mouseover", e);
+    },
+    handleMouseout(e) {
+      this.$emit("mouseout", e);
+    },
+    handleDblClick(e) {
+      this.$emit("dblclick", e);
+    },
+    handleMouseDown(e) {
+      this.$emit("mousedown", e);
+    },
+    handleMouseUp(e) {
+      this.$emit("mouseup", e);
+    },
+    // 设置圆心坐标
+    setCoordinates(coordinates) {
+      if (this.circle) {
+        this.circle.setCoordinates(coordinates);
+      }
+    },
+    // 设置半径
+    setRadius(radius) {
+      if (this.circle) {
+        this.circle.setRadius(radius);
+      }
+    },
+    // 设置样式
+    setSymbol(symbol) {
+      if (this.circle) {
+        this.circle.setSymbol(symbol);
+      }
+    },
+    // 设置透明度
+    setOpacity(opacity) {
+      if (this.circle) {
+        this.circle.setOpacity(opacity);
+      }
+    },
+    // 显示
+    show() {
+      if (this.circle) {
+        this.circle.show();
+      }
+    },
+    // 隐藏
+    hide() {
+      if (this.circle) {
+        this.circle.hide();
+      }
+    },
+    // 获取半径
+    getRadius() {
+      if (this.circle) {
+        return this.circle.getRadius();
+      }
+      return 0;
+    },
+    // 获取面积
+    getArea() {
+      if (this.circle) {
+        return this.circle.getArea();
+      }
+      return 0;
+    },
+    // 获取周长
+    getLength() {
+      if (this.circle) {
+        const radius = this.circle.getRadius();
+        return 2 * Math.PI * radius;
+      }
+      return 0;
+    },
+    // 获取坐标
+    getCoordinates() {
+      if (this.circle) {
+        return this.circle.getCoordinates();
+      }
+      return null;
+    },
+    // 获取中心点
+    getCenter() {
+      if (this.circle) {
+        return this.circle.getCenter();
+      }
+      return null;
+    },
+    // 获取范围
+    getExtent() {
+      if (this.circle) {
+        return this.circle.getExtent();
+      }
+      return null;
+    },
+    // 获取边界
+    getBounds() {
+      if (this.circle) {
+        return this.circle.getBounds();
+      }
+      return null;
+    },
+    // 获取圆实例
+    getCircle() {
+      return this.circle;
+    },
+    // 获取图层实例
+    getLayer() {
+      return this.layer;
+    }
+  },
+  watch: {
+    coordinates(newVal) {
+      this.setCoordinates(newVal);
+    },
+    radius(newVal) {
+      this.setRadius(newVal);
+    },
+    symbol: {
+      handler(newVal) {
+        this.setSymbol(newVal);
+      },
+      deep: true
+    },
+    opacity(newVal) {
+      this.setOpacity(newVal);
+    },
+    visible(newVal) {
+      if (newVal) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }
+};
+var _sfc_render = function render17() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "fy-circle" });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "96938291"
+);
+const FyCircleComponent = __component__.exports;
+const FyCircle = FyCircleComponent;
+FyCircle.install = function(Vue) {
+  Vue.component(FyCircle.name || "FyCircle", FyCircle);
+};
+const components = [
+  MyButton,
+  FyMap,
+  FyTileLayer,
+  FyVectorLayer,
+  FyMarker,
+  FyLabel,
+  FyPopup,
+  FyClusterMarker,
+  FyDrawTool,
+  FyDrawPoint,
+  FyDrawLine,
+  FyDrawPolygon,
+  FyDrawCircle,
+  FyPoint,
+  FyLineString,
+  FyPolygon,
+  FyCircle
+];
+const index = {
+  install(Vue) {
+    components.forEach((comp) => {
+      Vue.component(comp.name || comp.__name, comp);
+    });
+  }
+};
+export {
+  FyCircle,
+  FyClusterMarker,
+  FyDrawCircle,
+  FyDrawLine,
+  FyDrawPoint,
+  FyDrawPolygon,
+  FyDrawTool,
+  FyLabel,
+  FyLineString,
+  FyMap,
+  FyMarker,
+  FyPoint,
+  FyPolygon,
+  FyPopup,
+  FyTileLayer,
+  FyVectorLayer,
+  MyButton,
+  index as default
+};
+//# sourceMappingURL=fy-map.es.js.map