tdt-overlay-factory/README.md

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

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

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

### 安装

```cmd
# npm安装
npm install tdt-overlay-factory

# yarn安装
yarn add tdt-overlay-factory

# pnpm安装
pnpm install tdt-overlay-factory
```

### 引入

#### vue2 引入

```js
# main.js

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

Vue.use(tdtOverlayFactory);
```

#### vue3 引入

```js
# main.js

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

app.use(tdtOverlayFactory, Vue);
```

### 使用

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

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

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

```js
// 点覆盖物示例
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);
```

```js
// 块覆盖物示例
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

<iframe src="https://codesandbox.io/embed/39zzw?view=editor+%2B+preview&module=%2Fsrc%2Fviews%2FtdtDemo.vue"
     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
     title="Vue Template"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

### 更新

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