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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
JS正则表达式验证中文字符
2017/05/08 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
Python模拟百度登录实例详解
2016/01/20 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
python内置模块collections知识点总结
2019/12/19 Python
Python面向对象编程基础实例分析
2020/01/17 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
介绍信应该怎么开?
2019/04/03 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书