创建2d室内地图

需求

1. 平面图
2. poi点击事件
3. 列车行驶动画

技术选择

d3.js

绘图

svg矢量图部分代码

//创建轨道
  for (var i = 0; i < 30; i++) {
    if (i == 0) {
      //上行
      createLine(cell, '150', '530', '1800', '530', 'black', '5', 'gray');
      createLine(cell, '150', '570', '1800', '570', 'black', '5', 'gray');
      //下行
      createLine(cell, '150', '1430', '1800', '1430', 'black', '5', 'gray');
      createLine(cell, '150', '1470', '1800', '1470', 'black', '5', 'gray');
    }
    var x = 250 + i * 50;
    createLine(cell, x, '520', x, '580', 'black', '10', 'gray');
    createLine(cell, x, '1420', x, '1480', 'black', '10', 'gray');
  }

  cell.append("polygon")
    .attr('points', '0,700 400,700 400,800 300,800 300,1200 400,1200 400,1300 0,1300')
    .style('fill', '#B0C4DE')
    .style('stroke', 'gray')
    .style('stroke-width', '0');

  cell.append("polygon")
    .attr('points', '2000,700 1600,700 1600,800 1500,800 1500,1100 1800,1100 1800,1300 2000,1300')
    .style('fill', '#B0C4DE')
    .style('stroke', 'gray')
    .style('stroke-width', '0');

// 楼梯
  for (var fx = 0; fx < 3; fx++) {
    var fx1 = 600 + fx * 300;
    var fx2 = fx1 + 40;
    var fx3 = fx1 + 80;

    createLine(cell, fx1, '950', fx1, '1050', '#B0C4DE', '30', 'gray');
    createLine(cell, fx2, '950', fx2, '1050', '#B0C4DE', '30', 'gray');
    createLine(cell, fx3, '950', fx3, '1050', '#B0C4DE', '30', 'gray');
  }

// line
var createLine = function (cell, x1, y1, x2, y2, stroke, strokeW, fill) {
  cell.append("line")
    .attr('x1', x1)
    .attr('y1', y1)
    .attr('x2', x2)
    .attr('y2', y2)
    .style('stroke', stroke)
    .style('stroke-width', strokeW)
    .style('fill', fill);
}

预览