解决 vue-baidu-map 无法绘制折线方向箭头

4O4

发布于 2022-04-25 19:07:06

6880

发布于 2022-04-25 19:07:06

文章被收录于专栏：404

根据vue-baidu-map折线组件的官方文档，在vue中通过Prop，为BmPolyline组件传递一个icons数组，数组的元素必须为IconSequence类的实例对象。但在开发过程中发现vue-baidu-map封装的BmPolyline折线组件不能顺利绘制出带箭头的纹理。原因是BmPolyline文档中虽然有icons属性，但是对应的源文件中并没有props接收icons。

而IconSequence类的实例对象则是在BaiduMap组件的ready事件中拿到BMap类和map地图实例对象，然后依次调用BMap基类的Symbol，IconSequence子类，完成IconSequence对象的初始化。

解决方案

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

new_polyline.vue 新的折线组件文件：

<script>
/**
 * 将此处三个js也拷贝出来并引入
 */
import commonMixin from "./common.js";
import bindEvents from "./bindEvent.js";
import { createPoint } from "./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>

地图文件中使用新的polyline组件

<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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-05-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js