vue-tianditu-map/dist/index.es.js

A Vue 3 component for Tianditu map integration

import { ref as d, watch as l, onMounted as _, nextTick as f, onBeforeUnmount as g, openBlock as x, createElementBlock as M, createElementVNode as A } from "vue";
const h = (o, c) => {
  const t = o.__vccOpts || o;
  for (const [p, s] of c)
    t[p] = s;
  return t;
}, k = /* @__PURE__ */ Object.assign({
  name: "MapComponent"
}, {
  __name: "index",
  props: {
    // 天地图API密钥
    tdtKey: {
      type: String,
      required: !0,
      default: ""
    },
    // 地图中心点坐标 [经度, 纬度]
    center: {
      type: Array,
      default: () => [116.397428, 39.90923]
      // 默认北京
    },
    // 地图缩放级别
    zoom: {
      type: Number,
      default: 12
    },
    // 地图类型：'vec'矢量, 'img'影像, 'ter'地形
    mapType: {
      type: String,
      default: "vec",
      validator: (o) => ["vec", "img", "ter"].includes(o)
    }
  },
  emits: ["map-ready"],
  setup(o, { emit: c }) {
    const t = o, p = c, s = d(null), n = d(null), m = () => new Promise((e, r) => {
      if (window.T) {
        e();
        return;
      }
      const a = document.createElement("script");
      a.src = `http://api.tianditu.gov.cn/api?v=4.0&tk=${t.tdtKey}`, a.type = "text/javascript", a.onload = () => e(), a.onerror = () => r(new Error("天地图API加载失败")), document.head.appendChild(a);
    }), u = () => {
      try {
        n.value = new T.Map("map"), n.value.centerAndZoom(new T.LngLat(t.center[0], t.center[1]), t.zoom), p("map-ready", n.value);
      } catch (e) {
        console.error("创建地图失败:", e);
      }
    }, v = () => {
      n.value && (n.value.clearOverLays(), n.value = null);
    }, y = () => {
      if (!t.tdtKey) {
        console.error("天地图API密钥不能为空");
        return;
      }
      m().then(() => {
        u();
      }).catch((e) => {
        console.error("加载天地图API失败:", e);
      });
    };
    return l(() => t.center, (e) => {
      n.value && e && n.value.centerAndZoom(new T.LngLat(e[0], e[1]), t.zoom);
    }, { deep: !0 }), l(() => t.zoom, (e) => {
      n.value && n.value.setZoom(e);
    }), l(() => t.mapType, (e) => {
      n.value && addLayer(e);
    }), _(() => {
      f(() => {
        y();
      });
    }), g(() => {
      v();
    }), (e, r) => (x(), M("div", {
      class: "map-container",
      ref_key: "mapContainer",
      ref: s
    }, r[0] || (r[0] = [
      A("div", {
        id: "map",
        class: "map-content"
      }, null, -1)
    ]), 512));
  }
}), i = /* @__PURE__ */ h(k, [["__scopeId", "data-v-e47a0d63"]]), w = (o) => {
  o.component("MapComponent", i);
}, z = {
  install: w,
  MapComponent: i
};
export {
  i as MapComponent,
  z as default
};
//# sourceMappingURL=index.es.js.map