参考百度开发文档
补充下(里面有免费的可以拿来玩)3D模型下载网址
步骤
1: npm install mapv-three 安装插件
npm install mapv-three
2:在index.html加载百度地图
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的百度秘钥"></script>
注:加载model.glb文件需要是请求服务器来的,没有服务器资源的可以像我一样在本地用VS插件(Live Server)起了个小型服务器放3D模型数据 ----使用Visual Studio Code安装Live Server插件
然后右击index.html选择红框打开,就可以加载本地的3D模型数据了(这边是为了把这个小型本地服务启动起来,后面只用到了网址)
全部代码:
<template>
<div class="hello" id="map_container" style="width: 100%;height: 100%;"></div>
</template>
<script>
import { Engine, GeoJSONDataSource, EmptySky, Polygon, ExtendMeshStandardMaterial } from 'mapv-three';
import { GLTFLoader } from 'bmap-three/examples/jsm/loaders/GLTFLoader.js';
import { PlaneGeometry, Mesh, MeshStandardMaterial, MeshBasicMaterial, Color, BoxGeometry, TextureLoader, RepeatWrapping } from 'bmap-three';
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
};
},
created() { },
mounted() {
this.ikn()
},
methods: {
ikn() {
const center = [120.90197,31.97289];
const map = new BMapGL.Map('map_container', {
restrictCenter: false,
maxZoom: 25,
displayOptions: {
building: false,
},
});
map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
map.enableScrollWheelZoom(true);
map.enableKeyboard();
map.enableInertialDragging();
map.enableContinuousZoom();
map.setTilt(40);//地图倾斜角度
map.setHeading(10);//地图旋转角度
const engine = new Engine(map, {});
engine.map.setCenter(center);
engine.rendering.useMrt = true;
engine.rendering.shadow.enabled = true;
engine.rendering.animationLoopFrameTime = 40;
engine.rendering.colorAdjust.saturation = 0.25;
engine.rendering.colorAdjust.contrast = 0.15;
engine.rendering.colorAdjust.brightness = 0;
const sky = engine.add(new EmptySky());
sky.time = 3600 * 16.5;
const position = engine.map.projectPointArr(center);
let mxUrl='http://127.0.0.1:5501/'
// 模型
const models = [
{
position: [120.90097,31.97889, 6],
path: mxUrl+'/src/assets/model.glb',
rotate: true,
info: '酒瓶',
rotation:[6.2 / 4,10.3,6.3],
scale:[150,150,150]
},
{
position: [120.90097,31.96889, 6],
path: mxUrl+'/src/assets/model2.glb',
rotate: false,
info: '房间',
rotation:[6.2 / 4,10.3,6.3],
scale:[50,50,50]
},
{
position: [120.91097,31.97289, 6],
path: mxUrl+'/src/assets/model3.glb',
rotate: true,
info: '蓝鳍金枪鱼',
rotation:[10.2 / 4,5.3,5.3],
scale:[300,300,300]
}
];
let changModels = [],XYdata = []
models.forEach((item,index) => {
XYdata = this.Mercator2LonLat({x:item.position[0],y:item.position[1]})
item.position = [XYdata.x,XYdata.y,item.position[2]]
changModels.push(item)
});
// console.log("处理",changModels)
const loader = new GLTFLoader();
for (let i = 0; i < changModels.length; i++) {
loader.load(changModels[i].path, gltf => {
// console.log(gltf)
const model = gltf.scene.children[0];
model.userData.info = changModels[i].info;
for (let i = 0; i < model.children.length; i++) {
model.children[i].castShadow = true;
}
// console.log(models[i].rotation)
let rotaData = changModels[i].rotation;
let scalData = changModels[i].scale;
model.rotation.set(rotaData[0],rotaData[1],rotaData[2]);//身体旋转角度
model.scale.set(scalData[0],scalData[1],scalData[2]);//物体缩放大小
model.position.set(changModels[i].position[0], changModels[i].position[1], changModels[i].position[2]);
if (changModels[i].rotate) {
model.rotation.x = Math.PI / 2;
model.rotation.y = 1.08 * Math.PI / 2;
}
engine.add(model);
// 模型添加点击事件
engine.event.markEventProxy(model);
engine.event.bind(model, 'click', e => {
console.log(model)
alert('点击了 ' + model.userData.info);
});
});
}
},
Mercator2LonLat(lonlat) {
//墨卡托经纬度坐标转换
var mercator = {
x: 0,
y: 0
};
var x = lonlat.x * 20037508.34 / 180;
var y = Math.log(Math.tan((90 + lonlat.y) * Math.PI / 360)) / (Math.PI / 180);
y = y * 19915508.34 / 180;
mercator.x = x;
mercator.y = y;
// console.log("完成左边转换",lonlat,mercator)
return mercator;
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
目录结构如下:
文章来源:https://www.toymoban.com/news/detail-504026.html
效果图如下:
文章来源地址https://www.toymoban.com/news/detail-504026.html
到了这里,关于VUE百度地图加载3D模型(MapVThreeGallery)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!