【JavaScript】--调用百度地图API，加载和移除三维模型

基于百度地图API实现加载和移除多个三维模型

初始化MapVGL容器

初始化MapVGL容器对象，用来管理各可视化图层对象。

var view = new mapvgl.View({
    map: map
});

使用方法

添加ThreeLayer图层

需要额外引入mapvgl.threelayers包

<script type="text/javascript" src="https://code.bdstatic.com/npm//mapvgl@1.0.0-beta.151/dist/mapvgl.threelayers.min.js"></script

在MapVGL容器中添加ThreeLayer图层

    var threeLayer = new mapvgl.ThreeLayer({ notUpdateSize: false });
    view.addLayer(threeLayer);

加载模型

1.使用GLTF加载器（GLTFLoader）载入glTF 2.0资源

使用方法

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

• url — 包含有.gltf/.glb文件路径/URL的字符串。
• onLoad — 加载成功完成后将会被调用的函数。该函数接收parse所返回的已加载的JSON响应。
• onProgress — （可选）加载正在进行过程中会被调用的函数。其参数将会是XMLHttpRequest实例，包含有总字节数.total与已加载的字节数.loaded。
• onError — （可选）若在加载过程发生错误，将被调用的函数。该函数接收error来作为参数。
  开始从url加载，并使用解析过的响应内容调用回调函数。

2.使用THREE.Group来操作一组对象

当对Group进行旋转，缩放，移动等操作时，里面的子对象都会受到影响。

实例

var geoGroup2;
geoGroup2 = new THREE.Group();
var point = new BMapGL.Point(120.317411, 30.239040);
for (let i = 0; i < x; i++) {
    var carGltf;
    var gltfLoader = new mapvgl.THREELoader.GLTFLoader();
    gltfLoader.load('airplane.glb', function (obj) {
        carGltf = obj.scene;
        carGltf.rotateX(90 / 180 * Math.PI);
        carGltf.scale.x = 1;
        carGltf.scale.y = 1;
        carGltf.scale.z = 1;
        carGltf.position.x = point.lng + i;
        carGltf.position.y = point.lat + i;
        carGltf.position.z = 0;
        geoGroup2.add(carGltf);
    });
}
threeLayer.add(geoGroup2);

向geoGroup2中添加多个模型，最后将geoGroup2添加到threeLayer图层中。

移除模型

从图层中移除组

threeLayer.remove(group);

此时只是移除这个group变量，但group中的模型还没有移除，需要循环删除其中的模型。

while (group.children.length > 0) {
   group.remove(group.children[0]);
}

https://lbsyun.baidu.com/jsdemo.htm#three-object