更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123

代码如下：

const mapCenter = [-0.5, 51.8];// please use your own token!
const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v11',center: [-10, 25],zoom: 2,maxZoom: 5
});map.on('load', () => {map.setLight({intensity: 0});const points = turf.randomPoint(50, {bbox: [-100, 0, 100, 80]});const mergedArray = [];turf.featureEach(points, function (currentFeature, featureIndex) {const arcLine = generateLine([mapCenter, currentFeature.geometry.coordinates]);mergedArray.push(arcLine);});const flat = mergedArray.flat();const arcCollection = turf.featureCollection([]);arcCollection.features = flat;addLine(arcCollection);
});function generateLine(coords) {const options = {units: 'miles'};const buffer = 10; // line widthconst line = turf.lineString(coords); // generate line with coordsconst length = turf.length(line, options); // line lengthconst arcQuality = 4; // lower = more points to generate along arc and higher arcsconst points = length / arcQuality; // number of points based on length and quality valueconst segment = length / points; // segment length based on number of pointsconst pointArray = []; // empty array to hold each pointconst curve = 4; // value that determines when curve endslet heightVal = 1; // init heightconst maxHeight = points * points; // higher arcs based on distance/number of pointsfor (let i = 0; i < points; i++) {const along = turf.along(line, segment * i, options);const maxSegment = maxHeight / points;const alongCoords = along.geometry.coordinates;const newVal = (points / 2) - i;if (i < (points / 2)) {const sq = (newVal * newVal) / (points / curve);heightVal = maxHeight - (maxSegment * sq);} else {const val = (points / 2) + (newVal - (points / 2));const sq = (val * val) / (points / curve);heightVal = maxHeight - (maxSegment * sq);}const circOptions = {steps: 10,units: 'miles',properties: {'heightVal': heightVal}};const circle = turf.circle([alongCoords[0], alongCoords[1]], buffer, circOptions);pointArray.push(circle);}return pointArray;
}function addLine(arcs) {map.addSource('arcs', {'type': 'geojson','data': arcs});map.addLayer({'id': 'arcLayer','type': 'fill-extrusion','source': 'arcs','paint': {'fill-extrusion-color': ['interpolate',['linear'],['get', 'heightVal'],0,'#f768a1',200000,'#c51b8a',400000,'#7a0177'],'fill-extrusion-opacity': 1,// 'fill-extrusion-base': 0,'fill-extrusion-base': ['case',['<', ['get', 'heightVal'], 8000],8000,['-', ['*', ['get', 'heightVal'], 1.5], 8000]],'fill-extrusion-height': ['*', ['get', 'heightVal'], 1.5]}}, 'road-label-simple');
}