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

在使用 useApiLoader 插件加载天地图 JavaScript API 时，可以指定需要加载的插件。其中，D3 插件可以用于在天地图上绘制数据可视化图表，例如散点图、线图、面图等。

在加载 D3 插件之前，需要先安装 d3 库：

npm install d3 --save

然后在组件中使用 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 * as d3 from 'd3'

export default {
  data () {
    return {
      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'
      }
    }
  },
  mounted () {
    this.$tiandituApiLoader({
      v: '4.0',
      tk: '7b7f3db874fd4134d1e843f3ed0b7041',
      plugins: ['D3']
    }).then(() => {
      this.isApiLoaded = true
    })
  },
  methods: {
    createScatter () {
      return d3.scatter()
        .lng(d => d.lng)
        .lat(d => d.lat)
        .radius(this.scatterOptions.radius)
        .color(this.scatterOptions.color)
    }
  }
}
</script>

在上面的代码中，我们在组件的 data 中定义了一些数据，然后在 mounted 钩子中使用 $tiandituApiLoader 方法加载天地图 JavaScript API，并设置 plugins 为 ['D3']，这样就可以加载 D3 插件了。

在 TiandituD3Scatter 组件中，我们使用了 createScatter 方法创建一个散点图生成器，然后将 data 和 scatterOptions 作为参数传入，生成散点图，并在天地图上显示出来。

需要注意的是，D3 插件只能在天地图 Web API 4.0 及以上版本中使用。