HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web 的整合. HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS.百度地图…

HT for Web整合OpenLayers实现GIS地图应用

HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS.百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案. 以上抓图为本文介绍的例子最终运行效果,接下来我们一步步来实现,首选显示地图信息需要有城市经纬度数据,搜索了下感谢此篇博客提供的数据.这么大量…

快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/examples/example_overview.html 该例子展示了如何构建两个节点.一条连线.以及一个 Group 的组合效果.结合 <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型,以下为构建上图界面效果…

矢量Chart图表嵌入HTML5网络拓扑图的应用

使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是也不是没有解决方案,接下来我们就来聊聊具体的解决方案. 首先,第一种解决方案是,在定义 Chart 矢量的时候在 comps 中除了定义 Chart 外,再添加几个你自定义的绘制区域来绘制你想要的坐标轴,效果及 example 如下: 该 Chart 的定义代码见附录1(代码的定义太长),代码虽然长…

HTML5 网络拓扑图性能优化

HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大的影响,操作起来没那么顺畅,体验将会极其差,这不是我们想要的结果,再进一步和图片的绘制进行比较比较,你会发现,绘制图片和绘制文本在性能上不是一个等级的,在性能上绘制图片会好太多. 我们今天就来谈谈 HT for Web 性能相关的问题.在 HT 中,有很多地方可以设置文本,每个节点上面都可以设置两个…

快速开发基于 HTML5 网络拓扑图应用1

今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D 功能最丰富的组件,其相关类库都在 ht.graph 包下.GraphView 具有基本图形的呈现和编辑功能,拓扑节点连线及自动布局功能,电力和电信等行业预定义对象,具有动画渲染等特效,因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,可作为一般性的图形化编辑工具,可扩展成工作流和组织图等企业应…

快速开发基于 HTML5 网络拓扑图应用--入门篇（一）

计算机网络的拓扑结构是引用拓扑学中研究与大小,形状无关的点.线关系的方法.把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组成的几何图形就是计算机网络的拓扑结构.网络的拓扑结构反映出网中各实体的结构关系,是建设计算机网络的第一步,是实现各种网络协议的基础,它对网络的性能,系统的可靠性与通信费用都有重大影响.拓扑在计算机网络中即是指连接各结点的形式与方法:在网络中的工作站和服务器等网络单元抽象为"点":网络中的电缆等抽象为"线".影响网络性能.…

快速开发基于 HTML5 网络拓扑图应用--入门篇（二）

上一篇我们绘制了一个 graphView 场景,在场景之上通过 graphView.dm() 获取数据容器,并通过 graphView.dm().add() 函数添加了两个 Node 节点,并通过 setPosition 设置节点位置以及 setImage 给节点添加图片:接着在两个节点之间通过 ht.Edge(sourceNode, targetNode) 添加了两条连线(实际上还可以更多),并给连线添加了 label 标签显示文字,同时也通过 label.position 设置了文字在连线上…

快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇

前言发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇,所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明,我写了一个简单的例子,基于机房工控的服务器上设备的灯闪烁现象.我们从 2d 和 3d 两个角度来分析数据绑定的问题. 效果图 2d 3d 代码实现其实不管是 2d 还是…

百度地图、ECharts整合HT for Web网络拓扑图应用

前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用,于是有了下面的Demo: 在这个Demo中,将GraphView拓扑图组件添加到百度地图组件中,覆盖在百度地图组件之上,并且在百度地图组件上和GraphView拓扑图组件上分别添加事件监听,相互同步经纬度和屏幕位置信息,从而来控制拓扑图上的组件位置固定在地…

基于HTML5的网络拓扑图(1)

什么是网络拓扑网络拓扑,指构成网络的成员间特定的排列方式.分为物理的,即真实的.或者逻辑的,即虚拟的两种.如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线.节点间距离可能会有不同. - 维基百科网络拓扑图的绘制很多人用visio绘制网络拓扑图,非常精美,但只能静态示意,也有些传统的拓扑图中间件,基于Java.flex或者Silverlight技术,能够动态显示,只是界面略显沉重,于是有人尝试纯Web技术的图形组件,其中有不少佼佼者如:mxgraph, yf…

基于 HTML5 Canvas 绘制的电信网络拓扑图

电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式描述网路单元的邻接关系,即以交换中心(或节点)和传输链路所组成的拓扑结构.常见的网络拓扑结构有星型结构.总线结构.环形结构.树形结构.网状结构.混合型拓扑以及蜂窝拓扑结构等,本文的例子主要描绘的是总线型拓扑,在显示上相对其他的结构类型来说更清晰明了,绘制起来也非常容易. 虽然题目起的名字是电信网络拓…

快速创建 HTML5 Canvas 电信网络拓扑图

前言属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下. 效果图 http://www.hightopo.com/demo/propertyEditor/index.html 代码实现拓扑图从上面的效果图中我们可以看到,整个页面分为 3 个部分,左边的 g…

ECharts+BaiduMap+HT for Web网络拓扑图应用

