百度地图 MapVGL 以及 Threejs图层添加模型

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);

Map相关文档

四、百度地图地图编辑器

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])
});

图层api

七、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);