three轨迹线在mapbox地图上显示

1、有意者联系qq：1125346480
在这里插入图片描述
1、首先创建mapbox底图

 <script>
        mapboxgl.accessToken =
            'pk.eyJ1IjoiaG9yc2VmYWNlZCIsImEiOiJjazFzbmVtZm8wZTN4M2JvMHM4NmhjOHF3In0.pt5o3NcTrnXjEt41vnm2oA';
        var map = (window.map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v10',
            zoom: 8,
            //center: [148.9819, -35.3981],
            center: [104.070606, 30.611274],
            pitch: 60,
            antialias: true, // create the gl context with MSAA antialiasing, so custom layers are antialiased
        }));

2、创建自定义图层（mapbox与three相交处）注意：意思就是three想在mapbox底图显示必须创建自定义图层。

 var customLayer = {
            id: '3d-model',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, gl) {
            **//这下边基本都是three的核心代码**
                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);

                let features = json.features;//数据
                for (let i = 0; i < features.length; i++) {
                    let startCoordinate = '';//开始点
                    let endCoordinate = '';//结束点
                    if (i == features.length - 1) {
                        //最后一个点跟第一个连接
                        startCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(features[i].geometry.coordinates, 0);
                        endCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(features[0].geometry.coordinates, 0);
                    } else {

three轨迹线在mapbox地图上显示

悦读