老规矩先装

cnpm i mapv-three -S
cnpm i bmap-three -S

然后

<script setup lang="ts">
import { ref, onMounted } from "vue";

import { GLTFLoader } from "bmap-three/examples/jsm/loaders/GLTFLoader";
import { EffectModelPoint, ClusterPoint, FanPoint, GeoJSONDataSource } from "mapv-three";
const gltfLoader = new GLTFLoader();
import {
  Engine,
  FlyManager,
  UltraDynamicSky,
  EmptySky,
  Default3DTiles,
  DynamicSky,
} from "mapv-three";

const dom = ref();
const center = [113.014666, 28.118481];
onMounted(() => {
  const map = new BMapGL.Map(dom.value);
  map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
  map.enableScrollWheelZoom();
  map.setTilt(40); //地图倾斜角度
  map.setHeading(10); //地图旋转角度
  const engine = new Engine(map, {
    rendering: {
      enableAnimationLoop: true,
    },
  });
  engine.map.setCenter(center);
  engine.map.setZoom(18);
  engine.map.setPitch(70);
  engine.rendering.useMrt = true;
  engine.rendering.shadow.enabled = true;
  // 添加天空(提供光照)
  const sky = engine.add(new EmptySky());
  sky.time = 3600 * 16.5;

  const glbObj = [
    {
      url: "http://bj.bcebos.com/v1/mapopen/api-demos/model/building4.glb",

      data: [
        {
          position: [113.014101, 28.118636, 0],
          scale: [8, 8, 3],
        },
        {
          position: [113.013054, 28.116573, 0],
          scale: [1, 1, 1],
        },
      ],
    },
    {
      url: "http://bj.bcebos.com/v1/mapopen/api-demos/model/building5.glb",
      data: [
        {
          position: [113.011697, 28.116784, 0],
          scale: [1, 1, 1],
        },
      ],
    },
  ];
  const updateGltf = (datas, engine) => {
    const { url, data } = datas;
    gltfLoader.load(url, async function (gltf) {
      console.log(gltf);

      const model = gltf.scene.children[0];

      data.forEach((item) => {
        const { position, scale } = item;

        const ps = [...position];
        const pos = engine.map.projectPointArr(ps);
        const instance = model.clone();
        instance.rotation.x = Math.PI * 0.5;
        instance.rotation.y = Math.PI * -0.58;
        instance.position.set(...pos);

        instance.scale.set(...scale);

        engine.add(instance);
      });
    });
  };

  glbObj.forEach((item) => {
    updateGltf(item, engine);
  });
});
</script>

<template>
  <div ref="dom" id="container"></div>
</template>

<style lang="scss">
#container {
  width: 100%;
  height: 700px;
}
</style>

子集去摸索吧！这dom是跑得起来得，不像百度，那文档里面内容都是跑不起来得，一个json，都特么要藏起来，写个得儿得文档