antv g6 图形库 出租车模拟

原创
2018/06/30 18:16
阅读数 649

 

原文链接: antv g6 图形库 出租车模拟

上一篇: echartjs 绘制 圆环 排版

下一篇: mysql 安装 配置

https://antv.alipay.com/zh-cn/g6/1.x/index.html

效果

 

注意,删除节点时,会将连接的边一起删除。。。。。

修改边的话,先修改边在删除节点

g6 不支持(或没找到)可以使用svg或图片改变节点样式的方法。。。。

出租车

    绿色表示等待

    黄色表示去接人

    蓝色表示将人送网目的地

    橙色表示当前地点

    黑色表示目的地点

 

 

 

people

class People {
  // 当前位置和目标位置,0,自由,1,等待车到来
  constructor(id, x, y, dx, dy,state=0) {
    this.id = id

    this.x = x
    this.y = y
    this.dx = dx
    this.dy = dy
    this.state=state
  }

  move(s = 1) {
    if ((this.dx - this.x) != 0)
      this.x += (this.dx - this.x) > 0 ? 1 : -1
    if ((this.dy - this.y) != 0)
      this.y += (this.dy - this.y) > 0 ? 1 : -1
  }
}

export default People

 car

class Car {
  // 位置和状态 0 空车,1接单,2载人
  constructor(id, x, y, dx = 0, dy = 0, state = 0) {
    this.id = id
    this.x = x
    this.y = y
    this.dx = dx
    this.dy = dy
    this.state = state
  }

  move() {
    if((this.dx - this.x)!=0)
      this.x +=  (this.dx - this.x) > 0 ? 1 : -1
    if((this.dy - this.y) != 0)
      this.y += (this.dy - this.y) > 0 ? 1 : -1
  }


}

export default Car

 

game

<template>
  <div class="game">
    <div class="vis" id="vis"></div>
    <div class="control">
      <button @click="add_car">add car</button>
      <button @click="add_people">add people</button>
    </div>
  </div>
</template>

<script>
  import G6 from '@antv/g6';
  import Car from "../model/Car";
  import People from "../model/People";

  let width = 800;
  let height = 800;
  let colors = ['green', 'yellow', 'skyblue', 'orange', 'black']

  function dis(a, b) {
    return ((a.x - b.x) ** 2 + (a.y - b.y) ** 2) ** 0.5
  }

  export default {
    name: "Game2",
    data() {
      return {
        cars: [],
        peoples: [],
        graph: {},
      }
    },
    methods: {
      add_car() {
        let c = new Car(
          this.cars.length,
          parseInt(Math.random() * width),
          parseInt(Math.random() * height)
        )
        this.cars.push(c)
        this.graph.add('node', {
          id: 'c' + c.id,
          label: 'c' + c.id,
          x: c.x,
          y: c.y,
          color: colors[c.state],
        })
        this.fit()

        let minp = null
        let mindis = 99999999999
        for (let p of this.peoples) {
          if (p.state != 0)
            continue
          let d = dis(p, c)
          if (d < mindis && !p.car) {
            minp = p
            mindis = d
          }
        }

        if (!minp)
          return
        minp.car = c
        minp.state = 1
        c.people = minp
        c.state = 1
        c.dx = minp.x
        c.dy = minp.y

        this.graph.update('c' + c.id, {
          color: colors[c.state]
        })
      },

      add_people() {
        let p = new People(
          this.peoples.length,
          parseInt(Math.random() * width),
          parseInt(Math.random() * height),
          parseInt(Math.random() * width),
          parseInt(Math.random() * height),
        )
        this.peoples.push(p)
        this.graph.add('node', {
          id: 'p' + p.id,
          label: 'p' + p.id,
          x: p.x,
          y: p.y,
          color: colors['3'],
        })
        this.graph.add('node', {
          id: 'd' + p.id,
          label: 'd' + p.id,
          x: p.dx,
          y: p.dy,
          color: colors['4'],
        })

        this.graph.add('edge', {
          id: 'e' + p.id,
          target: 'd' + p.id,
          source: 'p' + p.id,
          style: {
            endArrow: true
          },
        })
        this.fit()

        if (this.cars.length < 1)
          return
        let minc = null
        let mindis = 999999999
        for (let c of this.cars) {
          let d = dis(c, p)
          if (d < mindis && c.state == 0) {
            minc = c
            mindis = d
          }
        }
        if (!minc)
          return
        minc.state = 1
        minc.dx = p.x
        minc.dy = p.y
        p.car = minc
        p.state = 1
        minc.people = p
        console.log(minc)
        this.graph.update('c' + minc.id, {
          color: colors[minc.state]
        })
      },

      fit() {
        this.graph.setFitView('autoZoom')
      },

      draw() {
        for (let c of this.cars) {
          if (c.x == c.dx && c.y == c.dy && c.state == 1) {
            // 到达乘客位置
            // 先增加后移除!!!!!!!!!!!!!
            let e = {
              source: 'c' + c.id,
            }
            this.graph.update('e' + c.people.id, e)
            this.graph.remove('p' + c.people.id)
            c.state = 2
            this.graph.update('c' + c.id, {
              color: colors[c.state]
            })

            c.dx = c.people.dx
            c.dy = c.people.dy

          } else if (c.x == c.dx && c.y == c.dy && c.state == 2) {
            // 到达乘客目的地

            // 删除目的地和边
            this.graph.remove('d' + c.people.id)

            c.state = 0
            this.graph.update('c' + c.id, {
              color: colors[c.state]
            })
          } else {
            if (c.state == 0)
              continue
            c.move()
            this.graph.update('c' + c.id, {
              x: c.x,
              y: c.y
            })
          }
        }
      }
    },

    mounted() {
      this.graph = new G6.Graph({
        container: 'vis',
        fitView: 'autoZoom',
        animate: false,
      });
      setInterval(() => this.draw(), 30)
    }
  }
</script>

<style scoped>
  .game {
    width: 100%;
    height: 100%;
    /*background: aqua;*/
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .vis {
    width: 80%;
    height: 80%;
    /*flex-grow: 1;*/
    /*width: 6;*/
    /*height: 600px;*/
    border: 1px solid black;
  }

  .control {
    display: flex;
    justify-content: space-around;
  }
</style>

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部