@supermapgis/iclient-ol 11.2.0

package/overlay/Mapv.js

@@ -0,0 +1,149 @@
+/* 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 {
+    MapvLayer
+} from './mapv/MapvLayer';
+import {
+    Util
+} from '../core/Util';
+import ImageCanvasSource from 'ol/source/ImageCanvas';
+
+/**
+ * @class Mapv
+ * @browsernamespace ol.source
+ * @category  Visualization MapV
+ * @classdesc MapV 图层源。MapV 是一款地理信息可视化开源库，MapV 图层可以用来展示大量地理信息数据，点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据。<br>
+ * 展示大量的点数据：如热力图、网格、蜂窝状、点聚合、按颜色区间、按半径大小等方式。<br>
+ * 展示大量的线数据：如普通画线、高亮叠加、热力线数据展示等方式，适合展示大量轨迹的场景。<br>
+ * 展示大量的自定义面数据：按颜色区间来展示，如展示行政区划数据。
+ * @modulecategory Overlay
+ * @param {Object} opt_options - 参数。
+ * @param {ol.Map} opt_options.map - 当前 OpenLayers 地图对象。
+ * @param {Mapv.DataSet} opt_options.dataSet - MapV 的数据集。
+ * @param {Object} opt_options.mapvOptions - MapV 的配置对象。
+ * @param {string} [opt_options.logo] - Logo（OpenLayers 5.0.0 及更高版本不再支持此参数）。
+ * @param {ol.proj.Projection} [opt_options.projection] - 投影信息。
+ * @param {number} [opt_options.ratio=1.5] - 视图比，1 表示画布是地图视口的大小，2 表示地图视口的宽度和高度的两倍，依此类推。必须是 1 或更高。
+ * @param {Array} [opt_options.resolutions] - 分辨率数组。
+ * @param {ol.source.State} [opt_options.state] - 资源状态。
+ * @param {(string|Object)} [opt_options.attributions='© 2018 百度 MapV with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>'] - 版权描述信息。
+ * @extends {ol.source.ImageCanvas}
+ * @usage
+ */
+export class Mapv extends ImageCanvasSource {
+
+    constructor(opt_options) {
+        var options = opt_options ? opt_options : {};
+        super({
+            attributions: options.attributions || "© 2018 百度 MapV with <span>© SuperMap iClient</span>",
+            canvasFunction: canvasFunctionInternal_,
+            logo: Util.getOlVersion() === '4' ? options.logo : null,
+            projection: options.projection,
+            ratio: options.ratio,
+            resolutions: options.resolutions,
+            state: options.state
+        });
+        this.map = opt_options.map;
+        this.dataSet = opt_options.dataSet;
+        this.mapvOptions = opt_options.mapvOptions;
+
+        function canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) { // eslint-disable-line no-unused-vars
+            var mapWidth = size[0] / pixelRatio;
+            var mapHeight = size[1] / pixelRatio;
+            var width = this.map.getSize()[0];
+            var height = this.map.getSize()[1];
+            if (!this.layer) {
+                this.layer = new MapvLayer(this.map, this.dataSet, this.mapvOptions, mapWidth, mapHeight, this);
+            }
+            this.layer.pixelRatio = pixelRatio;
+            this.layer.offset = [(mapWidth - width) / 2 , (mapHeight - height) / 2 ];
+            if (!this.rotate) {
+                this.rotate = this.map.getView().getRotation();
+            } else {
+                if (this.rotate !== this.map.getView().getRotation()) {
+                    this.layer.canvasLayer.resize(mapWidth, mapHeight);
+                    this.rotate = this.map.getView().getRotation()
+                }
+            }
+            var canvas = this.layer.canvasLayer.canvas;
+            if (!this.layer.isEnabledTime()) {
+                this.layer.canvasLayer.resize(mapWidth, mapHeight);
+                this.layer.canvasLayer.draw();
+            }
+            if (!this.context) {
+                this.context = Util.createCanvasContext2D(mapWidth, mapHeight);
+            }
+            var canvas2 = this.context.canvas;
+            this.context.clearRect(0, 0, canvas2.width, canvas2.height);
+            canvas2.width = size[0];
+            canvas2.height = size[1];
+            canvas2.style.width = size[0] + "px";
+            canvas2.style.height = size[1] + "px";
+            this.context.drawImage(canvas, 0, 0);
+            if (this.resolution !== resolution || JSON.stringify(this.extent) !== JSON.stringify(extent)) {
+                this.resolution = resolution;
+                this.extent = extent;
+            }
+            return this.context.canvas;
+        }
+    }
+
+    /**
+     * @function Mapv.prototype.addData
+     * @description 追加数据。
+     * @param {Object} data - 要追加的数据。
+     * @param {Object} options - 要追加的值。
+     */
+    addData(data, options) {
+        this.layer.addData(data, options);
+    }
+
+    /**
+     * @function Mapv.prototype.getData
+     * @description 获取数据。
+     * @returns {Mapv.DataSet} MapV 数据集。
+     */
+    getData() {
+        if (this.layer) {
+            this.dataSet = this.layer.getData();
+        }
+        return this.dataSet;
+    }
+
+    /**
+     * @function Mapv.prototype.removeData
+     * @description 删除符合过滤条件的数据。
+     * @param {function} filter - 过滤条件。条件参数为数据项，返回值为 true，表示删除该元素；否则表示不删除。
+     * @example
+     *  filter=function(data){
+     *    if(data.id=="1"){
+     *      return true
+     *    }
+     *    return false;
+     *  }
+     */
+    removeData(filter) {
+        this.layer && this.layer.removeData(filter);
+    }
+
+    /**
+     * @function Mapv.prototype.clearData
+     * @description 清除数据。
+     */
+    clearData() {
+        this.layer.clearData();
+    }
+
+
+    /**
+     * @function Mapv.prototype.update
+     * @description 更新数据。
+     * @param {Object} options - 待更新的数据。
+     * @param {Object} options.data - mapv 数据集。
+     */
+    update(options) {
+        this.layer.update(options);
+        this.changed();
+    }
+}

