創建2d室內地圖

• 需求
• 技術選擇
• 繪圖
• 預覽

需求

平面圖

poi點擊事件

列車行駛動畫

技術選擇

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); }

預覽

總結

以上是生活随笔為你收集整理的创建2d室内地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。