useApiLoader({ v: '4.0', tk: '7b7f3db874fd4134d1e843f3ed0b7041', plugins: ['D3', 'CarTrack', 'HeatmapOverlay', 'BufferTool', 'ImageOverLayer'], }).then(() => {}），setup plugins中D3的使用

在使用 Vue 3 中的 setup 函数时，可以使用 inject 方法注入 $tiandituApiLoader 对象，然后在组件中使用 useApiLoader 插件加载天地图 JavaScript API，包括 D3 插件。

首先，在 main.js 中将 $tiandituApiLoader 对象注入到全局中：

import { createApp } from 'vue'
import App from './App.vue'
import { useApiLoader } from 'vue-tianditu'

const app = createApp(App)

app.config.globalProperties.$tiandituApiLoader = useApiLoader({
  v: '4.0',
  tk: '7b7f3db874fd4134d1e843f3ed0b7041',
  plugins: ['D3', 'CarTrack', 'HeatmapOverlay', 'BufferTool', 'ImageOverLayer']
})

app.mount('#app')

然后在组件中使用 $tiandituApiLoader 注入的对象，加载天地图 JavaScript API，并使用 D3 插件绘制散点图：

<template>
  <div>
    <tianditu-map
      v-if="isApiLoaded"
      :options="options"
    >
      <tianditu-d3-scatter
        :data="data"
        :options="scatterOptions"
      ></tianditu-d3-scatter>
    </tianditu-map>
  </div>
</template>

<script>
import { inject, reactive } from 'vue'
import * as d3 from 'd3'

export default {
  setup () {
    const tiandituApiLoader = inject('$tiandituApiLoader')

    const state = reactive({
      isApiLoaded: false,
      options: {
        center: [116.3975, 39.9087],
        zoom: 10
      },
      data: [
        { lng: 116.3975, lat: 39.9087, value: 10 },
        { lng: 116.4075, lat: 39.9087, value: 20 },
        { lng: 116.3975, lat: 39.9187, value: 30 },
        { lng: 116.4075, lat: 39.9187, value: 40 }
      ],
      scatterOptions: {
        radius: 10,
        color: 'red'
      }
    })

    tiandituApiLoader.then(() => {
      state.isApiLoaded = true
    })

    const createScatter = () => {
      return d3.scatter()
        .lng(d => d.lng)
        .lat(d => d.lat)
        .radius(state.scatterOptions.radius)
        .color(state.scatterOptions.color)
    }

    return {
      ...state,
      createScatter
    }
  }
}
</script>

在上面的代码中，我们使用 inject 方法注入了 $tiandituApiLoader 对象，并使用 reactive 方法创建了一个响应式对象 state，其中包含了所有需要在组件中使用的数据。

在 setup 函数中，使用 tiandituApiLoader.then() 方法在天地图 JavaScript API 加载完成后将 isApiLoaded 设置为 true，然后定义了一个 createScatter 方法用于创建散点图生成器。

最后，使用 return 语句将 state 和 createScatter 方法返回，这样就可以在组件中通过解构赋值获取到这些数据和方法了。