package/overlay/Range.js

@@ -0,0 +1,129 @@
+/* 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 { ShapeFactory } from '@supermapgis/iclient-common/overlay/feature/ShapeFactory';
+import { ThemeVector } from '@supermapgis/iclient-common/overlay/ThemeVector';
+import {GeoFeature} from './theme/GeoFeature';
+
+/**
+ * @class Range
+ * @browsernamespace ol.source
+ * @category  Visualization Theme
+ * @classdesc 分段专题图图层源。分段专题图是指按照某种分段方式被分成多个范围段，要素根据各自的专题值被分配到其中一个范围段中，
+ * 在同一个范围段中的要素使用相同的颜色，填充，符号等风格进行显示。 分段专题图所基于的专题变量必须为数值型，
+ * 分段专题图一般用来反映连续分布现象的数量或程度特征，如降水量的分布，土壤侵蚀强度的分布等。
+ * @param {string} name - 名称
+ * @param {Object} opt_options - 参数。
+ * @param {ol.Map} opt_options.map - 当前 OpenLayers 地图对象。
+ * @param {string} opt_options.themeField - 指定创建专题图字段。
+ * @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] - 投影信息。
+ * @param {number} [opt_options.ratio=1.5] - 视图比，1 表示画布是地图视口的大小，2 表示地图视口的宽度和高度的两倍，依此类推。必须是 1 或更高。
+ * @param {Array} [opt_options.resolutions] - 分辨率数组。
+ * @param {ol.source.State} [opt_options.state] - 资源状态。
+ * @param {Object} [opt_options.style] - 专题图样式。
+ * @param {Object} [opt_options.styleGroups] - 各专题类型样式组。
+ * @param {boolean} [opt_options.isHoverAble = false] - 是否开启 hover 事件。
+ * @param {Object} [opt_options.highlightStyle] - 开启 hover 事件后，触发的样式风格。
+ * @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 {GeoFeature}
+ * @usage
+ */
+export class Range extends GeoFeature {
+
+    constructor(name, opt_options) {
+        super(name, opt_options);
+        this.style = opt_options.style;
+        this.isHoverAble = opt_options.isHoverAble;
+        this.highlightStyle = opt_options.highlightStyle;
+        this.themeField = opt_options.themeField;
+        this.styleGroups = opt_options.styleGroups;
+    }
+
+    /**
+     * @function Range.prototype.destroy
+     * @description 释放资源，将引用资源的属性置空。
+     */
+    destroy() {
+        this.style = null;
+        this.themeField = null;
+        this.styleGroups = null;
+        GeoFeature.prototype.destroy.apply(this, arguments);
+    }
+
+    /**
+     * @private
+     * @function Range.prototype.createThematicFeature
+     * @description 创建专题图要素。
+     * @param {Object} feature - 要创建的专题图形要素。
+     */
+    createThematicFeature(feature) {
+        //赋 style
+        var style = this.getStyleByData(feature);
+        //创建专题要素时的可选参数
+        var options = {};
+        options.nodesClipPixel = this.nodesClipPixel;
+        options.isHoverAble = this.isHoverAble;
+        options.isMultiHover = this.isMultiHover;
+        options.isClickAble = this.isClickAble;
+        options.highlightStyle = ShapeFactory.transformStyle(this.highlightStyle);
+
+        //将数据转为专题要素（ThemeVector）
+        var thematicFeature = new ThemeVector(feature, this, ShapeFactory.transformStyle(style), options);
+
+        //直接添加图形到渲染器
+        for (var m = 0; m < thematicFeature.shapes.length; m++) {
+            this.renderer.addShape(thematicFeature.shapes[m]);
+        }
+
+        return thematicFeature;
+    }
+
+    /**
+     * @private
+     * @function Range.prototype.getStyleByData
+     * @description 通过数据获取 style。
+     * @param {Object} fea - 要素数据。
+     */
+    getStyleByData(fea) {
+        var style = {};
+        var feature = fea;
+        style = CommonUtil.copyAttributesWithClip(style, this.style);
+        if (this.themeField && this.styleGroups && this.styleGroups.length > 0 && feature.attributes) {
+            var Sf = this.themeField;
+            var Attrs = feature.attributes;
+            var Gro = this.styleGroups;
+            var isSfInAttrs = false; //指定的 themeField 是否是 feature 的属性字段之一
+            var attr = null; //属性值
+
+            for (var property in Attrs) {
+                if (Sf === property) {
+                    isSfInAttrs = true;
+                    attr = Attrs[property];
+                    break;
+                }
+            }
+            //判断属性值是否属于styleGroups的某一个范围，以便对获取分组 style
+            if (isSfInAttrs) {
+                for (var i = 0, len = Gro.length; i < len; i++) {
+                    if ((attr >= Gro[i].start) && (attr < Gro[i].end)) {
+                        //feature.style = Util.copyAttributes(feature.style, this.defaultStyle);
+                        var sty1 = Gro[i].style;
+                        style = CommonUtil.copyAttributesWithClip(style, sty1);
+                    }
+                }
+            }
+        }
+        if (feature.style && this.isAllowFeatureStyle === true) {
+            style = CommonUtil.copyAttributesWithClip(feature.style);
+        }
+        return style;
+    }
+
+    canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) { // eslint-disable-line no-unused-vars
+        return GeoFeature.prototype.canvasFunctionInternal_.apply(this, arguments);
+    }
+}

