How to use the @supermap/iclient-common.CommonUtil.extend function in @supermap/iclient-common

let size = this.getMapSize();

        let renderer = this.renderer || 'gl';
        let context;

        if (renderer === 'gl') {
            context = new WebGLRenderer({
                'canvas': this.canvas,
                'alpha': true,
                'antialias': true,
                'preserveDrawingBuffer': true
            }, this.options);
            context.autoClear = true;
            context.clear();
        } else {
            context = new CanvasRenderer(Util.extend({
                'canvas': this.canvas,
                'alpha': true
            }, this.options));
        }
        context.setClearColor(new Color(1, 1, 1), 0);
        context.canvas = this.canvas;
        this.context = context;

        let fov = map.transform.fov;
        let fovRatio = Math.tan(fov / 2 * RADIAN);
        let maxScale = this.getScale(projection.minZoom) / this.getScale(projection.nativeMaxZoom);
        let far = maxScale * size.height / 2 / fovRatio;

        this.camera = new PerspectiveCamera(fov, size.width / size.height, 1, far);
        this.scene = new Scene();
        this.scene.add(this.camera);

setStyle(styleOptions) {
    let self = this;
    let styleOpt = {
      color: self.color,
      radius: self.radius,
      opacity: self.opacity,
      highlightColor: self.highlightColor,
      radiusScale: self.radiusScale,
      radiusMinPixels: self.radiusMinPixels,
      radiusMaxPixels: self.radiusMaxPixels,
      strokeWidth: self.strokeWidth,
      outline: self.outline
    };

    CommonUtil.extend(self, CommonUtil.extend(styleOpt, styleOptions));
    self.update();
  }

getLabelInfo(location, style) {
        var LABEL_ALIGN = {
                "l": "left",
                "r": "right",
                "t": "top",
                "b": "bottom"
            },
            LABEL_FACTOR = {
                "l": 0,
                "r": -1,
                "t": 0,
                "b": -1
            };

        style = Util.extend({
            fontColor: "#000000",
            labelAlign: "cm"
        }, style);
        var pt = this.getLocalXY(location);
        var labelWidth = 0;

        if (style.labelXOffset || style.labelYOffset) {
            var xOffset = isNaN(style.labelXOffset) ? 0 : style.labelXOffset;
            var yOffset = isNaN(style.labelYOffset) ? 0 : style.labelYOffset;
            pt[0] += xOffset;
            pt[1] -= yOffset;
        }

        var canvas = document.createElement('canvas');
        canvas.globalAlpha = 0;
        canvas.lineWidth = 1;

getLabelInfo(location, style) {
        var LABEL_ALIGN = {
                "l": "left",
                "r": "right",
                "t": "top",
                "b": "bottom"
            },
            LABEL_FACTOR = {
                "l": 0,
                "r": -1,
                "t": 0,
                "b": -1
            };

        style = CommonUtil.extend({
            fontColor: "#000000",
            labelAlign: "cm"
        }, style);
        var pt = this.getLocalXY(location);
        var labelWidth = 0;

        if (style.labelXOffset || style.labelYOffset) {
            var xOffset = isNaN(style.labelXOffset) ? 0 : style.labelXOffset;
            var yOffset = isNaN(style.labelYOffset) ? 0 : style.labelYOffset;
            pt[0] += xOffset;
            pt[1] -= yOffset;
        }

        var canvas = document.createElement('canvas');
        canvas.globalAlpha = 0;
        canvas.lineWidth = 1;

function createRenderer(size, pixelRatio) {
      let renderer;
      if (me.render === Renderer[0]) {
        renderer = new GraphicCanvasRenderer(me, {
          size,
          pixelRatio
        });
      } else {
        let optDefault = CommonUtil.extend({}, defaultProps);
        let opt = CommonUtil.extend(optDefault, {
          color: me.color,
          opacity: me.opacity,
          radius: me.radius,
          radiusScale: me.radiusScale,
          radiusMinPixels: me.radiusMinPixels,
          radiusMaxPixels: me.radiusMaxPixels,
          strokeWidth: me.strokeWidth,
          outline: me.outline,
          onClick: me.onClick,
          onHover: me.onHover
        });
        opt = CommonUtil.extend(me, opt);
        opt.pixelRatio = pixelRatio;
        opt.container = me.map.getViewport().getElementsByClassName('ol-overlaycontainer')[0];
        opt.onBeforeRender = function () {
          return false;

constructor(layer, options) {
        super();
        this.layer = layer;
        this.map = layer.map;
        let opt = options || {};
        CommonUtil.extend(this, opt);

        let pixelRatio = this.pixelRatio = window ? window.devicePixelRatio : 1;

        this.width = this.map.getSize()[0] * pixelRatio;
        this.height = this.map.getSize()[1] * pixelRatio;
        this.center = this.map.getView().getCenter();
        this._initContainer();
        this._registerEvents();
    }

const layerObj = {};
        for (const item in layerStyles) {
            const layerStyle = layerStyles[item];
            layerObj[layerStyle.id] = layerStyle;
        }
        let count = 0;
        for (const key in this._mbStyle.layers) {
            const oldLayerStyle = this._mbStyle.layers[key];
            if (count >= layerStyles.length) {
                break;
            }
            const newLayerStyle = layerObj[oldLayerStyle.id];
            if (!newLayerStyle) {
                continue;
            }
            CommonUtil.extend(oldLayerStyle, newLayerStyle);
            count++;
        }
        this._createStyleFunction();
    }
    /**