简帛阁
搜索
建议将配置文件弄好后，直接看threejs文档，需要中文字体包，window用户直接找c盘，mac用户跟window用户要一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>MapVGL</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=<输入你自己的ak去>"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<!-- <script src="./glft.js"></script> -->
<script src="./common.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.129/dist/mapvgl.min.js"></script>
<script type="text/javascript" src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.129/dist/mapvgl.threelayers.min.js"></script></head>
<body>
<div></div>
<script>
/* global BMapGL */
/* global mapv */
/* global mapvgl */
/* global initMap */
var map = initMap({
tilt: 80,
heading: -45.3,
center: [120.366874,36.068077],
zoom: 17
});
var view = new mapvgl.View({
map: map
});
view.startAnimation();
fetch('./bd09data.json').then(function (rs) {
return rs.json();
}).then(function (rs) {
console.log(rs)
var polygons = rs;
var shaperLayer = new mapvgl.ShapeLayer({
texture: './wall2.png',
isTextureFull: true,
textureScale: 0.05,
topColor: 'rgba(39, 50, 85, 0.5)',
opacity: 1.0,
zIndex: 999
});
// var shaperLayer = new mapvgl.ShapeLayer({
// color: 'rgba(45, 75, 102, 1)',
// style: 'windowAnimation',
// opacity: 1
// });
// shaperLayer.setZIndex(99)
view.addLayer(shaperLayer);
shaperLayer.setData(polygons);
});
var threeLayer = new mapvgl.ThreeLayer();
view.addLayer(threeLayer);
var projection = mapvgl.MercatorProjection;
var point = projection.convertLL2MC(new BMapGL.Point(120.366874,36.068077));
var point1 = projection.convertLL2MC(new BMapGL.Point(120.366074,36.068077));
map.enableKeyboard();
map.enableScrollWheelZoom();
map.enableInertialDragging();
map.enableContinuousZoom();
var geometry = new THREE.ConeGeometry(40 , 100, 8, 1, false)
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, flatShading: false, wireframe:false})
var cube = new THREE.Mesh(geometry, material);
cube.rotateX(Math.PI /2 *3)
cube.position.x = point.lng;
cube.position.y = point.lat;
cube.position.z = 150;
threeLayer.add(cube);
var loader = new THREE.FontLoader();
loader.load( 'font/STXihei_Regular.json', function ( font ) {
var textgeometry = new THREE.TextBufferGeometry( '你好我是文字', {
font: font,
size: 40,
height: 5,
curveSegments: 12,
bevelEnabled: false,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
});
var material1 = new THREE.MeshBasicMaterial( { color: 0xffff00, flatShading: false, wireframe:false})
var cube1 = new THREE.Mesh(textgeometry, material1);
cube1.rotateX(Math.PI /2 )
cube1.position.x = point1.lng;
cube1.position.y = point1.lat;
cube1.position.z = 240;
threeLayer.add(cube1);
console.log(cube1)
} );
fetch('./linstr.json').then(function (rs) {
return rs.json();
}).then(function (csvstr) {
console.log('csvstr', csvstr)
// var dataSet = mapv.csv.getDataSet(csvstr);
// var data = dataSet.get();
var linelayer = new mapvgl.LineTripLayer({
color: 'rgba(130, 113, 67, 0.1)',
step: 0.3,
trailLength: 2000,
startTime: 0,
data: csvstr
});
view.addLayer(linelayer);
});
// linstr
// const buildloader = new THREE.GLTFLoader();
// var buildlayer = buildloader.load( './AM203_31.gltf', function ( gltf ) {
// var cube2 = new THREE.Mesh(gltf, material1);
// // cube1.rotateX(Math.PI /2 )
// cube2.position.x = point1.lng;
// cube2.position.y = point1.lat;
// cube2.position.z = 0;
// threeLayer.add(cube2);
// // scene.add( gltf.scene );
// }, undefined, function ( error ) {
// console.error( error );
// } );
</script>
</body>
</html>
</body>
</html>