【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

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

javascript调用百度地图api
百度地图提供sdk,javascript api等多种客户端调用方式,通常在网页上用的比较多,也就是javascript api,这里根据自己的使用,简单介绍一下如何快速使用javascript调用百 ...
C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
java百度地图插件下载地址_调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...
qml调用百度地图api实现卫星地球模式画路书轨迹
qml调用百度地图api实现卫星地球模式画路书轨迹总结下类型转换: pro文件中加入依赖的模块引入头文件 websockettransport.h main文件加入 qml index.html ...
html插入地图的方法,JavaScript接入百度地图API的方法步骤
一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用创建好应用以后就能在控制台我的应用中看到这个应 ...
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
ios 高德地图加载瓦片地图_IOS 高德地图 API 加载 WMS 服务
IOS 高德地图 API 加载 WMS 服务本文主要介绍通过自定义高德地图 MATileOverlay 接口,添加 WMS 服务到地图上.废话少说,先贴代码. 代码自定义类 WMSTileOver ...
【JavaScript】百度地图API快速上手
获取秘钥账号和获取秘钥很欣赏百度这个免费的feel,而且大家如果只是个人在本地的浏览器端运行网页,做简单的测试,基本是不受限的. 点击"申请秘钥"去申请秘钥: 设置应用接下来 ...
swift 百度地图加载与百度地图电子围栏加载
最近在写百度地图电子围栏加载,研究源码,也花了一些时间. 1.百度电子围栏整体思路 1)用户创造实体,赋予监控权限 2)对该实体创造电子围栏,有服务端和本地端两种方式,先创造实体,上传到的服务器中.在 ...

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

初始化MapVGL容器

添加ThreeLayer图层

加载模型

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

使用方法

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

实例

移除模型

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

最新文章

热门文章