0.1.1 • Published 4 years ago
svg-crossing v0.1.1
SvgCrossing
可插入自定义标签的 svg-crossing
安装
$ npm install svg-crossing -S
使用
在 main.js
文件中引入插件并注册
# main.js
import SvgCrossing from 'svg-crossing'
import 'svg-crossing/lib/svg-crossing.css'
Vue.use(SvgCrossing)
在项目中用使用 SvgCrossing
<template>
<svg-crossing v-for="(cross_info,index) in crossMarkerInfo" :markerInfo="cross_info" :map="map"
:svgOption="svgOption" :key="index"/>
</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: 10, //路口可见的最小zoom级别
zebraLineColor: "#405569", //斑马线颜色
zebraLineWidth: 5, //斑马线线宽
zebraLineInterval: 5, //斑马线间隔
zebraOffset: 0, //斑马线位置偏移(距离路中心+)
isZebraTiming: false, //斑马线是否跟随红绿灯动画
timingColor: "#00a249", //计时动画圆环颜色
textColor: "#9cff9c", //计时动画圆环颜色
redLightColor: "#FF3030", //红灯禁止通行颜色
greenLightColor: "#00a249", //红灯禁止通行颜色
scaleRatio: 0.1, //zoom缩放比例
},
}
}
}
</script>
注意:标签为 <svg-crossing>
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
markerInfo | 路口信息 | Object | |
map | Minemap地图队形 | Object | |
svgOption | 路口可视化可配置参数项 | Object |