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 26 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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关联数组快速排序的方法
2015/04/17 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php cli配置文件问题分析
2015/10/15 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
python tkinter基本属性详解
2019/09/16 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
python中count函数知识点浅析
2020/12/17 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
环保专业大学生职业规划设计
2014/01/10 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
八一建军节演讲稿
2014/09/10 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
大学生求职自荐信
2015/03/24 职场文书