SvgJunction

路口可视化(svg,marker)

安装

$ npm install svg-junction -S

使用

在 main.js 文件中引入插件并注册

# main.js
import SvgCrossing from 'svg-junction'
Vue.use(SvgCrossing)

在项目中用使用 SvgCrossing

<template>
  <svg-junction v-for="(cross_info,index) in junctionMarkerInfo"
                            :markerInfo="cross_info"
                            :map="map"
                            :svgOption="svgOption"
                            :markerIndex="index"
                            :len="junctionMarkerInfo.length"
                            @getMarker = getMarker />
  </template>
<script>
  export default {
    data () {
      return {
        map: null,
        crossMarkerInfo: crossInfo.crossMarkerInfo,
        svgOption: {
            laneBgColor: "#101021",   //车道背景颜色
            laneWidthRatio: 1,     //车道宽度比例
            laneLineColor: "#FFFFFF",   //车道标线颜色
            laneLineWidth: 2,   //车道标线宽度
            laneLineOffset: 0,     //车道标线位置偏移(距离路中心+)
            laneDivideColor: "#FFFF00",   //出入口分界线颜色(单双黄线)
            turnSignColor: "#FFFFFF",   //转向指示线默认颜色
            turnSignWidth: 3,   //转向指示线默认颜色
            zoomVisible: 11.5,        //路口可见的最小zoom级别
            zebraLineColor: "#FFFFFF",     //斑马线颜色
            zebraLineWidth: 5,     //斑马线线宽
            zebraLineInterval: 5,     //斑马线间隔
            zebraOffset: 0,     //斑马线位置偏移(距离路中心+)
            isZebraTiming: false, //斑马线是否跟随红绿灯动画
            timingColor: "#00a249",     //计时动画圆环颜色
            textColor: "#FFFFFF",     //计时动画圆环颜色
            redLightColor: "#FF3030",     //红灯禁止通行颜色
            greenLightColor: "#00a249",     //红灯禁止通行颜色
            scaleRatio: 1.5,     //zoom缩放比例
            isWaitingAreaShow:true,   //左转待转区是否显示
        },
      }
    }
  }
</script>

/**
 * @method getMarker 根据起始点、半径、角度计算圆弧路径
 * @param {Number} markers  所有路口marker信息
 * @param {Number} marker  当前点击事件的路口marker
 * @return void
 */
getMarker(markers,marker){  //所有路口marker
    console.log(markers);
    console.log(marker);
}

注意：标签为 <svg-junction>

svgOption配置参数说明： 以上为初始的默认值，若不设置则按默认值绘制

数据格式

markerInfo绑定数据，格式如下

{
  "id": "cross1", //唯一id
  "timing": true,
  "lngLat": [123.411541, 41.838356], //是否有红绿灯计时
  "crossInfo": [
     {
        "rotate": 195, //旋转角度：x轴正方向(正东方向)为零度 顺时针旋转增加度数
        //1:直行 2:左转 3:右转 4:直行+左转 5:直行+右转 6:调头
        "inLanes": [4, 3],
        "outLanes": [1, 1],
        "time": 15 //可通行时间(顺时针1、3同，2、4同)
     }
  ]
}