1 anyGraph 是什么?
AnyGraph,中文名称为前端图形开发引擎,是一款灵活且可扩展的WEB图形开源JavaScript库。它支持点、折线、矩形、圆形、多边形等基本几何图形的渲染与编辑,同时能处理路径、组、符号等复杂图形对象的组合。此外,它还提供了图形的缩放、漫游、拾取、突出显示等交互性功能,增强了用户的操作体验。值得一提的是,AnyGraph还支持加载SVG、GeoJson、CIM/G等多种格式的矢量数据,使得开发人员能轻松地在任何网页应用中创建和展示动态图形。
2 开发说明
浏览器
anyGraph 适用于所有现代移动和桌面浏览器。浏览器需要能够运行 ECMAScript 6 规范中的javascript代码。
加载anyGraph
anyGraph 采用es 模块进行开发,可通过以下方式在浏览器中运行:
<script type="module">
import { Graph } from "../../src/index.js";
......
</script>
3 源代码目录结构
├── examples // 示例
├── demo-data // 示例数据
├── style // 样式
│ └── graph.css // 控件css样式文件
│
├── src
│ ├── basetype // 基本数据类型(目录)
│ ├── control // 对象与控件(目录)
│ │ ├─ render.js // 图形窗口操作/渲染对象
│ │ ├─ canvas.js // 画板对象
│ │ ├─ zoom.js // 放大/缩小控件
│ │ ├─ position.js // 鼠标当前位置控件
│ │ ├─ ……
│ │ └─ layers.js // 图层控制控件
│ │
│ ├── event // 事件处理(目录)
│ ├── format // 外部数据格式读取(目录)
│ │ ├─ svg.js // SVG格式数据解析
│ │ ├─ cimg.js // CIM/G 数据格式解析
│ │ ├─ geojson.js // GeoJSON 数据格式解析
│ │ ├─ axfg // AXFG 电力专业数据格式解析(目录)
│ │ └─ symbol // 符号数据解析(目录)
│ │
│ ├── geom // 基本图形对象(目录)
│ │ ├─ geomtry.js // 几何对象类型基础类
│ │ ├─ point.js // 点对象类型
│ │ ├─ rect.js // 矩形对象类型
│ │ ├─ circle.js // 圆对象类型
│ │ ├─ ellipse.js // 椭圆对象类型
│ │ ├─ polyline.js // 折线对象类型
│ │ ├─ polygon.js // 多边形对象类型
│ │ ├─ group.js // 组对象类型
│ │ ├─ symbol.js // 符号对象类型
│ │ ├─ text.js // 文本对象类型
│ │ ├─ image.js // 图形对象类型
│ │ ├─ ……
│ │ └─ path.js // 路径对象类型
│ │
│ ├── renderer // 图形渲染(目录)
│ │ ├─ graph.js // 图形对象渲染类
│ │ ├─ layer.js // 图层渲染类
│ │ ├─ vector.js // 矢量数据图层渲染类
│ │ ├─ tile.js // 切片数据图层渲染类
│ │ ├─ arrow.js // 箭头渲染类
│ │ ├─ ……
│ │ └─ point.js // 特殊点的渲染类
│ │
│ ├── source // 数据源(目录)
│ │ ├─ vector.js // 矢量数据数据源
│ │ ├─ ……
│ │ └─ tile.js // 切片地图数据源
│ │
│ ├── spatial // 空间分析(目录)
│ │ ├─ coordinate.js // 坐标数据处理类
│ │ ├─ extent.js // 边界坐标范围处理类
│ │ ├─ measure.js // 测量算法类
│ │ ├─ quadtree.js // 四叉树空间索引类
│ │ ├─ ratio.js // 坐标等比例变换处理类
│ │ ├─ simplify.js // 坐标简化处理
│ │ ├─ clip.js // 坐标裁切处理
│ │ ├─ ……
│ │ └─ transform // 矩阵变换类
│ │
│ ├── style // 渲染样式(目录)
│ │ ├─ color.js // 颜色类
│ │ ├─ gradient.js // 渐变效果类
│ │ ├─ pattern.js // 图案填充效果类
│ │ ├─ ……
│ │ └─ filter // 各种滤镜(目录)
│ │
│ ├── util // 工具类(目录)
│ │ ├─ ajax.js // ajax请求工具类
│ │ ├─ animal.js // 动画处理工具类
│ │ ├─ easing.js // 缓动效果类
│ │ ├─ math.js // 数学计算工具类
│ │ ├─ xml.js // XML文件操作工具类
│ │ ├─ dom.js // Dom操作工具类
│ │ ├─ browser.js // 浏览器信息工具类
│ │ └─ ……
│ │
│ ├── index.js // es6 综合引用对象
│ ├── global.js // 全局变量
│ ├── graph.js // 图形管理类
│ ├── layer.js // 图层类
│ └── view.js // 视图类
│
├── README.md // 说明
├── package-lock.json
└── package.json