@supermapgis/iclient-ol 11.2.0

package/overlay/FGB.js

@@ -0,0 +1,100 @@
+/* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
+ * This program are made available under the terms of the Apache License, Version 2.0
+ * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
+import VectorSource from 'ol/source/Vector';
+import { deserialize } from 'flatgeobuf/lib/mjs/geojson';
+import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
+import { all, bbox } from 'ol/loadingstrategy';
+import { getIntersection } from '@supermapgis/iclient-common/util/MapCalculateUtil';
+import GeoJSON from 'ol/format/GeoJSON';
+/**
+ * @class FGB
+ * @browsernamespace ol.source
+ * @category Visualization FGB
+ * @classdesc FGB 图层源，该图层源把 {@link FlatGeobuf} 格式解析为点线面要素。
+ * FlatGeobuf（FGB）是一种用于存储地理要素的坐标、类型的二进制编码格式。
+ * FGB 格式与传统的 Shapefile、GeoJSON 等文件格式类似，支持地理空间矢量数据的存储，但 FGB 格式具有更高的存储效率和更快的读写速度，
+ * 适用于大量静态数据的编码与传输。
+ * @modulecategory Overlay
+ * @version 11.1.0
+ * @param {Object} opt_options - 参数。
+ * @param {string} opt_options.url - FGB 地址，例如：http://localhost:8090/iserver/services/xxx/rest/data/featureResults/newResourceId.fgb。
+ * @param {ol.loadingstrategy} [opt_options.strategy= ol.loadingstrategy.bbox] - ol.loadingstrategy.all 为全量加载，要素会以流的方式渲染到地图。ol.loadingstrategy.bbox 为当前可见范围加载，当地图范围改变时会重新加载要素，此时可以通过 idField 参数来标识已被加载过的要素，被标识的要素无需再次加载。idField 参数无效时会清空要素，重新加载。
+ * @param {Array} [opt_options.extent] - 加载范围，参数规范为: [minX, minY, maxX, maxY]，传递此参数后，图层将使用局部加载。
+ * @param {function} [opt_options.featureLoader] - 要素加载回调函数。
+ * @param {boolean} [opt_options.overlaps] - 是否优化重叠要素的填充与描边操作。
+ * @param {boolean} [opt_options.useSpatialIndex] - 是否启用要素空间索引。
+ * @param {boolean} [opt_options.wrapX] - 是否平铺地图。
+ * @param {boolean} [opt_options.idField='SmID'] - 要素属性中表示唯一标识的字段，当 strategy 为 ol.loadingstrategy.bbox 时生效。
+ * @extends {ol.source.Vector}
+ * @usage
+ */
+export class FGB extends VectorSource {
+  constructor(options) {
+    const baseOptions = Object.assign({ strategy: bbox }, options);
+    delete baseOptions.url;
+    delete baseOptions.extent;
+    delete baseOptions.idField;
+    super(baseOptions);
+    this.options = options || {};
+    this.strategy = baseOptions.strategy;
+    this.url = this.options.url;
+    this.extent = this.options.extent;
+    this._idField = this.options.idField || 'SmID';
+    this._validatedId = false;
+    this._checked = false; 
+    this.setLoader(async function (extent) {
+      if (this.strategy === bbox) {
+        if (!this._validatedId) {
+          this.clear();
+        }
+        if (this.extent) {
+          const intersectExtent = getIntersection(this.extent, extent);
+          extent = (intersectExtent && intersectExtent.length) ? intersectExtent : this.extent;
+        }
+      }
+      if (!this.extent && (this.strategy === all || !isFinite(extent[0]))) {
+        extent = [];
+      }
+      let fgbStream;
+      if (!Object.keys(extent).length) {
+        fgbStream = await this._getStream(this.url);
+      }
+      this._handleFeatures((fgbStream && fgbStream.body) || this.url, extent);
+    });
+  }
+
+  async _handleFeatures(url, extent) {
+    let rect = {};
+    if (extent && extent.length) {
+      rect = {
+        minX: extent[0],
+        minY: extent[1],
+        maxX: extent[2],
+        maxY: extent[3]
+      };
+    }
+    const fgb = deserialize(url, rect);
+    for await (let feature of fgb) {
+      let id = feature.properties[this._idField];
+      if (id && !this._validatedId) {
+        this._validatedId = true;
+        this._checked = true;
+      }
+      feature = new GeoJSON().readFeature(feature);
+      if (id && this._checked) {
+        feature.setId(id);
+      }
+      if (this.options.featureLoader && typeof this.options.featureLoader === 'function') {
+        feature = this.options.featureLoader(feature);
+      }
+      this.addFeature(feature);
+    }
+  }
+
+  async _getStream(url) {
+    return await FetchRequest.get(url, {}, { withoutFormatSuffix: true }).then(function (response) {
+      return response;
+    });
+  }
+}

