8.0w+
社区成员
求WEB程序中绘图问题
客户要求必须B/S结构软件。
遇到的一个问题是绘图，先看简化了的示意图：
1、首先是图形的生成。
这几条线段组成的图形就是铁路的线路网，简化了而已。上边的圆点是各个大小车站（或车间之类的）。每个点有一台电脑录入每天的数据。在这个图上能够直观的显示出各个站点是否录入（以圆圈颜色或其他方式进行状态区分），点击小圆圈可以查看录入的详细内容。
如何生成这么一个图，这个很关键。
2、另一个难点是，这些站点不是完全固定的，因为经常会有站点关闭、或启用，希望能有简单的方式，在后台增加一个站点，图上就相应的显示这个站点的圆圈。比方说线段A现有四个站点：A1、A2、A3、A4，如果要在A3和A4中加入站点A35，则管理员在后台简单操作即可在图形界面上插入新的A35的图标。
请问各位高手有没有好办法实现？C/S的程序员都说可以实现，但是客户只要B/S的。
多谢！
遇到的一个问题是绘图，先看简化了的示意图：
1、首先是图形的生成。
这几条线段组成的图形就是铁路的线路网，简化了而已。上边的圆点是各个大小车站（或车间之类的）。每个点有一台电脑录入每天的数据。在这个图上能够直观的显示出各个站点是否录入（以圆圈颜色或其他方式进行状态区分），点击小圆圈可以查看录入的详细内容。
如何生成这么一个图，这个很关键。
2、另一个难点是，这些站点不是完全固定的，因为经常会有站点关闭、或启用，希望能有简单的方式，在后台增加一个站点，图上就相应的显示这个站点的圆圈。比方说线段A现有四个站点：A1、A2、A3、A4，如果要在A3和A4中加入站点A35，则管理员在后台简单操作即可在图形界面上插入新的A35的图标。
请问各位高手有没有好办法实现？C/S的程序员都说可以实现，但是客户只要B/S的。
多谢！
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
bluelogo 2011-06-17
受益匪浅
碧海情天-赵亮 2011-03-09
如果用GMAP的话，了解了API用法，当然更省事，背景图和缩放拖拽都不用管了。
按照一般的GMAP教程学完了，再加上AJAX实时刷新的功能，这个就可以了。
按照一般的GMAP教程学完了，再加上AJAX实时刷新的功能，这个就可以了。
碧海情天-赵亮 2011-03-09
没看到图。但仅从楼主的叙述来看，如果整个显示区域不需要缩小放大这样的操作（其实也能实现，就是麻烦些，你得对空间几何掌握比较好），这个需求也很容易实现，都不需要GMAP，也不需要VML,SVG，CANVAS，只需要很简单的DIV+CSS定位+站点图标文件+AJAX实时刷新就可以了。
AJAX实时刷新数据，这个不用多说，不会去学专门的教程。
DIV+CSS定位++站点图标文件，如果你对前台有一定了解，这个也一听就明白。
所以，就看你对这些知识了不了解，不了解的话，不是别人几句话能教明白的。找专项的人做，或者自己去学。
AJAX实时刷新数据，这个不用多说，不会去学专门的教程。
DIV+CSS定位++站点图标文件，如果你对前台有一定了解，这个也一听就明白。
所以，就看你对这些知识了不了解，不了解的话，不是别人几句话能教明白的。找专项的人做，或者自己去学。
科學信仰 2011-03-09
从原理上讲，就是这个在浏览器中所谓的“图片”能与用户交互，也就是能够接受用户输入信息并给予响应，这个响应主要包括图片的适时变化，这个东西从底层做可能不太容易，肯定有已存在的组件来帮助完成这些功能，因为功能相对抽象化，是图的响应交互，我不清楚extjs行不行
emon123 2011-03-09
推荐你用vml吧！~
ace62 2011-03-08
我看主要不是b/s的问题，而是如何按你的要求把图绘出来的问题
图绘出来后，通过向页面输出流就可以得到图片
图绘出来后，通过向页面输出流就可以得到图片
youjianbo_han_87 2011-03-08
这个已经不是简单绘图的问题了，你看过谷歌百度地图了没，上面的图片有超链接，能点，能跳转。能干很多事情。
你的需求其实和地图实现的功能是类似的。可以去搜索相关资料参考下。。。
你的需求其实和地图实现的功能是类似的。可以去搜索相关资料参考下。。。
Spamazon:Amazon Web抓图和绘图实用程序-源码 由一组才华横溢的编码人员在python中用48小时制作的Amazon Web抓图和绘图实用程序，包括： 保罗·奥巴尔 迈克尔·斯蒂普 亚伦·布朗 迪伦·曼努埃尔（Dylan Manuel） 我们项目的视频演示即将推出！ 特征 实用图 ...
Andala:对称设计的绘图Web应用程序-源码 andala是一个绘图Web应用程序，它允许用户创建美观，对称的设计。 该应用程序通过HTML canvas元素的原始JavaScript DOM操作提供支持。 在访问实时站点。 如何使用安达拉 在页面左侧选择您的初始图形首选项 通过单击...
2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案) 近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 ...同时分享一个自己录制的CSS3动画特效经典案例【推荐教程】--后期会更新vue框架 微信小程序等内容。 https://ke.qq.com/cou...
Collaborative-Drawing:Javascript协作绘图Web应用程序-源码 协同绘图 一个可以让多个人聚在一起的应用程序 此应用程序使用websocket，节点，猫鼬和HTML5 canvas标签。 用户可以实时在同一画布上绘制，选择不同的绘制颜色和... 在绘图过程中加入的新用户可以看到进行中的绘图。
Web应用程序的开发方法 也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统我想刚接触Web方面的人士来说肯定是是一脸懵逼，我想大家阅读这篇Web应用程序开发步骤后，肯定会对大家在Web应用程序...
ves-spa:全栈单页Web应用程序，用于矢量绘图-源码 这是一个单页的全栈Web应用程序 它有什么作用： 带有矢量图形的交互式绘图 通过编写VES SCRIPT进行手动绘图 您需要运行什么： 网络主机（此应用提供了python网络服务器）或某种方式运行服务器（main.py） Python...
enterprise-build-sample-js:ArcGIS JavaScript Web制图应用程序演示自动化Dojo Build Process-源码 通过运行npm install将本地节点软件包安装到项目中 通过运行npm run build使用grunt运行webpack npm run build 构建完成后，dist目录应为该应用程序的生产就绪版本 要求 记事本或您最喜欢HTML编辑器 可以访问...
SyncPaint：用于同步组图的Web应用程序。 与其他人实时绘图-源码 运行node app.js以启动应用程序。 然后导航到http://localhost:3000 。 可以在以下获得实时版本： 。 使用Docker构建并运行 docker build . -t syncpaint:latest docker run -p 3000:3000 syncpaint:latest
wacom-device-kit-web:此演示实现了一个简单的 Web 绘图应用程序，展示了如何使用 HTML5 指针事件-源码 此演示实现了一个简单的 Web 绘图应用程序，展示了如何使用 HTML5 指针事件。 借助 HTML5 指针事件，您可以创建一个与许多流行浏览器兼容的应用程序，这些浏览器使用单个统一 API 检测笔迹、鼠标和触摸数据。 大多数...
project-template:Web 制图应用程序的基本项目模板-源码 项目模板 在开始编写自定义代码之前，涵盖了相当多的基础的基本项目模板，如： 组织以按目的组织模块和文件。 查看文档文件夹 配置 dojo 并定义所需的 使用与项目相关的来获取文档、变更日志、路线图等。...
Java Web开发过程中登陆模块的验证码的实现方式总结 验证码为全自动区分计算机和人类的图灵测试的缩写,是一种区分用户是计算机的公共全自动程序,这个问题可以由计算机生成并评判,但是必须只有人类才能解答.可以防止恶意破解密码、刷票、论坛灌水、有效防止某个黑客对某...
如何用简单的Python编写Web应用程序？ 没关系，本文将教你如何轻松搞定从数据科学项目到超棒程序的无缝转换。 图片来源：Cody Black Unsplash 稍作休息，开始编码。 机器学习项目只有充分展示给公众时才称得上是完整的项目。 过去在介绍数据科学...
TinyAtelier：具有8种绘图模式的简单绘图板Web应用程序-源码 :artist_palette: TinyAtelier :artist_palette: 具有8种绘图模式的简单绘图板Web应用程序。 :artist_palette: 开始！
canvas-webworker:可以在WebWorkers中使用的纯JavaScript Canvas实现-源码 绘图不是通过硬件加速的，因此与常规画布相比，绘图速度会慢一些，但该程序将保持非阻塞状态。 安装方式 安装库 使用JSPM（ECMAScript / ES6模块） jspm install github:casperlamboo/canvas-webworker 使用NPM...
