Giter Club home page Giter Club logo

mini-metro-web's Introduction

Mini Metro Web

迷你地铁地图构建工具: 创建迷你地铁风格的地铁线路图

支持无限站点与线路,支持多次穿过同一站点,设置支线,支持导出图片

https://mini-metro-web.gitlab.io/

下一步计划

多语言支持

English and other languages ​​will be supported in subsequent version.

基本用法

菜单

点击左上角标题进入菜单,点击任意空白处退出菜单

创建站点

  1. 菜单 => 站点 => 添加站点
  2. 点击空白处添加

创建线路

  1. 点击任意站点
  2. 选择 操作 => 以此为起点新建线路
  3. 按照提示依次点击站点添加到线路

删除站点/线路

  1. 点击站点/线路
  2. 选择 操作 => 删除

导出图片/文件

菜单 => 作为图片/文件导出

进阶用法

请参考应用内教程或视频教程

构建

和大部分react项目一样,先运行npm i,然后:

npm start

本地运行 打开 http://localhost:3000 浏览器中查看.

npm run build

打包成静态文件

mini-metro-web's People

Contributors

ryanedo avatar

Stargazers

lyle avatar 溪珂 avatar  avatar Declan Zhang avatar Imz avatar Tian avatar QM avatar Guan avatar  avatar  avatar Илья avatar  avatar liaoyi avatar ManakaGekka avatar  avatar Andy avatar Yukimura Aoi avatar ANRANRAN avatar Bamboo avatar Elli0t avatar  avatar  avatar 筱莱Ceale avatar 幸草_Tarikko-ScetayhChan avatar WeiFengWa avatar  avatar  avatar zhou avatar  avatar Cy71I avatar 白羽Kokuyu avatar BH2VSQ avatar yy792e avatar  avatar  avatar  avatar  avatar qinsaa avatar Maxten avatar  avatar Shishamou avatar ACN avatar corlin avatar Qian Qian "Cubik"‎ avatar skystar avatar Elliot avatar ring0 starrbucks  avatar  avatar GoodbyeNJN avatar  avatar  avatar 林木木 avatar  avatar 星辰代卸 avatar  avatar lanlan3292 avatar  avatar 鬼影233 avatar  avatar NekoZ avatar  avatar  avatar  avatar KD Mercury avatar  avatar CanonNi avatar LuckToken avatar  avatar SDuo avatar 優伶拾酒 avatar alterkey avatar Imagine avatar  avatar BRING-LF avatar  avatar 北極狐 avatar Shiro avatar  avatar Mio avatar BobLiu avatar Ch3nyang avatar  avatar V1cyhoNg avatar williamsxu avatar CI010 avatar Yinong Wang avatar  avatar  avatar 陆伍澪 avatar  avatar  avatar Ellison avatar Doyle avatar wutou avatar April avatar Nic avatar Story5 avatar Luya Cai avatar caolist avatar Wen Xie avatar

Watchers

 avatar

mini-metro-web's Issues

出现白屏现象

选择了从一个站开始一条新线,点击了要添加的第二个站之后线未能显示出来,整个页面也白屏了,创作的图也未能保存下来。点击了恢复数据也恢复的是默认提瓦特的图而不是我创作的图。

关于站点形状的一点建议

能否根据 Mini Metro 的设定增设站点:
image

并且可以在鼠标悬停在站点符号上时显示提示,如圆形显示“居住区”,三角形显示“工作区”,等等

关于mini-metro-web的一些建议

1.在一条线路上添加站点只能从终点站添加而不能从始发站添加,希望两个站都能添加
2.能不能添加这个图标用于表示换乘站
微信图片_20240731205327
3.在编辑线路图时能不能自己导入一张地图在自己导入的基础上编辑线路图
微信图片_20240731205300
4.如果是环线这个突出的能不能去掉
image

非常好的项目

感谢作者,非常好的项目。
提个建议,是否可以上传图片,然后以图片为背景,在背景上创建节点。

优化导出功能 & 一处小细节 Improve export UX & A little problem

优化导出功能

当我选择导出项目时,由于设备性能差异,可能会消耗比较长的时间。

这段时间内并没有操作反馈,当我第一次使用导出为 svg 时,因为没有反应多次点击,导致多次触发下载。

建议在开始进行导出操作时,可以上一个带遮罩的 dialog 进行提示。

一处小细节

官方示例中的 庆云国际机场 右侧的 6号线8号线 的线路重合在了一起,并没有像其他站点和迷你地铁本体一样分开。

因为其他站点都是有的,比如 晨曦酒庄站,所以我认为它或许是一个bug?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.