package/overlay/Graph.js

@@ -0,0 +1,439 @@
+/* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
+ * This program are made available under the terms of the Apache License, Version 2.0
+ * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
+import { Util as CommonUtil} from '@supermapgis/iclient-common/commontypes/Util';
+import { Theme as FeatureTheme } from "@supermapgis/iclient-common/overlay/feature/Theme";
+import { LonLat } from '@supermapgis/iclient-common/commontypes/LonLat';
+import { Bounds } from '@supermapgis/iclient-common/commontypes/Bounds';
+import {
+    Theme
+} from './theme/Theme';
+
+/**
+ * @class Graph
+ * @browsernamespace ol.source
+ * @category  Visualization Theme
+ * @classdesc 统计专题图图层基类。统计专题图是通过为每个要素或记录绘制统计图来反映其对应的专题值的大小。
+ * 统计专题图可以基于多个变量，反映多种属性，即可以将多个专题值绘制在一个统计图上，并且每个区域都会有一幅表示该区域各专题值的统计图。
+ * 通过统计专题图可以在区域本身与各区域之间形成横向和纵向的对比。多用于具有相关数量特征的地图上，比如表示不同地区多年的粮食产量、GDP、人口等，
+ * 不同时段客运量、地铁流量等。
+ * @modulecategory Overlay
+ * @param {string} chartsType - 图表类别。
+ * @param {string} name - 图层名称。
+ * @param {Object} opt_options - 参数。
+ * @param {ol.Map} opt_options.map - 当前 OpenLayers 地图对象。
+ * @param {string} opt_options.chartsType - 图表类型。目前可用："Bar"，"Bar3D"，"Line"，"Point"，"Pie"，"Ring"。
+ * @param {Object} opt_options.chartsSetting - 各类型图表的 chartsSetting 对象可设属性请参考具体图表模型类的注释中对 chartsSetting 对象可设属性的描述。chartsSetting 对象通常都具有以下几个基础可设属性。
+ * @param {number} opt_options.chartsSetting.width - 专题要素（图表）宽度，单位为像素。
+ * @param {number} opt_options.chartsSetting.height - 专题要素（图表）高度，单位为像素。
+ * @param {Array.<number>} opt_options.chartsSetting.codomain - 值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。
+ * @param {number} [opt_options.chartsSetting.XOffset] - 专题要素（图表）在 X 方向上的偏移值，单位为像素。
+ * @param {number} [opt_options.chartsSetting.YOffset] - 专题要素（图表）在 Y 方向上的偏移值，单位为像素。
+ * @param {Array.<number>} [opt_options.chartsSetting.dataViewBoxParameter] - 数据视图框 dataViewBox 参数，它是指图表框 chartBox（由图表位置、图表宽度、图表高度构成的图表范围框）在左、下，右，上四个方向上的内偏距值，长度为 4 的一维数组。
+ * @param {number} [opt_options.chartsSetting.decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。
+ * @param {string} opt_options.themeFields - 指定创建专题图字段。
+ * @param {string} [opt_options.id] - 专题图层 ID。默认使用 CommonUtil.createUniqueID("themeLayer_") 创建专题图层 ID。
+ * @param {number} [opt_options.opacity = 1] - 图层不透明度。
+ * @param {string} [opt_options.logo] - Logo（OpenLayers 5.0.0 及更高版本不再支持此参数）。
+ * @param {ol.proj.Projection} [opt_options.projection] - {@link ol.proj.Projection} 投影信息。
+ * @param {number} [opt_options.ratio=1.5] - 视图比，1 表示画布是地图视口的大小，2 表示地图视口的宽度和高度的两倍，依此类推。必须是 1 或更高。
+ * @param {Array.<number>} [opt_options.resolutions] - 分辨率数组。
+ * @param {boolean} [opt_options.isOverLay=true] - 是否进行压盖处理，如果设为 true，图表绘制过程中将隐藏对已在图层中绘制的图表产生压盖的图表。
+ * @param {ol.source.State} [opt_options.state] - 资源状态。
+ * @param {(string|Object)} [opt_options.attributions='Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>'] - 版权描述信息。
+ * @extends {Theme}
+ * @usage
+ */
+export class Graph extends Theme {
+
+    constructor(name, chartsType, opt_options) {
+        super(name, opt_options);
+        this.chartsSetting = opt_options.chartsSetting || {};
+        this.themeFields = opt_options.themeFields || null;
+        this.overlayWeightField = opt_options.overlayWeightField || null;
+        this.isOverLay = opt_options.isOverLay === undefined ? true : opt_options.isOverLay;
+        this.charts = opt_options.charts || [];
+        this.cache = opt_options.cache || {};
+        this.chartsType = chartsType;
+    }
+
+    /**
+     * @function Graph.prototype.destroy
+     * @description 释放资源，将引用资源的属性置空。
+     */
+    destroy() {
+        this.chartsType = null;
+        this.chartsSetting = null;
+        this.themeFields = null;
+        this.overlayWeightField = null;
+        this.isOverLay = null;
+        Theme.prototype.destroy.apply(this, arguments);
+        // charts  cache 为缓存，需要在父类destory后置为null（父类destory中有方法会初始化缓存参数）
+        this.charts = null;
+        this.cache = null;
+    }
+
+    /**
+     * @function Graph.prototype.setChartsType
+     * @description 设置图表类型，此函数可动态改变图表类型。在调用此函数前请通过 chartsSetting 为新类型的图表做相关配置。
+     * @param {string} chartsType - 图表类型。目前可用："Bar"，"Bar3D"，"Line"，"Point"，"Pie"，"Ring"。
+     */
+    setChartsType(chartsType) {
+        this.chartsType = chartsType;
+        this.redraw();
+    }
+
+    /**
+     * @function Graph.prototype.addFeatures
+     * @description 向专题图图层中添加数据。
+     * @param {(ServerFeature|ThemeFeature)} features - 待添加的要素。
+     */
+    addFeatures(features) {
+        var ret = this.dispatchEvent({
+            type: 'beforefeaturesadded',
+            value: {
+                features: features
+            }
+        });
+        if (ret === false) {
+            return;
+        }
+        //转换 features 形式
+        this.features = this.toiClientFeature(features);
+        //绘制专题要素
+        if (this.renderer) {
+            this.changed();
+        }
+    }
+
+    /**
+     * @function Graph.prototype.redrawThematicFeatures
+     * @description 重绘所有专题要素。
+     *              此方法包含绘制专题要素的所有步骤，包含用户数据到专题要素的转换，抽稀，缓存等步骤。
+     *              地图漫游时调用此方法进行图层刷新。
+     * @param {Object} extent - 重绘的范围。
+     *
+     */
+    redrawThematicFeatures(extent) {
+        //清除当前所有可视元素
+        this.renderer.clearAll();
+        var features = this.features;
+        for (var i = 0, len = features.length; i < len; i++) {
+            var feature = features[i];
+            // 要素范围判断
+            var feaBounds = feature.geometry.getBounds();
+            //剔除当前视图（地理）范围以外的数据
+            if (extent) {
+                var bounds = new Bounds(extent[0], extent[1], extent[2], extent[3]);
+                if (!bounds.intersectsBounds(feaBounds)) {
+                    continue;
+                }
+            }
+            var cache = this.cache;
+            // 用 feature id 做缓存标识
+            var cacheField = feature.id;
+            // 数据对应的图表是否已缓存，没缓存则重新创建图表
+            if (cache[cacheField]) {
+                continue;
+            }
+            cache[cacheField] = cacheField;
+            var chart = this.createThematicFeature(feature);
+            // 压盖处理权重值
+            if (chart && this.overlayWeightField) {
+                if (feature.attributes[this.overlayWeightField] && !isNaN(feature.attributes[this.overlayWeightField])) {
+                    chart["__overlayWeight"] = feature.attributes[this.overlayWeightField];
+                }
+            }
+            if (chart) {
+                this.charts.push(chart);
+            }
+        }
+        this.drawCharts();
+    }
+
+    /**
+     * @function Graph.prototype.createThematicFeature
+     * @description 向专题图图层中添加数据，支持的 feature 类型为：SuperMap iServer 返回的 feature JSON 对象。
+     * @param {ServerFeature} feature - 待添加的要素。
+     *
+     */
+    createThematicFeature(feature) {
+        var thematicFeature;
+        // 检查图表创建条件并创建图形
+        if (FeatureTheme[this.chartsType] && this.themeFields && this.chartsSetting) {
+            thematicFeature = new FeatureTheme[this.chartsType](feature, this, this.themeFields, this.chartsSetting);
+        }
+        // thematicFeature 是否创建成功
+        if (!thematicFeature) {
+            return false;
+        }
+        // 对专题要素执行图形装载
+        thematicFeature.assembleShapes();
+        return thematicFeature;
+    }
+
+    /**
+     * @function Graph.prototype.drawCharts
+     * @description 绘制图表。包含压盖处理。
+     *
+     */
+    drawCharts() {
+        // 判断 rendere r就绪
+        if (!this.renderer) {
+            return;
+        }
+        var charts = this.charts;
+        // 图表权重值处理
+        if (this.overlayWeightField) {
+            charts.sort(function (cs, ce) {
+                if (typeof (cs["__overlayWeight"]) == "undefined" && typeof (ce["__overlayWeight"]) == "undefined") {
+                    return 0;
+                } else if (typeof (cs["__overlayWeight"]) != "undefined" && typeof (ce["__overlayWeight"]) == "undefined") {
+                    return -1;
+                } else if (typeof (cs["__overlayWeight"]) == "undefined" && typeof (ce["__overlayWeight"]) != "undefined") {
+                    return 1;
+                } else if (typeof (cs["__overlayWeight"]) != "undefined" && typeof (ce["__overlayWeight"]) != "undefined") {
+                    if (parseFloat(cs["__overlayWeight"]) < parseFloat(ce["__overlayWeight"])) {
+                        return 1;
+                    } else {
+                        return -1;
+                    }
+                }
+                return 0;
+            });
+        }
+        // 不进行避让
+        if (!this.isOverLay) {
+            for (var m = 0, len_m = charts.length; m < len_m; m++) {
+                var chart_m = charts[m];
+                // 图形参考位置  (reSetLocation 会更新 chartBounds)
+                var shapeROP_m = chart_m.resetLocation();
+                // 添加图形
+                var shapes_m = chart_m.shapes;
+                for (var n = 0, slen_n = shapes_m.length; n < slen_n; n++) {
+                    shapes_m[n].refOriginalPosition = shapeROP_m;
+                    this.renderer.addShape(shapes_m[n]);
+                }
+            }
+        } else {
+            // 压盖判断所需 chartsBounds 集合
+            var chartsBounds = [];
+            var extent = this.map.getView().calculateExtent();
+            var mapBounds = new Bounds(extent[0], extent[1], extent[2], extent[3]);
+            // 获取地图像素 bounds
+            var mapPxLT = this.getLocalXY(new LonLat(mapBounds.left, mapBounds.top));
+            var mapPxRB = this.getLocalXY(new LonLat(mapBounds.right, mapBounds.bottom));
+            var mBounds = new Bounds(mapPxLT[0], mapPxRB[1], mapPxRB[0], mapPxLT[1]);
+            // 压盖处理 & 添加图形
+            for (var i = 0, len = charts.length; i < len; i++) {
+                var chart = charts[i];
+                // 图形参考位置  (reSetLocation 会更新 chartBounds)
+                var shapeROP = chart.resetLocation();
+                // 图表框
+                var cbs = chart.chartBounds;
+                var cBounds = [{
+                    "x": cbs.left,
+                    "y": cbs.top
+                }, {
+                    "x": cbs.left,
+                    "y": cbs.bottom
+                }, {
+                    "x": cbs.right,
+                    "y": cbs.bottom
+                }, {
+                    "x": cbs.right,
+                    "y": cbs.top
+                }, {
+                    "x": cbs.left,
+                    "y": cbs.top
+                }];
+                // 地图范围外不绘制
+                if (mBounds) {
+                    if (!this.isChartInMap(mBounds, cBounds)) {
+                        continue;
+                    }
+                }
+                // 是否压盖
+                var isOL = false;
+                if (i !== 0) {
+                    for (let j = 0; j < chartsBounds.length; j++) {
+                        //压盖判断
+                        if (this.isQuadrilateralOverLap(cBounds, chartsBounds[j])) {
+                            isOL = true;
+                            break;
+                        }
+                    }
+                }
+                if (isOL) {
+                    continue;
+                } else {
+                    chartsBounds.push(cBounds);
+                }
+                // 添加图形
+                var shapes = chart.shapes;
+                for (let j = 0, slen = shapes.length; j < slen; j++) {
+                    shapes[j].refOriginalPosition = shapeROP;
+                    this.renderer.addShape(shapes[j]);
+                }
+            }
+        }
+        // 绘制图形
+        this.renderer.render();
+    }
+
+    /**
+     * @function Graph.prototype.getShapesByFeatureID
+     * @description  通过要素 ID 获取要素关联的所有图形。如果不传入此参数，函数将返回所有图形。
+     * @param {number} featureID - 要素 ID。
+     */
+    getShapesByFeatureID(featureID) {
+        var list = [];
+        var shapeList = this.renderer.getAllShapes();
+        if (!featureID) {
+            return shapeList
+        }
+        for (var i = 0, len = shapeList.length; i < len; i++) {
+            var si = shapeList[i];
+            if (si.refDataID && featureID === si.refDataID) {
+                list.push(si);
+            }
+        }
+        return list;
+    }
+
+    /**
+     * @function Graph.prototype.isQuadrilateralOverLap
+     * @description  判断两个四边形是否有压盖。
+     * @param {Array.<Object>} quadrilateral - 四边形节点数组。
+     * @param {Array.<Object>} quadrilateral2 - 第二个四边形节点数组。
+     */
+    isQuadrilateralOverLap(quadrilateral, quadrilateral2) {
+        var quadLen = quadrilateral.length,
+            quad2Len = quadrilateral2.length;
+        if (quadLen !== 5 || quad2Len !== 5) {
+            return null;
+        } //不是四边形
+
+        var OverLap = false;
+        //如果两四边形互不包含对方的节点，则两个四边形不相交
+        for (let i = 0; i < quadLen; i++) {
+            if (this.isPointInPoly(quadrilateral[i], quadrilateral2)) {
+                OverLap = true;
+                break;
+            }
+        }
+        for (let i = 0; i < quad2Len; i++) {
+            if (this.isPointInPoly(quadrilateral2[i], quadrilateral)) {
+                OverLap = true;
+                break;
+            }
+        }
+        //加上两矩形十字相交的情况
+        for (let i = 0; i < quadLen - 1; i++) {
+            if (OverLap) {
+                break;
+            }
+            for (let j = 0; j < quad2Len - 1; j++) {
+                var isLineIn = CommonUtil.lineIntersection(quadrilateral[i], quadrilateral[i + 1], quadrilateral2[j], quadrilateral2[j + 1]);
+                if (isLineIn.CLASS_NAME === "SuperMap.Geometry.Point") {
+                    OverLap = true;
+                    break;
+                }
+            }
+        }
+        return OverLap;
+    }
+
+    /**
+     * @function Graph.prototype.isPointInPoly
+     * @description  判断一个点是否在多边形里面（射线法）。
+     * @param {Object} pt - 需要判定的点对象，该对象含有属性 x（横坐标），属性 y（纵坐标）。
+     * @param {Array.<Object>} poly - 多边形节点数组。
+     */
+    isPointInPoly(pt, poly) {
+        for (var isIn = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) {
+            ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) &&
+            (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) &&
+            (isIn = !isIn);
+        }
+        return isIn;
+    }
+
+    /**
+     * @function Graph.prototype.isChartInMap
+     * @description  判断图表是否在地图里。
+     * @param {Bounds} mapPxBounds - 地图像素范围。
+     * @param {Array.<Object>} chartPxBounds - 图表范围的四边形节点数组。
+     */
+    isChartInMap(mapPxBounds, chartPxBounds) {
+        var mb = mapPxBounds;
+        var isIn = false;
+        for (var i = 0, len = chartPxBounds.length; i < len; i++) {
+            var cb = chartPxBounds[i];
+
+            if (cb.x >= mb.left && cb.x <= mb.right && cb.y >= mb.top && cb.y <= mb.bottom) {
+                isIn = true;
+                break;
+            }
+        }
+        return isIn;
+    }
+
+    /**
+     * @function Graph.prototype.clearCache
+     * @description  清除缓存。
+     */
+    clearCache() {
+        this.cache = {};
+        this.charts = [];
+    }
+
+    /**
+     * @function Graph.prototype.removeFeatures
+     * @description  从专题图中删除要素。这个函数删除所有传递进来的矢量要素。参数中的要素数组中的每一项，必须是已经添加到当前图层中的 feature。
+     * @param {Array.<FeatureVector>|FeatureVector|Function} features - 要删除的要素。
+     */
+    removeFeatures(features) {
+        this.clearCache();
+        super.removeFeatures(features);
+    }
+
+    /**
+     * @function Graph.prototype.removeAllFeatures
+     * @description  移除所有的要素。
+     */
+    removeAllFeatures() {
+        this.clearCache();
+        super.removeAllFeatures();
+    }
+
+    /**
+     * @function Graph.prototype.redraw
+     * @description  重绘该图层。
+     */
+    redraw() {
+        this.clearCache();
+        if (this.renderer) {
+            this.redrawThematicFeatures(this.map.getView().calculateExtent());
+            return true;
+        }
+        return false
+    }
+
+    /**
+     * @function Graph.prototype.clear
+     * @description  清除的内容包括数据（features）、专题要素、缓存。
+     */
+    clear() {
+        if (this.renderer) {
+            this.renderer.clearAll();
+            this.renderer.refresh();
+        }
+        this.removeAllFeatures();
+        this.clearCache();
+    }
+
+    canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) { // eslint-disable-line no-unused-vars
+        return Theme.prototype.canvasFunctionInternal_.apply(this, arguments);
+    }
+}

