0.1.3 • Published 4 years ago
svg-junction v0.1.3
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同)
}
]
}