二维码
搜索 ×

加载 CIM/G 数据

运行效果

以下为加载一个 CIM/G 文件的运行效果：

源代码

以下为加载 CIM/G 文件的源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CIM/G示例</title>

    <script type="module">
        import { Graph, Layer, VectorSource, CimgFormat, CimgSymbol, Color, getCimgColor } from "../../src/index.js";

        let source;
        let symbolManager;

        document.addEventListener('DOMContentLoaded', function () {
            
            let symbolManager = new CimgSymbol();
            
            // graph对象
            let graph = new Graph({
                "target": "graphWrapper",
                "originAtLeftTop": true,
                "fullView": true
            });
            
            // 加载cimg符号
            symbolManager.loadFile(function () {
                let source = new VectorSource({
                    "dataType": "json",
                    "format": new CimgFormat({
                        "symbol": symbolManager
                    })
                });
                
                let layer = new Layer({
                    source: source,
                    zIndex: 10010,
                    name: "CIM/G Data",
                    visible: true
                })
                graph.addLayer(layer);
    
                // 加载cimg文件
                source.loadFile("../../data/devp/mix0/cimg.json", function(file){
                    if (file == null) {
                        return false;
                    } else {
                        if (file != null && file.backgroundColor != null) {
                            graph.setBgColor(Color.fromString(getCimgColor(file.backgroundColor)).toString());
                        } else {
                            graph.setBgColor(null);
                        }
                        graph.render();
                    }
                });
            });
        });
    </script>
</head>

<body oncontextmenu="return false;">
    <div id="graphWrapper" style="position:absolute; width:100%; height:100%; border:solid 2px #CCCCCC;"></div>
</body>

</html>