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