leaflet实现铁路线黑白相间效果，或其他方法如何实现？

Question

现有铁路线geojson数据，内容大概为:

rainwaysData = {"type": "FeatureCollection",
    "features": [
        {"type":"Feature","geometry":{"type":"LineString","coordinates":[[108.3,23.4],[108.5, 23.5],[108.7, 23.6],[108.7, 23.714]]},"properties":{"osm_id":"38778027","code":6101,"name":"","layer":0,"bridge":"F","tunnel":"F"}
        {"type":"Feature","geometry":{"type":"LineString","coordinates":[[109.01,22.88],[109.01,22.89]]},"properties":{"osm_id":"102596936","code":6101,"name":"","layer":0,"bridge":"F","tunnel":"F"}
        ...
]}

使用leaflet原生渲染地图：
// 初始化地图

const mapSrc = `https://{s}.天地图球面墨卡托投影矢量底图/{z}/{x}/{y}.png`; // http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=''
const mapSrc2 = `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`; //  http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=''

var map = L.map('mapBox', {
    crs: L.CRS.EPSG3857,
}).setView([23.55, 108.02], 8);

// 添加底图
L.tileLayer(mapSrc).addTo(map);
L.tileLayer(mapSrc2).addTo(map);

想要实现铁路线黑白相间效果如何实现，大概如下说是铁路线黑白相间内容：

做过的尝试：方法1：

railwayLines(){
            let data = rainwaysData,stywhile= { "color": "#000","weight": 3,"opacity":1},styblack ={"color": "#fff","weight": 3,"opacity":1,dashArray: '50, 50'}
            this.raiwayLineLayerWhile = L.geoJSON(data,{
                style:function(feature,layer){
                    console.log(feature , layer)
                }
            }).addTo(this.map)
            this.raiwayLineLayerBlack = L.geoJSON(data,{
                style:function(feature,layer){
                    console.log(feature , layer)
                }
            }).addTo(this.map)
        },

以上更换样式顺序，发现不是全黑，就是全白。
方法2，使用

this.raiwayLineLayer = L.layerGroup()
rainwaysData.features.forEach((feature, index) => {  
    const color = index % 2 === 0 ? '#000' : '#FFF'; // 黑白交替  
    linesItem = L.polyline(feature.geometry.coordinates, {  
        color: color,  
        weight: 3 // 线宽  
    }).addTo(this.map);  
});

只有：
方法3，使用Mapbox GL JS3.5.1
在环境中 npm install --save mapbox-gl@3.5.1
在vue组件中引入
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"
组件内容如下：

<template>
    <div class="wrap">
        <div id="mapBox">
            
        </div>
    </div>
</template>

<script>
    import L from "leaflet";
    import "leaflet/dist/leaflet.css";
    //
    import gxWays from '@/utils/rainwayLine.json'
    import 'mapbox-gl/dist/mapbox-gl.css';
     // import mapboxgl from 'mapbox-gl';
    
    export default{
        data(){
            return{
                map:null,
                tllay:null,
                raiwayLineLayer:null,
            }
        },
        mounted(){this.initMap()},//this.tlLines()
        methods:{
            initMap(){// L.CRS.EPSG4326
                const mapSrc = ``//矢量底图
                const mapSrc2 = ``//矢量标记
                var map = L.map('mapBox',{crs: L.CRS.EPSG3857,}).setView([23.55, 108.02],8);this.map = map;L.tileLayer(mapSrc).addTo(this.map);L.tileLayer(mapSrc2).addTo(this.map);
this.railwayLines()},
railwayLines(){
    mapboxgl.accessToken = '...';
const map = new mapboxgl.Map({
    container: 'mapBox', // container ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: [108.02, 23.55], // starting position [lng, lat]
    zoom: 6, // starting zoom
});
},
}}
</script>
<style lang="scss" scoped>
    #mapBox{
        width: 100vw;
        height: 100vh;
    }
</style>

引入import mapboxgl from 'mapbox-gl'; 就无法正常运行