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