1、首先引入three与mapbox库
<script src="./js/mapbox-gl.js"></script>
<link href="./js/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
2、加载mapbox地图
//创建mapbox地图
mapboxgl.accessToken ='pk.eyJ1IjoiaG9yc2VmYWNlZCIsImEiOiJjazFzbmVtZm8wZTN4M2JvMHM4NmhjOHF3In0.pt5o3NcTrnXjEt41vnm2oA';
var map = (window.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
zoom: 7,
center: [104.070606, 30.611274],
pitch: 60,
antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
}));
3、加载three几何并创建自定义图层
var start = [104.070606, 30.611274];//初始位置
var startAltitude = 0;//起始高度
var startCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(start, startAltitude);//转变坐标
console.log(startCoordinate);
var end = [104.807073, 29.35702];//结束位置
var endAltitude = 100000;//结束高度
var endCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(end, endAltitude);//转变坐标
// console.log('end is ');
// console.log(endCoordinate);
/* Since our 3D model is in real world meters, a scale transform needs to be
* applied since the CustomLayerInterface expects units in MercatorCoordinates.
*/
//var scale = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
//类型数组创建顶点数据
var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
let pointArr = [];
pointArr.push(startCoordinate.x, startCoordinate.y, startCoordinate.z);
pointArr.push(endCoordinate.x, endCoordinate.y, endCoordinate.z);
var vertices = new Float32Array(pointArr);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
// 线条渲染几何体顶点数据
var material = new THREE.LineBasicMaterial({
color: 0x0000ff, //线条颜色
linewidth: 120,
// linecap: 'round', //ignored by WebGLRenderer
// linejoin: 'round', //ignored by WebGLRenderer
}); //材质对象
var THREE = window.THREE;
var line = new THREE.Line(geometry, material); //线条模型对象
var customLayer = {
id: '3d-model',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, gl) {
this.camera = new THREE.Camera();
this.scene = new THREE.Scene();
// create two three.js lights to illuminate the model 两个灯光
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, -70, 100).normalize();
this.scene.add(directionalLight);
var directionalLight2 = new THREE.DirectionalLight(0xffffff);
directionalLight2.position.set(0, 70, 100).normalize();
this.scene.add(directionalLight2);
this.scene.add(line);
this.map = map;
// use the Mapbox GL JS map canvas for three.js
this.renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true,
});
this.renderer.autoClear = false;
},
render: function (gl, matrix) {
var m = new THREE.Matrix4().fromArray(matrix);
this.camera.projectionMatrix = m;
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();
},
};
map.on('style.load', function () {
map.addLayer(customLayer, 'waterway-label');
});
注意：
three与mapbox相结合必须创建mapbox自定义图层
核心代码： three画线并转经纬度
// 参数，以确保模型在地图上的地理引用正确
var start = [104.070606, 30.611274];//初始位置
var startAltitude = 0;//起始高度
var startCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(start, startAltitude);//转变坐标
console.log(startCoordinate);
var end = [104.807073, 29.35702];//结束位置
var endAltitude = 100000;//结束高度
var endCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(end, endAltitude);//转变坐标
// console.log('end is ');
// console.log(endCoordinate);
/* Since our 3D model is in real world meters, a scale transform needs to be
* applied since the CustomLayerInterface expects units in MercatorCoordinates.
*/
//var scale = modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
//类型数组创建顶点数据
var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
let pointArr = [];
pointArr.push(startCoordinate.x, startCoordinate.y, startCoordinate.z);
pointArr.push(endCoordinate.x, endCoordinate.y, endCoordinate.z);
var vertices = new Float32Array(pointArr);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
// 线条渲染几何体顶点数据
var material = new THREE.LineBasicMaterial({
color: 0x0000ff, //线条颜色
linewidth: 120,
// linecap: 'round', //ignored by WebGLRenderer
// linejoin: 'round', //ignored by WebGLRenderer
}); //材质对象