@supermapgis/iclient-ol 11.2.0

package/overlay/VectorTileSuperMapRest.js

@@ -0,0 +1,501 @@
+/* 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 } from '../core/Util';
+import { SecurityManager } from '@supermapgis/iclient-common/security/SecurityManager';
+import { FetchRequest } from '@supermapgis/iclient-common/util/FetchRequest';
+import { getServiceKey } from '@supermapgis/iclient-common/util/EncryptRequest';
+import { Unit } from '@supermapgis/iclient-common/REST';
+import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
+import { Bounds } from '@supermapgis/iclient-common/commontypes/Bounds';
+import { Size } from '@supermapgis/iclient-common/commontypes/Size';
+import { Point as GeometryPoint } from '@supermapgis/iclient-common/commontypes/geometry/Point';
+import { VectorTileStyles } from './vectortile/VectorTileStyles';
+import VectorTile from 'ol/source/VectorTile';
+import MVT from 'ol/format/MVT';
+import GeoJSON from 'ol/format/GeoJSON';
+import * as olSize from 'ol/size';
+import Projection from 'ol/proj/Projection';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import decryptTileUtil from '@supermapgis/tile-decryptor';
+
+/**
+ * @class VectorTileSuperMapRest
+ * @browsernamespace ol.source
+ * @category  Visualization VectorTile
+ * @classdesc 矢量瓦片是将矢量数据通过不同的描述文件来组织和定义，在客户端实时解析数据并完成绘制。
+ * 矢量瓦片体积小，可高度压缩，数据传输体量小，地图更新的代价小，常用于存储用于查询、变更频繁的矢量图层，
+ * 适合于地图中对时效性要求较高的地物要素的表达，如 POI 信息、路线信息等。
+ * @modulecategory Overlay
+ * @param {Object} options - 参数。
+ * @param {(string|undefined)} options.url - 服务地址。
+ * @param {(string|Object|undefined)} options.style - Mapbox Style JSON 对象或获取 Mapbox Style JSON 对象的 URL。当 `options.format` 为 {@link ol.format.MVT} 且 `options.source` 不为空时有效，优先级高于 `options.url`。
+ * @param {(string|undefined)} options.source - Mapbox Style JSON 对象中的 source 名称。当 `options.style` 设置时有效。当不配置时，默认为 Mapbox Style JSON 的 `sources` 对象中的第一个。
+ * @param {(string|Object)} [options.attributions='Tile 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>'] - 版权描述信息。
+ * @param {Object} [options.format] - 瓦片的要素格式化。
+ * @param {boolean} [options.withCredentials] - 请求是否携带 cookie。
+ * @param {boolean|Function} [options.decrypt] - 瓦片解密。如果是 true 表示用内置的解密方法， 如 decrypt: true；如果是function 则是自定义解密如 decrypt: function ({ key, bytes })。
+ * @param {Function} [options.decryptCompletedFunction] - 解密完成后触发。如 decryptCompletedFunction(completeData)。
+ * @extends {ol.source.VectorTile}
+ * @usage
+ */
+export class VectorTileSuperMapRest extends VectorTile {
+    constructor(options) {
+        if (options.url === undefined && options.style === undefined) {
+            console.error("one of 'options.style' or 'options.style' is required");
+        }
+        var zRegEx = /\{z\}/g;
+        var xRegEx = /\{x\}/g;
+        var yRegEx = /\{y\}/g;
+        var dashYRegEx = /\{-y\}/g;
+
+        options.attributions =
+            options.attributions ||
+            "Tile Data <span>© SuperMap iServer</span> with <span>© SuperMap iClient</span>";
+        if (['4', '5'].indexOf(Util.getOlVersion()) < 0) {
+            options.tileSize = options.format instanceof MVT && options.style ? 512 : 256;
+        }
+        super({
+            attributions: options.attributions,
+            cacheSize: options.cacheSize,
+            format: options.format || new GeoJSON(),
+            logo: Util.getOlVersion() === '4' ? options.logo : null,
+            overlaps: options.overlaps,
+            projection: options.projection,
+            state:
+                options.format instanceof MVT
+                    ? 'loading'
+                    : options.state,
+            tileClass: options.tileClass,
+            tileGrid: options.tileGrid,
+            tilePixelRatio: options.tilePixelRatio,
+            tileUrlFunction: options.tileUrlFunction || (options.format instanceof MVT && options.style ? zxyTileUrlFunction : tileUrlFunction),
+            tileLoadFunction: options.tileLoadFunction || (options.format instanceof MVT ? mvtTileLoadFunction : tileLoadFunction),
+            wrapX: options.wrapX !== undefined ? options.wrapX : false,
+            tileSize: options.tileSize || null,
+            zDirection: ['4', '5'].indexOf(Util.getOlVersion()) > -1 ? null : 0
+        });
+        var me = this;
+        me.withCredentials = options.withCredentials;
+        me._tileType = options.tileType || 'ScaleXY';
+        this.vectorTileStyles = new VectorTileStyles();
+        this._initialized(options);
+
+        function tileUrlFunction(tileCoord, pixelRatio, projection) {
+            if (!me.tileGrid) {
+                me.tileGrid = me.getTileGridForProjection(projection);
+            }
+            var z = tileCoord[0];
+            var x = tileCoord[1];
+            var y = ['4', '5'].indexOf(Util.getOlVersion()) > -1 ? -tileCoord[2] - 1 : tileCoord[2];
+            var tileSize = olSize.toSize(me.tileGrid.getTileSize(z, me.tmpSize));
+            var params = '';
+            if (me.tileType === 'ZXY') {
+                params = '&width=' + tileSize[0] + '&height=' + tileSize[1] + '&x=' + x + '&y=' + y + '&z=' + z;
+            } else if (me.tileType === 'ViewBounds') {
+                var tileExtent = me.tileGrid.getTileCoordExtent(tileCoord);
+                params =
+                    '&width=' +
+                    tileSize[0] +
+                    '&height=' +
+                    tileSize[1] +
+                    '&viewBounds=' +
+                    tileExtent[0] +
+                    ',' +
+                    tileExtent[1] +
+                    ',' +
+                    tileExtent[2] +
+                    ',' +
+                    tileExtent[3];
+            } else {
+                var origin = me.tileGrid.getOrigin(z);
+                var resolution = me.tileGrid.getResolution(z);
+                var dpi = 96;
+                var unit = projection.getUnits() || 'degrees';
+
+                var scale = Util.resolutionToScale(resolution, dpi, unit);
+                params =
+                    '&x=' +
+                    x +
+                    '&y=' +
+                    y +
+                    '&width=' +
+                    tileSize[0] +
+                    '&height=' +
+                    tileSize[1] +
+                    '&scale=' +
+                    scale +
+                    "&origin={'x':" +
+                    origin[0] +
+                    ",'y':" +
+                    origin[1] +
+                    '}';
+            }
+            return me._tileUrl + encodeURI(params);
+        }
+
+        function zxyTileUrlFunction(tileCoord) {
+            if (!tileCoord) {
+                return undefined;
+            } else {
+                              return me._tileUrl
+                    .replace(zRegEx, tileCoord[0].toString())
+                    .replace(xRegEx, tileCoord[1].toString())
+                     .replace(yRegEx, function () {
+                        var y = ['4', '5'].indexOf(Util.getOlVersion()) > -1 ? -tileCoord[2] - 1 : tileCoord[2];
+                        return y.toString();
+                    })
+                    .replace(dashYRegEx, function () {
+                        var z = tileCoord[0];
+                        var range = me.tileGrid.getFullTileRange(z);
+                        var y = range.getHeight() + tileCoord[2];
+                        return y.toString();
+                    });
+            }
+        }
+        /**
+         * @private
+         * @function VectorTileSuperMapRest.prototype.tileLoadFunction
+         * @description 加载瓦片。
+         * @param {Object} tile -瓦片类。
+         * @param {string} tileUrl - 瓦片地址。
+         */
+        function tileLoadFunction(tile, tileUrl) {
+            var regWidth = new RegExp('(^|\\?|&)' + 'width' + '=([^&]*)(\\s|&|$)');
+            var regHeight = new RegExp('(^|\\?|&)' + 'height' + '=([^&]*)(\\s|&|$)');
+            var width = Number(tileUrl.match(regWidth)[2]);
+            var height = Number(tileUrl.match(regHeight)[2]);
+
+            tile.setLoader(function (extent, resolution, projection) {
+                FetchRequest.get(tileUrl)
+                    .then(function (response) {
+                        if (tile.getFormat() instanceof GeoJSON) {
+                            return response.json();
+                        }
+                    })
+                    .then(function (tileFeatureJson) {
+                        var features = [];
+                        if (tile.getFormat() instanceof GeoJSON) {
+                            tileFeatureJson.recordsets.map(function (recordset) {
+                                recordset.features.map(function (feature) {
+                                    var points = [];
+                                    var startIndex = 0;
+                                    for (var i = 0; i < feature.geometry.parts.length; i++) {
+                                        var partPointsLength = feature.geometry.parts[i] * 2;
+                                        for (var j = 0, index = startIndex; j < partPointsLength; j += 2, index += 2) {
+                                            points.push(
+                                                new GeometryPoint(
+                                                    feature.geometry.points[index],
+                                                    feature.geometry.points[index + 1]
+                                                )
+                                            );
+                                        }
+                                        startIndex += partPointsLength;
+                                    }
+                                    feature.geometry.points = points;
+                                    return feature;
+                                });
+                                return recordset;
+                            });
+                            tileFeatureJson.recordsets.map(function (recordset) {
+                                recordset.features.map(function (feature) {
+                                    feature.layerName = recordset.layerName;
+                                    feature.type = feature.geometry.type;
+                                    features.push(feature);
+                                    return feature;
+                                });
+                                return recordset;
+                            });
+
+                            let dataProjection = new Projection({
+                                extent: [0, 0, 256, 256],
+                                code: 'TILE_PIXELS',
+                                units: 'tile-pixels'
+                            });
+
+                            if (['4', '5'].indexOf(Util.getOlVersion()) > -1) {
+                                tile.setExtent([0, 0, width, height]);
+                                tile.setProjection(dataProjection);
+                                features = tile.getFormat().readFeatures(Util.toGeoJSON(features));
+                            } else {
+                                features = tile.getFormat().readFeatures(Util.toGeoJSON(features), {
+                                    extent,
+                                    dataProjection,
+                                    featureProjection: projection
+                                });
+                            }
+                            tile.setFeatures(features);
+                        }
+                    });
+            });
+        }
+        /**
+         * @private
+         * @function VectorTileSuperMapRest.prototype.tileLoadFunction
+         * @description 加载瓦片。
+         * @param {Object} tile -瓦片类。
+         * @param {string} tileUrl - 瓦片地址。
+         */
+        function mvtTileLoadFunction(tile, tileUrl) {
+            const format = tile.getFormat();
+            const success = tile.onLoad.bind(tile);
+            const failure = tile.onError.bind(tile);
+            tile.setLoader(function (extent, resolution, projection) {
+                const xhr = new XMLHttpRequest();
+                xhr.open(
+                    'GET',
+                    typeof tileUrl === 'function' ? tileUrl(extent, resolution, projection) : tileUrl,
+                    true
+                );
+                if (format.getType() == 'arraybuffer') {
+                    xhr.responseType = 'arraybuffer';
+                }
+                xhr.withCredentials = me.withCredentials;
+                xhr.onload = function () {
+                    if (!xhr.status || (xhr.status >= 200 && xhr.status < 300)) {
+                        const type = format.getType();
+                        let source = void 0;
+                        if (type === 'json' || type === 'text') {
+                            source = xhr.responseText;
+                        } else if (type === 'xml') {
+                            source = xhr.responseXML;
+                            if (!source) {
+                                source = new DOMParser().parseFromString(xhr.responseText, 'application/xml');
+                            }
+                        } else if (type === 'arraybuffer') {
+                            source = xhr.response;
+                        }
+                        if (source) {
+                            source = me._decryptMvt(source);
+                            if (['4', '5'].indexOf(Util.getOlVersion()) > -1) {
+                              success.call(
+                                  this,
+                                  format.readFeatures(source, { featureProjection: projection }),
+                                  format.readProjection(source),
+                                  format.getLastExtent()
+                              );
+                            } else {
+                                success.call(
+                                    this,
+                                    format.readFeatures(source, {
+                                        extent: extent,
+                                        featureProjection: projection
+                                    }),
+                                    format.readProjection(source)
+                                );
+                            }
+                        } else {
+                            failure.call(this);
+                        }
+                    } else {
+                        failure.call(this);
+                    }
+                }.bind(this);
+                xhr.onerror = function () {
+                    failure.call(this);
+                }.bind(this);
+                xhr.send();
+            });
+        }
+    }
+
+    async _initialized(options) {
+      if (options.format instanceof MVT && options.style) {
+          let style = options.style;
+          if (Object.prototype.toString.call(options.style) == '[object String]') {
+            var url = SecurityManager.appendCredential(options.style);
+            const response = await FetchRequest.get(url, null, { withCredentials: options.withCredentials })
+            style = await response.json();
+          }
+          this._fillByStyleJSON(style, options.source);
+      } else {
+          this._fillByRestMapOptions(options.url, options);
+      }
+      if (options.format instanceof MVT) {
+        if (options.decrypt) {
+          await this._verifyVectorTileIsEncrypt(options);
+        }
+        this.setState('ready');
+      }
+    }
+
+    _fillByStyleJSON(style, source) {
+        if (!source) {
+            source = Object.keys(style.sources)[0];
+        }
+        if (style.sources && style.sources[source]) {
+            //ToDo 支持多个tiles地址
+            this._tileUrl = SecurityManager.appendCredential(style.sources[source].tiles[0]);
+        }
+        if (style.metadata && style.metadata.indexbounds) {
+            const indexbounds = style.metadata.indexbounds;
+            var max = Math.max(indexbounds[2] - indexbounds[0], indexbounds[3] - indexbounds[1]);
+            const defaultResolutions = [];
+            for (let index = 0; index < 30; index++) {
+                defaultResolutions.push(max / 512 / Math.pow(2, index));
+            }
+            this.tileGrid = new TileGrid({
+                extent: style.metadata.indexbounds,
+                resolutions: defaultResolutions,
+                tileSize: [512, 512]
+            });
+        }
+    }
+    _fillByRestMapOptions(url, options) {
+        this._tileUrl = CommonUtil.urlPathAppend(options.url, 'tileFeature.json');
+        if (options.format instanceof MVT) {
+            this._tileUrl = CommonUtil.urlPathAppend(options.url, 'tileFeature.mvt');
+        }
+        //为url添加安全认证信息片段
+        this._tileUrl = SecurityManager.appendCredential(this._tileUrl);
+
+        var returnAttributes = true;
+        if (options.returnAttributes !== undefined) {
+            returnAttributes = options.returnAttributes;
+        }
+        var params = {};
+        params['returnAttributes'] = returnAttributes;
+        if (options._cache !== undefined) {
+            params['_cache'] = options._cache;
+        }
+        if (options.layersID !== undefined) {
+            params['layersID'] = options.layersID;
+        }
+        if (options.layerNames !== undefined) {
+            params['layerNames'] = options.layerNames;
+        }
+        if (options.expands !== undefined) {
+            params['expands'] = options.expands;
+        }
+        if (options.compressTolerance !== undefined) {
+            params['compressTolerance'] = options.compressTolerance;
+        }
+        if (options.coordinateType !== undefined) {
+            params['coordinateType'] = options.coordinateType;
+        }
+        if (options.returnCutEdges !== undefined) {
+            params['returnCutEdges'] = options.returnCutEdges;
+        }
+        this._tileUrl = CommonUtil.urlAppend(this._tileUrl, CommonUtil.getParameterString(params));
+    }
+
+    async _verifyVectorTileIsEncrypt(options) {
+      try {
+        let serviceUrl = options.url || typeof options.style === 'string' && options.style;
+
+        if (!serviceUrl && Object.prototype.toString.call(options.style) == '[object Object]') {
+          const firstSource = Object.keys(options.style.sources)[0];
+          serviceUrl = options.style.sources[firstSource].tiles[0];
+        }
+        const res = await getServiceKey(serviceUrl);
+        if (res) {
+          this.decryptOptions = {
+            key: res.serviceKey,
+            algorithm: res.algorithm,
+            decrypt: typeof options.decrypt === 'boolean' ? undefined : options.decrypt,
+            decryptCompletedFunction: options.decryptCompletedFunction
+          };
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    _decryptMvt(mvtData) {
+      if (this.decryptOptions) {
+        return decryptTileUtil({ ...this.decryptOptions, arrayBuffer: mvtData });
+      }
+      return mvtData;
+    }
+
+    /**
+     * @function VectorTileSuperMapRest.optionsFromMapJSON
+     * @param {string} url - 地址。
+     * @param {Object} mapJSONObj - 地图 JSON。
+     * @description 获取地图 JSON 信息。
+     */
+    static optionsFromMapJSON(url, mapJSONObj) {
+        var options = {};
+        options.url = url;
+        options.crossOrigin = 'anonymous';
+        var extent = [mapJSONObj.bounds.left, mapJSONObj.bounds.bottom, mapJSONObj.bounds.right, mapJSONObj.bounds.top];
+        var resolutions = getResolutions();
+
+        function getResolutions() {
+            var level = 17;
+            var dpi = 96;
+            var width = extent[2] - extent[0];
+            var height = extent[3] - extent[1];
+            var tileSize = width >= height ? width : height;
+            var maxReolution;
+            if (tileSize === width) {
+                maxReolution = tileSize / mapJSONObj.viewer.width;
+            } else {
+                maxReolution = tileSize / mapJSONObj.viewer.height;
+            }
+            var resolutions = [];
+            var unit = Unit.METER;
+            if (mapJSONObj.coordUnit === Unit.DEGREE) {
+                unit = Unit.DEGREE;
+            }
+            if (mapJSONObj.visibleScales.length > 0) {
+                var scales = initScales(mapJSONObj);
+                for (let i = 0; i < scales.length; i++) {
+                    resolutions.push(Util.scaleToResolution(scales[i], dpi, unit));
+                }
+            } else {
+                for (let i = 0; i < level; i++) {
+                    resolutions.push(maxReolution / Math.pow(2, i));
+                }
+            }
+            return resolutions;
+        }
+
+        function initScales(mapJSONObj) {
+            var scales = mapJSONObj.visibleScales;
+            if (!scales) {
+                return null;
+            }
+            var viewBounds = mapJSONObj.viewBounds,
+                coordUnit = mapJSONObj.coordUnit,
+                viewer = mapJSONObj.viewer,
+                scale = mapJSONObj.scale,
+                datumAxis = mapJSONObj.datumAxis;
+            //将jsonObject转化为SuperMap.Bounds，用于计算dpi。
+            viewBounds = new Bounds(viewBounds.left, viewBounds.bottom, viewBounds.right, viewBounds.top);
+            viewer = new Size(viewer.rightBottom.x, viewer.rightBottom.y);
+            coordUnit = coordUnit.toLowerCase();
+            datumAxis = datumAxis || 6378137;
+            var units = coordUnit;
+            var dpi = CommonUtil.calculateDpi(viewBounds, viewer, scale, units, datumAxis);
+            var resolutions = _resolutionsFromScales(scales);
+            var len = resolutions.length;
+            scales = [len];
+            for (var i = 0; i < len; i++) {
+                scales[i] = CommonUtil.getScaleFromResolutionDpi(resolutions[i], dpi, units, datumAxis);
+            }
+
+            function _resolutionsFromScales(scales) {
+                if (scales === null) {
+                    return;
+                }
+                var resolutions, len;
+                len = scales.length;
+                resolutions = [len];
+                for (var i = 0; i < len; i++) {
+                    resolutions[i] = CommonUtil.getResolutionFromScaleDpi(scales[i], dpi, units, datumAxis);
+                }
+                return resolutions;
+            }
+
+            return scales;
+        }
+
+        options.tileGrid = new TileGrid({
+            extent: extent,
+            resolutions: resolutions
+        });
+        //options.projection = 'EPSG:' + mapJSONObj.prjCoordSys.epsgCode;
+        return options;
+    }
+}

package/overlay/graphic/CanvasRenderer.js

@@ -0,0 +1,177 @@
+/* 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 { Util } from '../../core/Util';
+import olObject from 'ol/Object';
+import * as olStyle from 'ol/style';
+import Point from 'ol/geom/Point';
+import * as olRender from 'ol/render';
+
+//获取某像素坐标点pixelP相对于中心center进行缩放scaleRatio倍后的像素点坐标。
+function scale(pixelP, center, scaleRatio) {
+    let x = (pixelP[0] - center[0]) * scaleRatio + center[0];
+    let y = (pixelP[1] - center[1]) * scaleRatio + center[1];
+    return [x, y];
+}
+
+/**
+ * @private
+ * @class GraphicCanvasRenderer
+ * @classdesc 高效率点图层 canvas 渲染器。
+ * @category Visualization Graphic
+ * @extends {ol.Object}
+ * @param {Graphic} layer - 高效率点图层。
+ * @param {Object} options - 图层参数。
+ * @param {number} options.width - 地图宽度。
+ * @param {number} options.height - 地图高度。
+ * @param {HTMLElement} options.container - 放置渲染器的父元素。
+ * @param {Array.<number>} [options.colo=[0, 0, 0, 255]] - 颜色，目前只支持 rgba 数组。默认[0, 0, 0, 255],
+ * @param {number} [options.radius=10] - 半径。
+ * @param {number} [options.opacity=0.8] - 不透明度。
+ * @param {Array}  [options.highlightColor] - 高亮颜色，目前只支持 rgba 数组。
+ * @param {number} [options.radiusScale] - 点放大倍数。
+ * @param {number} [options.radiusMinPixels] - 半径最小值，单位为像素。
+ * @param {number} [options.radiusMaxPixels] - 半径最大值，单位为像素。
+ * @param {number} [options.strokeWidth] - 边框大小。
+ * @param {boolean} [options.outline] - 是否显示边框。
+ * @param {function} [options.onClick] - 点击事件。
+ * @param {function} [options.onHover] - 悬停事件。
+ */
+export class GraphicCanvasRenderer extends olObject {
+    constructor(layer, options) {
+        super();
+        this.layer = layer;
+        this.map = layer.map;
+        let opt = options || {};
+        CommonUtil.extend(this, opt);
+        this.highLightStyle = this.layer.highLightStyle;
+
+        this.mapWidth = this.size[0] / this.pixelRatio;
+        this.mapHeight = this.size[1] / this.pixelRatio;
+        this.width = this.map.getSize()[0];
+        this.height = this.map.getSize()[1];
+        this.context = Util.createCanvasContext2D(this.mapWidth, this.mapHeight);
+        this.context.scale(this.pixelRatio, this.pixelRatio);
+        this.canvas = this.context.canvas;
+        this.canvas.style.width = this.width + 'px';
+        this.canvas.style.height = this.height + 'px';
+        this._registerEvents();
+    }
+
+    _registerEvents() {
+        this.map.on('change:size', this._resizeEvent.bind(this), this);
+    }
+
+    _resizeEvent() {
+        this._resize();
+        this._clearAndRedraw();
+    }
+
+    _resize() {
+        let size = this.map.getSize();
+        let width = size[0];
+        let height = size[1];
+        let xRatio = width / this.width;
+        let yRatio = height / this.height;
+        this.width = width;
+        this.height = height;
+        this.mapWidth = this.mapWidth * xRatio;
+        this.mapHeight = this.mapHeight * yRatio;
+        this.canvas.width = this.mapWidth;
+        this.canvas.height = this.mapHeight;
+        this.canvas.style.width = this.width + 'px';
+        this.canvas.style.height = this.height + 'px';
+    }
+
+    _clearAndRedraw() {
+        this._clearBuffer();
+        this.layer.changed();
+    }
+
+    update() {
+        this.layer.changed();
+    }
+
+    _clearBuffer() {}
+
+    /**
+     * @private
+     * @function GraphicCanvasRenderer.prototype.getCanvas
+     * @description 返回画布。
+     * @returns {HTMLCanvasElement} canvas 对象。
+     */
+    getCanvas() {
+        return this.canvas;
+    }
+
+    /**
+     * @private
+     * @function GraphicCanvasRenderer.prototype.drawGraphics
+     * @description 绘制点要素。
+     */
+    drawGraphics(graphics) {
+        this.graphics_ = graphics || [];
+        let mapWidth = this.mapWidth;
+        let mapHeight = this.mapHeight;
+
+        let vectorContext = olRender.toContext(this.context, {
+            size: [mapWidth, mapHeight],
+            pixelRatio: this.pixelRatio
+        });
+        let defaultStyle = this.layer._getDefaultStyle();
+        let me = this,
+            layer = me.layer,
+            map = layer.map;
+        graphics.map(function (graphic) {
+            let style = graphic.getStyle() || defaultStyle;
+            if (me.selected === graphic) {
+                let defaultHighLightStyle = style;
+                if (style instanceof olStyle.Circle) {
+                    defaultHighLightStyle = new olStyle.Circle({
+                        radius: style.getRadius(),
+                        fill: new olStyle.Fill({
+                            color: 'rgba(0, 153, 255, 1)'
+                        }),
+                        stroke: style.getStroke(),
+                        snapToPixel: Util.getOlVersion() === '4' ? style.getSnapToPixel() : null
+                    });
+                } else if (style instanceof olStyle.RegularShape) {
+                    defaultHighLightStyle = new olStyle.RegularShape({
+                        radius: style.getRadius(),
+                        radius2: style.getRadius2(),
+                        points: style.getPoints(),
+                        angle: style.getAngle(),
+                        snapToPixel: Util.getOlVersion() === '4' ? style.getSnapToPixel() : null,
+                        rotation: style.getRotation(),
+                        rotateWithView: style.getRotateWithView(),
+                        fill: new olStyle.Fill({
+                            color: 'rgba(0, 153, 255, 1)'
+                        }),
+                        stroke: style.getStroke()
+                    });
+                }
+                style = me.highLightStyle || defaultHighLightStyle;
+            }
+            vectorContext.setStyle(
+                new olStyle.Style({
+                    image: style
+                })
+            );
+            let geometry = graphic.getGeometry();
+            let coordinate = geometry.getCoordinates();
+            let center = map.getView().getCenter();
+            let mapCenterPx = map.getPixelFromCoordinate(center);
+            let resolution = map.getView().getResolution();
+            let x = (coordinate[0] - center[0]) / resolution;
+            let y = (center[1] - coordinate[1]) / resolution;
+            let scaledP = [x + mapCenterPx[0], y + mapCenterPx[1]];
+            scaledP = scale(scaledP, mapCenterPx, 1);
+            //处理放大或缩小级别*/
+            let result = [scaledP[0] + me.offset[0], scaledP[1] + me.offset[1]];
+            let pixelGeometry = new Point(result);
+            vectorContext.drawGeometry(pixelGeometry);
+            return graphic;
+        });
+    }
+}