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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
做个自己站内搜索引擎
2006/10/09 PHP
一个php作的文本留言本的例子(一)
2006/10/09 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP代码加密的方法总结
2020/03/13 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
详解Python中where()函数的用法
2018/03/27 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
简单说下OSPF的操作过程
2014/08/13 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
副厂长岗位职责
2014/02/02 职场文书
财务个人年度总结范文
2015/02/26 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android