Nimble Pixie Merchant

    vue-tianditu
    TypeScript icon, indicating that this package has built-in type declarations

    2.7.6 • Public • Published

    vue-tianditu

    安装

    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]//偏移}

    Install

    npm i vue-tianditu

    DownloadsWeekly Downloads

    58

    Version

    2.7.6

    License

    MIT

    Unpacked Size

    354 kB

    Total Files

    202

    Last publish

    Collaborators

    • soullyoko