vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色

更新時間：2024年07月26日 09:31:30 作者：君秋漠

這篇文章主要介紹了vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue-baidu-map區(qū)域圈線和路徑的漸變色

代碼：

圈的部分有兩種寫法一種是用組件直接寫，一種是不用組件。
這里因為我的數(shù)據(jù)是動態(tài)的，上面地圖的點(diǎn)還有路線需要切換，但是區(qū)域的線不用切換。
就采用了不是組件的寫法。

圈的地區(qū)

方法一：采用畫線組件bm-polyline

<bm-polyline
        :path="polylinePath"
        stroke-color="#00ccff"
        :stroke-opacity="1"
        :stroke-weight="2"
        :editing="false"
      ></bm-polyline>
 // 漸變色是在app.vue里面寫的
 svg path{
    filter: drop-shadow(2px 4px 6px #00ccff);
}

方法二：自己手動添加

// 我是把這個方法單獨(dú)拿出來了，使用的時候引用就好
    getArea(){
      var polyliness = []
      this.polylinePath.forEach((i) => {
        polyliness.push(new this.BMap.Point(i.lng, i.lat));
      });
      var polylinea = new this.BMap.Polyline(polyliness, {strokeColor: "#00ccff", strokeWeight: 1, strokeOpacity: 3});   //創(chuàng)建折線
        //參數(shù)：顏色，線的寬度，線的透明度
        this.map.addOverlay(polylinea);
        polylinea.disableMassClear();//這個是防止下面我刪除線的時候它不刪除
    },

路徑的折線

同樣我也是分出來了。

但因為它的數(shù)據(jù)是根據(jù)后臺獲得的，會有延遲，所以在調(diào)用它的時候需要加個延遲器

    //添加路線箭頭
    getPoly(){
       //創(chuàng)建路線
       var sy = new this.BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6, //圖標(biāo)縮放大小
        strokeColor: "#24a9fa", //設(shè)置矢量圖標(biāo)的線填充顏色
        strokeWeight: "2", //設(shè)置線寬
      });
      var icons = new this.BMap.IconSequence(sy, "10", "30");
      this.pointList = JSON.parse(JSON.stringify(this.pointList))
     // 創(chuàng)建polyline對象
     var pois = [];
      this.pointList.forEach((i) => {
        pois.push(new this.BMap.Point(i.lng, i.lat));
      });
      // 插入漸變
      // let mapE = document.getElementsByClassName("bm-view")[1];
      setTimeout(()=>{
        let svgE = document.getElementsByTagName("svg")[0];
        console.log("svg",svgE)
        let def = `<defs>
        <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="#2c468b" />
          <stop offset="50%" stop-color="#2f5d95" />
          <stop offset="100%" stop-color="#24a9fa" />
        </linearGradient>
      </defs>`;
      // if (svgE.length==0) {
      //     for(let i in svgE) {
      //       console.log("i",i)
            svgE.insertAdjacentHTML("afterBegin",def);
          // }
        // }
      },1000)
        
      var sj = new this.BMap.Polyline(pois, {
        enableEditing: false, //是否啟用線編輯，默認(rèn)為false
        enableClicking: true, //是否響應(yīng)點(diǎn)擊事件，默認(rèn)為true
        icons: [icons],
        strokeWeight: "3", //折線的寬度，以像素為單位
        strokeOpacity: 0.8, //折線的透明度，取值范圍0 - 1
        strokeColor: "url(#MyGradient)", //折線顏色
        // strokeColor: "red", //折線顏色
      });
      this.map.addOverlay(sj); //增加折線
    },

//調(diào)用，在需要調(diào)用的地方加上它
setTimeout(()=>{
      this.getPoly()
    },300)