前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表+拓扑图应用,于是有了下面的Demo:http://www.hightopo.com/demo/blog_baidu_20150928/ht-baidu.html 在这个Demo中,将GraphView拓扑图组件添加到百度地图组件中,覆盖在百度地图组件之上,并且在百度地…

python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)

Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外本项目也是学习HTML5开发,构建WebAPP项目的参考实例. 请访问此地址查看效果:http://demo.qunee.com/editor/ 入门实例: <html> <head> <meta charset="UTF-8"> <title&g…

网络/运维工程师visio2013模具图标绘制漂亮的网络拓扑图狮子XL工程师美学思想

visio2013狮子XL自定义运维模具下载: 链接:http://pan.baidu.com/s/1bo779Kz 密码:xh3s 狮子XL 的美学思想: 1,一次痛苦,一生幸福. 之前,在绘制网络拓扑图时候,由于巨丑,影响了华丽丽的精湛的文档. 所以狮子XL一直在思考.怎么把图绘制的漂亮一些. 有时候感觉对了,绘制的不错, 但是那些好的东西随之关掉就丢弃了. 思想没保留下来. 突然想能不能把时间带给我的思想的火花保留下来.就想着能做类似模版的东西. 碰巧 visio可以自定义模具. 每次用做…

梅安森元图地图开放平台、专业GIS地图平台

元图地图开放平台:http://map.cmetamap.com/?from=groupmessage 梅安森元图地图开放平台: 自主知识产权,专业GIS地图平台,用简单语言即可轻松操作复杂的互联网地图及Autocad的dwg格式图形,大批量标注.动画.切片等都不在话下!轻松打造各行业GIS"一张图".免费试用,性价比极高!值得拥有!!! 欢迎咨询.…

Ucinet6 + Netdraw 根据excel文件绘制网络拓扑图

条件: 具备Ucinet6 和 Netdraw 两款软件的Windows excel文件格式(.xlsx .xls .csv):必须是数字,如果现有的文件不是数字,可以采用某种编码的方式将其映射成唯一的数字编码下面是可以用于读入的.csv数据打开Ucinet6软件,然后按照分别选择相关操作,选择数据文件读入数据后得到数据矩阵如果数据量太大就不会显示在此软件的面板上,而是直接显示已经成功写入文件得到这样的两个文件现在,打开Netdraw,按照步骤将刚才生成的.##h文件读入点击O…

利用HTML5定位功能，实现在百度地图上定位（转）

原文:利用HTML5定位功能,实现在百度地图上定位代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无论使用WIFI还是移动4G联网, 定位精度都是蛮高的,误差在几十米内) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

基于Web实现网络拓扑图

想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留“制度”,But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来请教网络拓扑图的有关问题,由于当时确实比较忙,没时间帮着一起分析,表示歉意! 先前整理过份简单的Demo 但是不详细基于Web实现在线绘画拓扑图[GraphEditor] 首先呢这里是要详述的几个要点:(我用图是直接显示了~) (当然这套UI模块是后期改动的~重点不在这里) [备案:后续使用文档] 显…

html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend

一.前言本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟“动静结合”是先有动再有静.看了上一章的内容,或许你就有了对html5实现动画有了初步了解: html5游戏开发--"动静"结合(一): http://blog.csdn.NET/yorhomwang/article/details/8301451 二.html5实现用小地图块拼成大地图…

OpenLayers 3 之地图视图（View）

OpenLayers 3 之地图视图(View) 初始化一幅地图,必备的三要素之一视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对象包含一个 view对象部分,用于控制与用户的交互. 主要介绍 view 的作用和用法,并分析商用的地图应用中的相关的功能.功能的具体的实现与如何进行定制和优化,就超过了这篇文章的范围了. view 类的定义可以在 GitHub 的 OpenLayers 项目中的这里看到,我就不贴大篇幅的代码了…

OpenLayers 3 之地图控件（control）

OpenLayers 3 之地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之地图控件(control)初始化与定制的代码如下: var map = new ol.Map({ // 设置地图控件,默认的三个控件都不显示 controls: ol.control.defaults({ attribution: false, rotate: false, zoom: false…

visjs使用小记-3.简单网络拓扑图的折叠与展开

项目需要对节点无限层级查看,大概捣鼓了下,以下demo代码可根据节点的层级顺序,通过节点双击简单实现节点的折叠与展开 <!doctype html> <html> <head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <l…

visjs使用小记-1.创建一个简单的网络拓扑图

1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title>Network</title> <script type="text/javascript" src="http://visjs.org/dist/vis.js"></script> <link href="http…

openlayers对接百度地图新方法

上次给大家提供的openlayers对接百度地图有些问题,是因为没有进行分辨率设置,也没有进行相应的平面坐标转换,获取getURL的方法还是没有变化的 getURL: function (bounds) { var tilez=this.map.zoom-1; var res = this.map.getResolution(); var bbox = this.map.getMaxExtent(); var size = this.tileSize; var bx = Math.round((…