<template>
  <div id="chart">
  </div>
</template>
<script>
import echarts from '@/../static/js/echarts.js'
import echartsgl from '@/../static/js/echarts-gl.min.js'
import mapboxgl from '@/../static/js/mapbox-gl.js'
import roadData from '@/../static/js/road_converted.json'
export default {
  name: 'chart',
  data () {
    return {
      dataAll:{},//记录路段信息
      theColorRamp: ['#FF0000', '#FF7D00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF', '#fdae61', '#f46d43', '#d73027'],
      theCenter: [121.437467, 31.216173],// 中心点坐标
      theZoom:  14, //视角远近 数字
      theBear:  90, // 地图旋转角度，正北为0，正东为90，正西为270，以此类推
      thePitch: 30,// 地图俯瞰角度，0为顶视图，60以上效果甚微
      mapstyle:'mapbox://styles/mapbox/light-v9',
      mapAccessToken: 'pk.eyJ1IjoibG9nd2hlbiIsImEiOiJja2pyOTB1eWsxZTdwMnlvODFtazN2cmJyIn0.jw35YLEDiRIFboGkVA2MyA',
      theColor: 'rgb(200,40,0)',// 路线颜色
      theWidth: 10, // 路线粗细
      theOpac: 0.15 // 透明度 0-1
    }
  },
  methods: {
    initmap()
    {
      let myChart=echarts.init(document.getElementById('chart'))
       window.mapboxgl = mapboxgl
       mapboxgl.accessToken=this.mapAccessToken
       this.dataAll=roadData.features.map(function(theD){
          return {
            coords:theD.geometry.coordinates,
            lineStyle: {
                        color: 'red',
                        width: 10,
                        opacity: 0.15
                    }
         }
       })
       console.log(this.dataAll)
       console.log(myChart)
       let option={
          mapbox: {
           center: this.theCenter,
           zoom: this.theZoom,
           pitch: this.thePitch,
           bearing: this.theBear,
           style: this.mapstyle,
         },
         series:[
            {
                 type: 'lines3D',
                 coordinateSystem: 'mapbox',
                 blendMode: 'lighter', //让数据集中的区域因为叠加而产生高亮的效果。
                 blendMode: 'source-over',
                 polyline: true, //是否为多段线
                 data: this.dataAll
             }
            ],
       }
       myChart.setOption(option);
    }
   },
    mounted: function () {
      this.$nextTick(()=>{
         this.initmap()
      })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#chart{
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

如果使用原生JS效果如下：

但是实际效果如图：像从中劈开了一样 路段并没有叠加上去。