JSAPI THREE 安装使用

彬师傅2025-05-31 18:17

我会从vue前端框架入手，教大家从头搭建一个JSAPI three底板，流程很简单

Vue

初始化项目

这里用的是vite

js 复制代码

// 初始化vite项目(本地用的是vite@6.3.5)
// 选Vue、Javascript
npm create vite@latest

// 安装
npm run install

// 启动
npm run dev

安装JSAPI Three

www.npmjs.com/package/@ba...

js 复制代码

npm i @baidumap/mapv-three

还需要安装一个rollup-plugin-copy插件，在vite.config.js中添加plugin配置，用于将node_modules下面mapvthree包的资源拷贝到public目录下供引擎访问

js 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import copy from 'rollup-plugin-copy';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    copy({
        targets: [
            {src: 'node_modules/@baidumap/mapv-three/dist/assets', dest: 'public/mapvthree'},
        ],
        verbose: true,
        hook: 'buildStart',
    }),
    vue()
  ],
})

使用

设置Baidu地图AK，如果没有需要先申请一下申请百度地图开发者AK和基本使用_百度地图ak-CSDN博客

js 复制代码

// index.html
window.MAPV_BASE_URL = 'mapvthree/';

创建一个地图容器，用来指定mapvthree的展示区域

js 复制代码

<template>
  <div id='map'></div>
</template>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

初始化引擎，设置中心点

js 复制代码

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import * as mapvthree from '@baidumap/mapv-three';

let engine = null

onMounted(() => {
  const container = document.getElementById('map');
  mapvthree.BaiduMapConfig.ak = '123';
  engine = new mapvthree.Engine(container, {

  });

  engine.map.lookAt([113, 23], {
    pitch: 0,
    heading:0,
    range: 20000000
  })
})

onBeforeUnmount(() => {
  if (engine) {
    engine.dispose()
    engine = null
  }
})

</script>

现在就能看到效果了

可以简单修改配置就能展示球

js 复制代码

engine = new mapvthree.Engine(container, {
    map: {
        projection: 'EPSG:4978'
    }
});