package/overlay/GraphMap.js

@@ -0,0 +1,140 @@
+/* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
+ * This program are made available under the terms of the Apache License, Version 2.0
+ * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
+import Observable from 'ol/Observable';
+import { KnowledgeGraphService } from '../services/KnowledgeGraphService';
+import { KnowledgeGraph } from '@supermapgis/iclient-common/overlay/KnowledgeGraph';
+import { transformExpandCollapseHiddenData } from '@supermapgis/iclient-common/overlay/knowledge-graph/format';
+
+/**
+ * @class GraphMap
+ * @classdesc 对接 SuperMap iServer GraphMap，即 SuperMap iServer 中的知识图谱图文档，此类提供了知识图谱的服务地址、配置项等参数。
+ * 配置项包括：知识图谱的尺寸、中心点、缩放比例、布局、节点配置、边配置、高亮样式、拖拽设置等参数。
+ * @category iServer KnowledgeGraph
+ * @version 11.1.0
+ * @param {string} serviceUrl - GraphMap 服务地址， 例如：http://{iserver}/services/{knowledgeGraph-provider}/restjsr/graph/graphmaps/{graphmap}。
+ * @param {Object} [options] - 参数。
+ * @param {KnowledgeGraph.Config} [options.config] - KnowledgeGraph 的配置项。
+ * @param {string} [options.proxy] - 服务代理地址。
+ * @param {boolean} [options.withCredentials=false] - 请求是否携带 cookie。
+ * @param {boolean} [options.crossOrigin] - 是否允许跨域请求。
+ * @param {Object} [options.headers] - 请求头。
+ * @fires GraphMap#loaded
+ * @extends {ol.Observable}
+ * @usage
+ */
+export class GraphMap extends Observable {
+  constructor(serviceUrl, options) {
+    super();
+    /**
+     * @member GraphMap.prototype.graph
+     * @description KnowledgeGraph 的实例。
+     *
+     */
+    this.graph = null;
+    /**
+     * @member GraphMap.prototype.EVENT_TYPES
+     * @description 监听一个自定义事件可用如下方式:
+     *
+     * 支持的事件如下:
+     * loaded - 渲染完成时触发。
+     */
+    this.EVENT_TYPES = ['loaded'];
+    this.url = serviceUrl;
+    this.options = options;
+    const graphMapName = serviceUrl.split('/').pop();
+    this.url = serviceUrl.replace(`/graphmaps/${graphMapName}`, '');
+    this.createGraphMap(graphMapName, options);
+  }
+
+  /**
+   * @private
+   * @function GraphMap.prototype.createGraphMap
+   * @description 创建图谱。
+   * @param {string} graphMapName - 图谱名称。
+   * @param {Object} options - 参数。
+   * @param {string} [options.proxy] - 服务代理地址。
+   * @param {boolean} [options.withCredentials=false] - 请求是否携带 cookie。
+   * @param {boolean} [options.crossOrigin] - 是否允许跨域请求。
+   * @param {Object} [options.headers] - 请求头。
+   * @param {KnowledgeGraph.Config} [options.config] - knowledgegraph 配置项。
+   */
+  async createGraphMap(graphMapName, options) {
+    this.knowledgeGraphService = this.createKnowledgeGraphService(this.url, options);
+    const res = await this.knowledgeGraphService.getGraphMapData(graphMapName);
+    const result = KnowledgeGraph.dataFromGraphMap(res.data, res.graphMap);
+    this.graph = new KnowledgeGraph(options && options.config);
+    this.graph.on('afterlayout', () => {
+      /**
+       * @event GraphMap#loaded
+       * @description 渲染完成时触发。
+       */
+      this.dispatchEvent(this.EVENT_TYPES[0]);
+    });
+    this.graph.setData(result);
+    this.graph.handleNodeStatus(transformExpandCollapseHiddenData(res.graphMap));
+  }
+
+  /**
+   * @private
+   * @function GraphMap.prototype.createKnowledgeGraphService
+   * @description 创建 KnowledgeGraphService 实例。
+   * @param {string} serviceUrl - GraphMap 服务地址，例如：http://{iserver}/services/knowledgeGraph-test/restjsr/graph
+   * @param {Object} options - 参数。
+   * @param {string} [options.proxy] - 服务代理地址。
+   * @param {boolean} [options.withCredentials=false] - 请求是否携带 cookie。
+   * @param {boolean} [options.crossOrigin] - 是否允许跨域请求。
+   * @param {Object} [options.headers] - 请求头。
+   */
+  createKnowledgeGraphService(serviceUrl, options) {
+    return new KnowledgeGraphService(serviceUrl, options);
+  }
+
+  /**
+   * @function GraphMap.prototype.findShortestPath
+   * @version 11.2.0
+   * @description 获取开始节点和结束节点之间的最短路径。（在渲染完成后调用）
+   * @param {GraphMap.findShortestPathParams} params - 参数。
+   * @param {RequestCallback} [callback] - 回调函数，该参数未传时可通过返回的 promise 获取结果。
+   * @returns {Promise} Promise 对象。
+   */
+  findShortestPath(params, callback) {
+    const { startID, endID, isHighlight = true, highlightStateStyles = {} } = params;
+    return this.knowledgeGraphService.findShortestPath({ startID, endID }, (res) => {
+      callback && callback(res);
+      if (isHighlight) {
+        if (res.type === 'processCompleted' && res.result.succeed) {
+          const { nodeIDs, edgeIDs } = res.result;
+          this.highlight({ nodeIDs, edgeIDs, ...highlightStateStyles });
+        } else {
+          alert(res.error.errorMsg, false);
+        }
+      }
+    });
+  }
+
+  /**
+   * @function GraphMap.prototype.highlight
+   * @version 11.2.0
+   * @description 高亮节点和边。（在渲染完成后调用）
+   * @param {KnowledgeGraph.highlightParams} params - 高亮参数。
+   */
+  highlight(params) {
+    if (!this.graph) {
+      return;
+    }
+    this.graph.highlight(params);
+  }
+  /**
+   * @function GraphMap.prototype.clearHighlight
+   * @version 11.2.0
+   * @description 取消高亮节点和边。（在渲染完成后调用）
+   * @param {KnowledgeGraph.clearHighlightParams} [params] - 取消高亮节点id数组和边id数组, 不传默认取消所有激活状态的高亮。
+   */
+  clearHighlight(params) {
+    if (!this.graph) {
+      return;
+    }
+    this.graph.clearHighlight(params);
+  }
+}