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'
    }
});
相关推荐
烛阴7 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead35 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python