百度地图叠加three.js
效果：
程序代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>BMapGL</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" >
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="./static/three.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.131/dist/mapvgl.threelayers.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
/* global BMapGL */
/* global mapvgl */
var map = new window.BMapGL.Map('map_container');
map.setTilt(47);
var projection = mapvgl.MercatorProjection;
var point = projection.convertLL2MC(new BMapGL.Point(108.378238,22.799184));
var point2 = projection.convertLL2MC(new BMapGL.Point(108.414745,22.80718));
map.centerAndZoom(new BMapGL.Point(108.368752,22.813443), 13);
map.enableKeyboard();
map.enableScrollWheelZoom();
map.enableInertialDragging();
map.enableContinuousZoom();
var view = new mapvgl.View({
map: map
});
view.startAnimation();
var threeLayer = new mapvgl.ThreeLayer();
view.addLayer(threeLayer);
var geometry = new THREE.BoxGeometry(1500, 1500, 1000);
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, flatShading: true, wireframe: false } );
var cube = new THREE.Mesh(geometry, material);
cube.position.x = point.lng;
cube.position.y = point.lat;
cube.position.z = 50;
threeLayer.add(cube);
var geometry = new THREE.SphereGeometry( 15, 32, 16 );
var material = new THREE.MeshBasicMaterial({color: 0x836FFF});
var cube = new THREE.Mesh(geometry, material);
cube.position.z = 10;
threeLayer.add(cube, point2);
var lineLayer = new mapvgl.LineLayer({
width: 10,
color: 'rgba(55, 71, 226, 0.9)',
style: 'road',
enablePicked: true,
onClick: e => {
console.log(e);
}
});
let data=[{geometry:{type:"LineString", coordinates: [[108.347192,22.79452],[108.386862,22.823703],[108.440904,22.818906]]}}];
console.log(data);
view.addLayer(lineLayer);
lineLayer.setData(data);
var textLayer = new mapvgl.TextLayer({
// fontFamily: 'Songti SC',
fontSize: 32,
enablePicked: true,
autoSelect: true,
selectedColor: '#f00', // 选中项颜色
color: '#0f0'
});
data=[{geometry:{type:"Point",coordinates: [108.347192,22.79452]},properties:{text:'1m'}},{geometry:{type:"Point",coordinates: [108.386862,22.823703]},properties:{text:'2.1m'}}];
view.addLayer(textLayer);
textLayer.setData(data);
</script>
</body>
</html>参考文献：
https://mapv.baidu.com/gl/docs/ThreeLayer.html本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-09-09，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 传输过程数值模拟学习笔记 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
腾讯云开发者
