vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解


Posted in Javascript onApril 28, 2020

在开发过程中发现 vue-baidu-map 封装的 BmPolyline 折线组件不能顺利绘制出带箭头的纹理。

原因是 BmPolyline 文档中虽然有 icons 属性,但是对应的源文件中并没有props接收 icons

最初的开发思路:

根据 vue-baidu-map 折线组件的官方文档,在vue中通过Prop,为 BmPolyline 组件传递一个 icons 数组,数组的元素必须为 IconSequence 类的实例对象。

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

IconSequence 类的实例对象则是在 BaiduMap 组件的 ready 事件中拿到 BMap 类和 map 地图实例对象,然后依次调用 BMap 基类的 SymbolIconSequence 子类,完成 IconSequence 对象的初始化。具体参数含义及代码实现见上文发的官方案例地址。

按照上述思路完成代码编写后并不能得到预期中的结果。因为 BmPolyline 对应的源文件中并没有props接收 icons

解决方案

/node_modules/vue-baidu-map/components/overlays 目录下的 BmPolyline 源文件复制,粘贴到另一个vue文件中,然后手动为折线组件配置 icons

详细解决方案见下方代码:

new_polyline.vue新的折线组件文件

<script>
/**
 * 注意此处三个引入路径
 * 在源文件中使用的是相对路径
 * 但是因为现在是自定义组件,所以要重新调整路径
 */
import commonMixin from "vue-baidu-map/components/base/mixins/common.js";
import bindEvents from "vue-baidu-map/components/base/bindEvent.js";
import { createPoint } from "vue-baidu-map/components/base/factory.js";

export default {
 // 起一个新名字
 name: "new-polyline",
 render() {},
 mixins: [commonMixin("overlay")],
 props: {
  path: {
   type: Array
  },
  // 新声明一个icons
  icons: {
   type: Array
  },
  strokeColor: {
   type: String
  },
  strokeWeight: {
   type: Number
  },
  strokeOpacity: {
   type: Number
  },
  strokeStyle: {
   type: String
  },
  massClear: {
   type: Boolean,
   default: true
  },
  clicking: {
   type: Boolean,
   default: true
  },
  editing: {
   type: Boolean,
   default: false
  }
 },
 watch: {
  path: {
   handler(val, oldVal) {
    this.reload();
   },
   deep: true
  },
  strokeColor(val) {
   this.originInstance.setStrokeColor(val);
  },
  strokeOpacity(val) {
   this.originInstance.setStrokeOpacity(val);
  },
  strokeWeight(val) {
   this.originInstance.setStrokeWeight(val);
  },
  strokeStyle(val) {
   this.originInstance.setStrokeStyle(val);
  },
  editing(val) {
   val
    ? this.originInstance.enableEditing()
    : this.originInstance.disableEditing();
  },
  massClear(val) {
   val
    ? this.originInstance.enableMassClear()
    : this.originInstance.disableMassClear();
  },
  clicking(val) {
   this.reload();
  }
 },
 methods: {
  load() {
   const {
    BMap,
    map,
    path,
    // 参数解构 加入icons
    icons,
    strokeColor,
    strokeWeight,
    strokeOpacity,
    strokeStyle,
    editing,
    massClear,
    clicking
   } = this;
   const overlay = new BMap.Polyline(
    path.map(item =>
     createPoint(BMap, {
      lng: parseFloat(item.lng),
      lat: parseFloat(item.lat)
     })
    ),
    {
     strokeColor,
     strokeWeight,
     strokeOpacity,
     strokeStyle,
     // 配置icons
     icons,
     enableEditing: editing,
     enableMassClear: massClear,
     enableClicking: clicking
    }
   );
   this.originInstance = overlay;
   map.addOverlay(overlay);
   bindEvents.call(this, overlay);
  }
 }
};
</script>

地图文件

<template>
 <div class="container">
  <baidu-map class="map" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="ready">
   <new-polyline
    v-if="points && points.length >= 2 && checkPoints({ points })"
    :path="points"
    :icons="icons"
    stroke-color="#0091ea"
    :stroke-opacity="0.8"
    :stroke-weight="10"
   ></new-polyline>
  </baidu-map>
 </div>
</template>
<script>
import newPolyline from "./new_polyline";
export default {
 components: {
  newPolyline
 },
 data() {
  return {
   center: {
    lng: 116.404,
    lat: 39.915
   },
   zoom: 5,
   points: [],
   icons: []
  };
 },
 methods: {
  ready({ BMap, map }) {
   this.points = this.getPointsSomehow();
   var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
    scale: 0.5, // 图标缩放大小
    strokeColor: "#fff", // 设置矢量图标的线填充颜色
    strokeWeight: "3" // 设置线宽
   });
   var icons = new BMap.IconSequence(sy, "5%", "15%");
   this.icons.push(icons)
  },
  getPointsSomehow() {
   // 116.324356,39.980648
   // 118.532031,32.010158
   // 121.475599,31.380939
   var arr = [
    { lng: 116.324356, lat: 39.980648 },
    { lng: 118.532031, lat: 32.010158 },
    { lng: 121.475599, lat: 31.380939 }
   ];
   return arr;
  },
  // 查重 如果数组中只有一组有意义的坐标,绘制折线时可能会报错,因为绘制一条折线需要两组不同的坐标点
  checkPoints({ points }) {
   // 拿到第一组点
   var originPoint = points[0];
   // 将第一组点与后续点进行对比 如果坐标集合中只有一组实际坐标点则return false
   // 只要坐标集合中有两组不同的实际坐标点,则return true
   for (var i = 1; i < points.length; i++) {
    if (
     points[i].lat !== originPoint.lat ||
     points[i].lng !== originPoint.lng
    ) {
     return true;
    }
   }
   return false;
  }
 }
};
</script>

<style>
.map {
 width: 100%;
 height: 300px;
}
</style>

到此这篇关于vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解的文章就介绍到这了,更多相关vue 百度地图方向箭头折线内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 #Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
react组件基本用法示例小结
Apr 27 #Javascript
react基本安装与测试示例
Apr 27 #Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 #Javascript
JS浏览器BOM常见操作实例详解
Apr 27 #Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 #Javascript
You might like
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python reverse反转部分数组的实例
2018/12/13 Python
python dict 相同key 合并value的实例
2019/01/21 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python openpyxl使用方法详解
2019/07/18 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
高中生学习生活的自我评价
2013/11/27 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python套接字socket通信
2022/04/01 Python
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