标签：map endCoordinate startCoordinate mapbox THREE three 几何 var new
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
}); //材质对象
标签：map,endCoordinate,startCoordinate,mapbox,THREE,three,几何,var,new 来源： https://blog.csdn.net/qq_48203828/article/details/119899339
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。