天地图覆盖物工厂，通过 vue 组件能直接生成天地图覆盖物类，支持 vue2/vue3。

这个工具包里没有直接引入天地图的 sdk，但是工具包里又直接使用了 T 这个变量，因此使用前需要用户先引入天地图 sdk，并将将 T 注册为 window 上的全局变量。 天地图 sdk： http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥

安装

# npm安装
npm install tdt-overlay-factory

# yarn安装
yarn add tdt-overlay-factory

# pnpm安装
pnpm install tdt-overlay-factory

引入

vue2 引入

# main.js

import tdtOverlayFactory from "tdt-overlay-factory";
import "tdt-overlay-factory/dist/style.css";

Vue.use(tdtOverlayFactory);

vue3 引入

# main.js

import tdtOverlayFactory from "tdt-overlay-factory";
import "tdt-overlay-factory/dist/style.css";

app.use(tdtOverlayFactory, Vue);

使用

vue2 使用 this.$调用，vue3 使用 inject 引入

// vue2
this.$pointOverlayFactory;
this.$blockOverlayFactory;

// vue3
inject: ["pointOverlayFactory", "blockOverlayFactory"];
this.pointOverlayFactory;
this.blockOverlayFactory;

// 点覆盖物示例
const pointOverlay = this.$pointOverlayFactory(moduleName);
const point = new T.LngLat(lng, lat);
const marker = new pointOverlay(point, {
  // 对应覆盖物组件的props,只有对象类是响应式的
  pointData,
  map: this.map,
});
this.map.addOverLay(marker);

// 块覆盖物示例
const blockOverlay = this.$blockOverlayFactory(moduleName);
var block = new T.LngLatBounds(
  new T.LngLat(106.45346, 29.490206),
  new T.LngLat(106.52346, 29.550206)
);
var marker = new blockOverlay(block, {
  map: this.map,
});
this.map.addOverLay(marker);

示例

请参考 https://39zzw.csb.app/#/tdtDemo

更新

v1.0.2 修改自定义覆盖物基类，修正setLngLat、getLngLat方法名，移除zoomend监听 v1.0.1 更新路径