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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 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中使用模板的方法
2008/05/24 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php简单防盗链实现方法
2015/07/29 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
JavaScript 继承的实现
2009/07/09 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
原生JS轮播图插件
2017/02/09 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python 流程控制实例代码
2009/09/25 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
军训学生自我鉴定
2014/02/12 职场文书
市场营销方案范文
2014/03/11 职场文书
共产党员公开承诺书
2014/03/25 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
公民授权委托书范本
2014/09/17 职场文书
党性分析自查总结
2014/10/14 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
SQL基础的查询语句
2021/11/11 MySQL