vue使用地图道路渐变色绘制解决方案

一：需求点：对数动力道路，车辆，人流道路，载能分析道路等等

道路渐变色属性支持：mapBox(支持)，mineMap(3.0支持，目前我们内部使用)；官网提供的为mineMap2.0(不支持)，传统瓦片地图（不支持）
解决对象：
1.使用传统道路绘制方式，绘制道路的地图。
2.mineMap2.0使用者。
3.传统瓦片地图使用方案者。

核心：道路数据特点，geo数据中核心点的coordinates:[]是一个Array这是我们可以最大化利用的一点；

方案：已知的所有道路coordinates是一个连续的数量级庞大的经纬度集合，那么我们可以将它切分成n个小片段，每一个片段当成一个line绘制，最后将所有的lines绘制到一个layer上就是一个多色的线路了。

优缺点分析：
1:优点：在没有line-gradient属性的支持下实现了渐变色道路需求，不需要更换基础地图服务。（ps：实现了产品的异想天开）
2：缺点：需要切分时有色值范围界定，切分力度要均匀。切分需要后端支持。绘制是涉及到遍历问题。

下面就是一段样例数据：

{
   
      "color":"#2B8BF6",
      "kind": 1,
      "point":[

        [
          103.91941094747173,
          36.05338385953002
        ],
        [
          103.9194868531241,
          36.05331180635726
        ],
        [
          103.91956275845868,
          36.0532397529264
        ],
        [
          103.91963866347551,
          36.05316769923753
        ],
        [
          103.91971456817467,
          36.05309564529067
        ],
        [
          103.91979047255619,
          36.053023591085875
        ]
      ]
    }

实际代码代码操作：

 getHandleInfo(params,map,type,back){
   
      this.delSinglePopup(map);
      if(params.roadPoints!==""||params.roadName!==""&&params.roadName!==undefined){
   
        this.changePanel("show")
      }
      if(params.roadPoints===""&&params.roadName===undefined){
   
        // this.handleOnMapInfo(true);
      }
      let that=this;
      let layer=null;
      let sourceId=null;
      let stops=null;
      that.currentHistoryStops={
   };
      //只有再道路选择下才绘制道路
      if(type==="1") {
   
        //所有刻度lable数组
        let timeScale=[];
        GetAnyRoads(params).then((res)=>{
   
          if(res.code===200){
   
            if(res.data!=={
   }){
   
              let list=res.data;
              blur.$emit("setLegend",true)
              if