AnyGraph

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