BaiduMaps
快速开始
一、获取密匙
二、引入脚本
<!-- 基础api -->
<script src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=你的密匙"></script>
<!-- 地图图层 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.130/dist/mapvgl.threelayers.min.js"></script>
const { BMapGL, mapvgl } = window
//BMapGL是3d地图的基础api
//mapvgl是地图的图层api
const THREE = mapvgl.THREE
//必须引入Threejs脚本才能用
三、初始化地图及配置
const map = new BMapGL.Map('map_container');
map.enableKeyboard();
map.enableScrollWheelZoom();
map.enableInertialDragging();
map.enableContinuousZoom();
//设置中心点和缩放大小
map.centerAndZoom(new BMapGL.Point(x,y), zoom);
//相机倾斜角度
map.setTilt(80);
//相机旋转角度
map.setHeading(0);
四、百度地图地图编辑器
1、创建个性化地图样式
进入地图开放平台控制台页面,在我的地图中,创建一个地图样式:
2、编辑样式
点击创建的地图样式,进入样式编辑器,根据您的需求自由编辑地图样式:
3、获取样式JSON
前序流程和样式ID调用地图样式流程一致,进入我的地图,创建一个地图样式,进入编辑器编辑完成后,直接通过编辑器中的“下载JSON”功能获取JSON代码:
4、应用样式
map.setMapStyleV2({styleJson});
五、3D图层
1、创建场景
首先创建场景,用于添加图层
var view = new mapvgl.View({
map
});
2、创建并添加Threejs图层
const threeLayer = new mapvgl.ThreeLayer();
view.addLayer(threeLayer);
3、坐标点转换
要将百度的坐标点转换为gps坐标点
const projection = mapvgl.MercatorProjection;
const point = projection.convertLL2MC(new BMapGL.Point(106.542353, 29.565448));
4、添加一个正方体Mesh
//首先新建一个长宽高为3的正方体
const geometry = new THREE.BoxGeometry(3, 3, 3);
//新建材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, flatShading: true, wireframe: false });
//创建一个Mesh对象,传入模型和材质
var cube = new THREE.Mesh(geometry, material);
//调整位置,应该使用转换后的坐标
cube.position.x = point.lng;
cube.position.y = point.lat;
//最后将配置完成的正方体加入Threejs图层
threeLayer.add(cube);
六、加载外部模型
Threejs自带GLTFLoader
const loader = new THREE.GLTFLoader();
//加载外部模型文件
loader.load('../models/Rustic Manor.glb', function (gltf) {
//调整位置角度等配置
gltf.scenes[0].position.x = point.lng;
gltf.scenes[0].position.y = point.lat;
gltf.scenes[0].position.z = 100;
gltf.scenes[0].rotation.set(Math.PI / 2, 0, 0);
//添加到Threejs图层
threeLayer.add(gltf.scenes[0])
});
七、shapeLayer基础面图层
项目中建筑物模型会用到的图层
fetch('./city.json').then(function (rs) {
return rs.json();
}).then(function (rs) {
var data = rs;
var polygons = [];
var len = data.length;
for (var i = 0; i < len; i++) {
var line = data[i];
var polygon = [];
var pt = [line[1] * 512, line[2] * 512];
for (var j = 3; j < line.length; j += 2) {
pt[0] += line[j] / 100 / 2;
pt[1] += line[j + 1] / 100 / 2;
polygon.push([pt[0], pt[1]]);
}
polygons.push({
geometry: {
type: 'Polygon',
coordinates: [polygon]
},
properties: {
height: line[0] / 2
}
});
}
var shaperLayer = new mapvgl.ShapeLayer({
color: 'rgba(194, 147, 75, 0.8)', // 柱状图颜色
enablePicked: true, // 是否可以拾取
selectedIndex: -1, // 选中项
// selectedColor: '#ee1111', // 选中项颜色
autoSelect: true, // 根据鼠标位置来自动设置选中项
onClick: (e) => { // 点击事件
console.log(e);
},
});
view.addLayer(shaperLayer);
shaperLayer.setData(polygons);
});
八、关于管道
const p1 = new THREE.Vector3(-85.35, -35.36)
const p2 = new THREE.Vector3(-50, 0, 0);
const p3 = new THREE.Vector3(0, 50, 0);
const p4 = new THREE.Vector3(50, 0, 0);
const p5 = new THREE.Vector3(85.35, -35.36);
// 创建线条一:直线
const line1 = new THREE.LineCurve3(p1, p2);
// 重建线条2:三维样条曲线
const curve = new THREE.CatmullRomCurve3([p2, p3, p4]);
// 创建线条3:直线
const line2 = new THREE.LineCurve3(p4, p5);
const CurvePath = new THREE.CurvePath();// 创建CurvePath对象
CurvePath.curves.push(line1, curve, line2);// 插入多段线条
//通过多段曲线路径创建生成管道,CCurvePath:管道路径
const geometryTube = new THREE.TubeGeometry(CurvePath, 100, 5, 25, false);
const tube = new THREE.Mesh(geometryTube, material);
tube.position.x = point.lng;
tube.position.y = point.lat;
threeLayer.add(tube);
tryTube = new THREE.TubeGeometry(CurvePath, 100, 5, 25, false);
const tube = new THREE.Mesh(geometryTube, material);
tube.position.x = point.lng;
tube.position.y = point.lat;
threeLayer.add(tube);