JSAPI THREE 安装使用

我会从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'
    }
});
相关推荐
倔强青铜三14 分钟前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘27 分钟前
Webpack 入门到实战 - 复习强化版
前端
晓131331 分钟前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三32 分钟前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z41 分钟前
uniapp使用video实现沉浸式在线课程学习平台
前端
当牛作馬1 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw02 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖2 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
绅士玖2 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端