其他分享
首页 > 其他分享> > three几何线在mapbox地图显示

three几何线在mapbox地图显示

作者:互联网

在这里插入图片描述

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