​

    import { Graph, BgUtil } from "../../src/index.js";

    let data = [

        {"type":"Polygon","coords":[[[298,125],[458,125],[378,205]]],"style":{"fillStyle":1,"fillColor":"#caff67"}},

        {"type":"Polygon","coords":[[[413,240],[299,240],[299,127]]],"style":{"fillStyle":1,"fillColor":"#67becf"}},

        {"type":"Polygon","coords":[[[355,69],[298,125],[241,125],[298,69]]],"style":{"fillStyle":1,"fillColor":"#ef3d61"}},

        {"type":"Polygon","coords":[[[298,125],[242,181],[242,125]]],"style":{"fillStyle":1,"fillColor":"#f9f51a"}},

        {"type":"Polygon","coords":[[[353,69],[297,69],[297,13],[353,13]]],"style":{"fillStyle":1,"fillColor":"#a54c09"}},

        {"type":"Polygon","coords":[[[297,70],[240,70],[297,14]]],"style":{"fillStyle":1,"fillColor":"#fa8ccc"}},

        {"type":"Polygon","coords":[[[298,237],[241,180],[298,124]]],"style":{"fillStyle":1,"fillColor":"#f6ca29"}},

        {"type":"Polygon","coords":[[[72,127],[232,127],[152,207]]],"style":{"fillStyle":1,"fillColor":"#FFE5FF"}},

        {"type":"Polygon","coords":[[[186,242],[73,242],[73,129]]],"style":{"fillStyle":1,"fillColor":"#FF4DFF"}},

        {"type":"Polygon","coords":[[[128,71],[72,128],[15,128],[72,71]]],"style":{"fillStyle":1,"fillColor":"#FFB366"}},

        {"type":"Polygon","coords":[[[72,127],[16,184],[16,127]]],"style":{"fillStyle":1,"fillColor":"#8CFF66"}},

        {"type":"Polygon","coords":[[[127,72],[70,72],[70,15],[127,15]]],"style":{"fillStyle":1,"fillColor":"#66D9FF"}},

        {"type":"Polygon","coords":[[[71,72],[14,72],[71,16]]],"style":{"fillStyle":1,"fillColor":"#FF6666"}},

        {"type":"Polygon","coords":[[[72,239],[15,183],[72,126]]],"style":{"fillStyle":1,"fillColor":"#4DFFA6"}}

    ];

    // page loaded ready

    $(document).ready(function () {

        // 绘图层graph对象

        let graph = new Graph({

            "target": "graphWrapper"

        });

​

        // 显示辅助网格

        BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize()));

​

        // 数据层

        let currentLayer = graph.addLayer({ "name": "数据层" });

        currentLayer.getSource().loadData(data);

​

        // 打开文件

        $("#btnOpenFile").on("click", function () {

            let options = {

                "accept": ".json",

                "dataType": "other"

            };

            Util.openFile(options, function (files) {

                let geomDatas = JSON.parse(files[0]);

                if (geomDatas.length > 0 && geomDatas[0].name == null) {

                    currentLayer.getSource().clearData();

                    currentLayer.getSource().loadData(geomDatas);

                } else {

                    graph.removeLayers();

                    BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize()));

                    for (let i = 0; i < geomDatas.length; i++) {

                        currentLayer = graph.addLayer({ "name": geomDatas[i].name });

                        currentLayer.getSource().loadData(geomDatas[i].data);

                    }

                }

            });

        });

    });

​