package/overlay/RankSymbol.js

@@ -0,0 +1,94 @@
+/* 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 { Theme as FeatureTheme } from '@supermapgis/iclient-common/overlay/feature/Theme';
+import {Graph} from './Graph';
+
+/**
+ * @class RankSymbol
+ * @browsernamespace ol.source
+ * @category  Visualization Theme
+ * @classdesc 等级符号专题图图层源。等级符号专题图根据各要素的某个数量特征，按照一定的分类方法用一组等级符号表示在地图上，以呈现要素间该数量特征的相对关系。
+ * @modulecategory Overlay
+ * @param {string} name - 专题图层名。
+ * @param {string} symbolType - 标志类型。
+ * @param {Object} opt_options - 参数。
+ * @param {ol.Map} opt_options.map - 当前 OpenLayers 地图对象。
+ * @param {string} opt_options.themeFields - 指定创建专题图字段。
+ * @param {Object} opt_options.symbolSetting - 符号 Circle 配置对象 symbolSetting（<{@link SuperMap.Layer.RankSymbol}>）。
+ * @param {Array.<number>} opt_options.symbolSetting.codomain - 图表允许展示的数据值域，长度为 2 的一维数组，第一个元素表示值域下限，第二个元素表示值域上限。
+ * @param {number} [opt_options.symbolSetting.maxR] - 圆形的最大半径。
+ * @param {number} [opt_options.symbolSetting.minR] - 圆形的最小半径。
+ * @param {string} [opt_options.symbolSetting.fillColor] - 圆形的填充色，如：fillColor: "#FFB980"。
+ * @param {Object} [opt_options.symbolSetting.circleStyle] - 圆形的基础 style，此参数控制圆形基础样式，优先级低于 circleStyleByFields 和 circleStyleByCodomain。
+ * @param {number} [opt_options.symbolSetting.decimalNumber] - 数据值数组 dataValues 元素值小数位数，数据的小数位处理参数，取值范围：[0, 16]。如果不设置此参数，在取数据值时不对数据做小数位处理。
+ * @param {Object} [opt_options.symbolSetting.circleHoverStyle] - 圆形 hover 状态时的样式，circleHoverAble 为 true 时有效。
+ * @param {boolean} [opt_options.symbolSetting.circleHoverAble=true] - 是否允许圆形使用 hover 状态。同时设置 circleHoverAble 和 circleClickAble 为 false，可以直接屏蔽图形对专题图层事件的响应。
+ * @param {boolean} [opt_options.symbolSetting.circleClickAble=true] - 是否允许圆形被点击。同时设置 circleHoverAble 和 circleClickAble 为 false，可以直接屏蔽图形对专题图层事件的响应。
+ * @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] - 投影信息。
+ * @param {number} [opt_options.ratio=1.5] - 视图比，1 表示画布是地图视口的大小，2 表示地图视口的宽度和高度的两倍，依此类推。必须是 1 或更高。
+ * @param {Array} [opt_options.resolutions] - 分辨率数组。
+ * @param {ol.source.State} [opt_options.state] - 资源状态。
+ * @param {boolean} [opt_options.isOverLay=true] - 是否进行压盖处理，如果设为 true，图表绘制过程中将隐藏对已在图层中绘制的图表产生压盖的图表。
+ * @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 {Graph}
+ * @usage
+ */
+export class RankSymbol extends Graph {
+
+    constructor(name, symbolType, opt_options) {
+        super(name, symbolType, opt_options);
+        this.symbolType = symbolType;
+        this.symbolSetting = opt_options.symbolSetting;
+        this.themeField = opt_options.themeField;
+    }
+
+    /**
+     * @function RankSymbol.prototype.destroy
+     * @description 释放资源，将引用资源的属性置空。
+     */
+    destroy() {
+        this.symbolType = null;
+        this.symbolSetting = null;
+        this.themeField = null;
+        Graph.prototype.destroy.apply(this, arguments);
+    }
+
+    /**
+     * @function RankSymbol.prototype.setSymbolType
+     * @description 设置标志符号。
+     * @param {string} symbolType - 符号类型。
+     */
+    setSymbolType(symbolType) {
+        this.symbolType = symbolType;
+        this.redraw();
+    }
+
+    /**
+     * @private
+     * @function RankSymbol.prototype.createThematicFeature
+     * @description 创建专题图形要素。
+     * @param {Object} feature - 要创建的专题图形要素。
+     */
+    createThematicFeature(feature) {
+        var thematicFeature;
+        // 检查图形创建条件并创建图形
+        if (FeatureTheme[this.symbolType] && this.themeField && this.symbolSetting) {
+            thematicFeature = new FeatureTheme[this.symbolType](feature, this, [this.themeField], this.symbolSetting);
+        }
+        // thematicFeature 是否创建成功
+        if (!thematicFeature) {
+            return false;
+        }
+        // 对专题要素执行图形装载
+        thematicFeature.assembleShapes();
+        return thematicFeature;
+    }
+
+    canvasFunctionInternal_(extent, resolution, pixelRatio, size, projection) { // eslint-disable-line no-unused-vars
+        return Graph.prototype.canvasFunctionInternal_.apply(this, arguments);
+    }
+}