vue-baidu-map实现区域圈线和路径的渐变色

 更新时间:2024年07月26日 09:31:30   作者:君秋漠  
这篇文章主要介绍了vue-baidu-map实现区域圈线和路径的渐变色方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue-baidu-map区域圈线和路径的渐变色

代码:

  • 圈的部分有两种写法一种是用组件直接写,一种是不用组件。
  • 这里因为我的数据是动态的,上面地图的点还有路线需要切换,但是区域的线不用切换。
  • 就采用了不是组件的写法。

圈的地区

方法一:采用画线组件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);
}

方法二:自己手动添加

// 我是把这个方法单独拿出来了,使用的时候引用就好
    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});   //创建折线
        //参数:颜色,线的宽度,线的透明度
        this.map.addOverlay(polylinea);
        polylinea.disableMassClear();//这个是防止下面我删除线的时候它不删除
    },

路径的折线

同样我也是分出来了。

但因为它的数据是根据后台获得的,会有延迟,所以在调用它的时候需要加个延迟器

    //添加路线箭头
    getPoly(){
       //创建路线
       var sy = new this.BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.6, //图标缩放大小
        strokeColor: "#24a9fa", //设置矢量图标的线填充颜色
        strokeWeight: "2", //设置线宽
      });
      var icons = new this.BMap.IconSequence(sy, "10", "30");
      this.pointList = JSON.parse(JSON.stringify(this.pointList))
     // 创建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, //是否启用线编辑,默认为false
        enableClicking: true, //是否响应点击事件,默认为true
        icons: [icons],
        strokeWeight: "3", //折线的宽度,以像素为单位
        strokeOpacity: 0.8, //折线的透明度,取值范围0 - 1
        strokeColor: "url(#MyGradient)", //折线颜色
        // strokeColor: "red", //折线颜色
      });
      this.map.addOverlay(sj); //增加折线
    },

//调用,在需要调用的地方加上它
setTimeout(()=>{
      this.getPoly()
    },300)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现全选和反选功能

    vue实现全选和反选功能

    这篇文章主要为大家详细介绍了vue实现全选和反选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue + AnimeJS实现3d轮播图的详细代码

    Vue + AnimeJS实现3d轮播图的详细代码

    轮播图在开发中是经常用到的,3D轮播图是其中最常用的一种,所以在这篇文章中将给大家介绍Vue + AnimeJS实现3d轮播图,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2024-01-01
  • vue脚手架安装出错的问题及解决过程

    vue脚手架安装出错的问题及解决过程

    文章介绍了在使用Vue脚手架安装过程中遇到错误的解决方法,包括卸载并重新安装Node.js、使用cnpm安装Vue CLI、配置全局缓存路径以及设置环境变量等步骤
    2026-03-03
  • Vue中子组件不能修改父组件传来的Prop值的原因分析

    Vue中子组件不能修改父组件传来的Prop值的原因分析

    在Vue中,父子组件之间通过Prop和Event实现了数据的双向绑定,但是,Vue设计者为什么不允许子组件修改父组件传递的Prop呢,本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
    2023-06-06
  • 关于vue2响应式缺陷的问题

    关于vue2响应式缺陷的问题

    这篇文章主要介绍了关于vue2响应式缺陷的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 带你一步步从零搭建一个Vue项目

    带你一步步从零搭建一个Vue项目

    Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

    Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

    这篇文章主要介绍了Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue-cli配置使用Vuex的全过程记录

    vue-cli配置使用Vuex的全过程记录

    这篇文章主要给大家介绍了关于vue-cli配置使用Vuex的相关资料,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,本介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • vue-router 路由传参问题(路由传参方式)

    vue-router 路由传参问题(路由传参方式)

    路由传参主要有两种方式一种是路径传参一种是参数传递,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    这篇文章主要介绍了vue父组件数据更新子组件相关内容未改变问题(用watch解决),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论