vue-tianditu

• 天地图 vue 组件库

• vue-tianditu v2 同时支持 Vue3 和 Vue2(composition-api)

• vue-tianditu v2 文档

安装

npm i vue-tianditu
# or
yarn add vue-tianditu

快速上手

全局引入

全部引入，解放双手

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import VueTianditu from "vue-tianditu";

const app = createApp(App);
app.use(VueTianditu, {
  v: "4.0", //目前只支持4.0版本
  tk: "your map token"
});
app.mount("#app");

<!-- App.vue -->
<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom"></tdt-map>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  import { TdtMap } from "vue-tianditu";
  const state = reactive({
    center: [113.280637, 23.125178],
    zoom: 12
  });
</script>

<style>
  .mapDiv {
    width: 100%;
    height: 100%;
  }
</style>

按需引入

按需引入，配合 ts 获得类型提示

App.vue

<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom" :loadConfig="loadScript"></tdt-map>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  import { TdtMap } from "vue-tianditu";
  const loadConfig = { v: "4.0", tk: "your map token" };
  const state = reactive({
    center: [113.280637, 23.125178],
    zoom: 12
  });
</script>

<style>
  .mapDiv {
    width: 100%;
    height: 100%;
  }
</style>

API 加载器

甚至可以把它当作无情的 API 加载工具

import { useApiLoader } from "vue-tianditu";

useApiLoader({
  v: "4.0",
  tk: "your map token",
  plugins: ["D3", "CarTrack", "HeatmapOverlay", "BufferTool", "ImageOverLayer"]
}).then(() => {
  new T.Map({...});
});

辅助函数

import { toLngLat, toBounds, toPoint, toIcon } from "vue-tianditu";

说明

函数名	返回值	描述
toLngLat(lnglat:[number,number])	T.LngLat	转换为经纬度对象。 参数说明: lnglat:经纬度数组
toBounds(bounds:[[number,number],[number,number]])	T.Bounds	转换为地理范围对象。 参数说明: bounds:地理范围数组
toPoint(point:[number,number])	T.Point	转换为像素坐标点对象。 参数说明: point:像素坐标点数组
toIcon(icon:IconOption|string)	T.Icon	转换为图标对象。 参数说明: icon:string//图片地址 或 {iconUrl:string,//图片地址 iconSize:[number,number],//图片大小 iconAnchor:[number,number]//偏移}