@supermapgis/iclient-ol 11.2.0

package/index.js

@@ -0,0 +1,9 @@
+/* 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.*/
+export * from '@supermapgis/iclient-common/index.common';
+export * from './control';
+export * from './core';
+export * from './mapping';
+export * from './overlay';
+export * from './services';

package/mapping/BaiduMap.js

@@ -0,0 +1,121 @@
+/* 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 TileImage from 'ol/source/TileImage';
+import * as asserts from 'ol/asserts';
+import TileGrid from 'ol/tilegrid/TileGrid';
+import { Util } from '../core/Util';
+
+/**
+ * @class BaiduMap
+ * @browsernamespace ol.source
+ * @category  ThirdPartyMap
+ * @classdesc 百度地图图层源。
+ * @modulecategory Mapping
+ * @param {Object} opt_options - 参数。
+ * @param {string} [opt_options.url='https://maponline{num}.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles={styles}&udt=20170408'] - 服务地址。
+ * @param {string} [opt_options.tileProxy] - 代理地址。
+ * @param {boolean} [hidpi = false] - 是否使用高分辨率地图。
+ * @extends {ol.source.TileImage}
+ * @usage
+ */
+export class BaiduMap extends TileImage {
+    constructor(opt_options) {
+        var options = opt_options || {};
+        var attributions =
+            options.attributions ||
+            "Map Data © 2018 Baidu - GS(2016)2089号 - Data © 长地万方 with <span>© SuperMap iClient</span>";
+        var tileGrid = BaiduMap.defaultTileGrid();
+        var crossOrigin = options.crossOrigin !== undefined ? options.crossOrigin : 'anonymous';
+
+        var url =
+            options.url !== undefined
+                ? options.url
+                : 'https://maponline{num}.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles={styles}&udt=20170408';
+        var hidpi =
+            options.hidpi || (window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI) > 1;
+        url = url.replace('{styles}', hidpi ? 'ph' : 'pl');
+        super({
+            attributions: attributions,
+            cacheSize: options.cacheSize,
+            crossOrigin: crossOrigin,
+            opaque: options.opaque !== undefined ? options.opaque : true,
+            maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19,
+            reprojectionErrorThreshold: options.reprojectionErrorThreshold,
+            tileLoadFunction: options.tileLoadFunction,
+            projection: 'EPSG:3857',
+            wrapX: options.wrapX,
+            tilePixelRatio: hidpi ? 2 : 1,
+            tileGrid: tileGrid,
+            tileUrlFunction: tileUrlFunction
+        });
+
+        if (options.tileProxy) {
+            this.tileProxy = options.tileProxy;
+        }
+        var me = this;
+
+        // eslint-disable-next-line no-unused-vars
+        function tileUrlFunction(tileCoord, pixelRatio, projection) {
+            var tempUrl = url
+                .replace('{num}', Math.abs((tileCoord[1] + tileCoord[2]) % 4))
+                .replace('{z}', tileCoord[0].toString())
+                .replace('{x}', tileCoord[1].toString())
+                .replace('{y}', function() {
+                    console.log(Util.getOlVersion());
+                    var y = ['4', '5'].indexOf(Util.getOlVersion()) > -1 ? tileCoord[2] : -tileCoord[2] - 1;
+                    return y.toString();
+                })
+                .replace('{-y}', function() {
+                    var z = tileCoord[0];
+                    var range = tileGrid.getFullTileRange(z);
+                    asserts.assert(range, 55); // The {-y} placeholder requires a tile grid with extent
+                    var y = range.getHeight() + tileCoord[2];
+                    return y.toString();
+                });
+
+            //支持代理
+            if (me.tileProxy) {
+                tempUrl = me.tileProxy + encodeURIComponent(tempUrl);
+            }
+            return tempUrl;
+        }
+    }
+
+    // TODO 确认这个方法是否要开出去
+    /**
+     * @function BaiduMap.defaultTileGrid
+     * @description 获取默认瓦片格网。
+     * @returns {ol.tilegrid.TileGrid} 返回瓦片格网对象。
+     */
+    static defaultTileGrid() {
+        var tileGird = new TileGrid({
+            extent: [-33554432, -33554432, 33554432, 33554432],
+            resolutions: [
+                131072 * 2,
+                131072,
+                65536,
+                32768,
+                16284,
+                8192,
+                4096,
+                2048,
+                1024,
+                512,
+                256,
+                128,
+                64,
+                32,
+                16,
+                8,
+                4,
+                2,
+                1,
+                0.5
+            ],
+            origin: [0, 0],
+            minZoom: 3
+        });
+        return tileGird;
+    }
+}

package/mapping/ImageSuperMapRest.js

@@ -0,0 +1,252 @@
+/* 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 { SecurityManager } from '@supermapgis/iclient-common/security/SecurityManager';
+import { Unit } from '@supermapgis/iclient-common/REST';
+import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
+import { ServerGeometry } from '@supermapgis/iclient-common/iServer/ServerGeometry';
+import { Util } from '../core/Util';
+import ImageSource, { defaultImageLoadFunction } from 'ol/source/Image';
+import ImageWrapper from 'ol/Image';
+import Geometry from 'ol/geom/Geometry';
+import GeoJSON from 'ol/format/GeoJSON';
+import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } from 'ol/extent';
+
+/**
+ * @class ImageSuperMapRest
+ * @browsernamespace ol.source
+ * @category iServer Map Tile
+ * @classdesc SuperMap iServer Image 图层源。
+ * @modulecategory Mapping
+ * @param {Object} options - 参数。
+ * @param {string} options.url - 地图服务地址,例如: http://{ip}:{port}/iserver/services/map-world/rest/maps/World。
+ * @param {ServerType} [options.serverType=SuperMap.ServerType.ISERVER] - 服务类型 ISERVER|IPORTAL|ONLINE。
+ * @param {boolean} [options.redirect=false] - 是否重定向。
+ * @param {boolean} [options.transparent=true] - 瓦片是否透明。
+ * @param {boolean} [options.antialias=false] - 是否反走样地图。
+ * @param {boolean} [options.cacheEnabled=true] - 是否使用服务端的缓存，true 表示使用服务端的缓存。
+ * @param {Object} [options.prjCoordSys] - 请求的地图的坐标参考系统。当此参数设置的坐标系统不同于地图的原有坐标系统时，系统会进行动态投影，并返回动态投影后的地图瓦片。例如：{"epsgCode":3857}。
+ * @param {string} [options.layersID] - 获取进行切片的地图图层 ID，即指定进行地图切片的图层，可以是临时图层集，也可以是当前地图中图层的组合。
+ * @param {boolean} [options.clipRegionEnabled = false] - 是否地图只显示该区域覆盖的部分。true 表示地图只显示该区域覆盖的部分。
+ * @param {ol.geom.Geometry} [options.clipRegion] - 地图显示裁剪的区域。是一个面对象，当 clipRegionEnabled = true 时有效，即地图只显示该区域覆盖的部分。
+ * @param {boolean} [options.overlapDisplayed=false] - 地图对象在同一范围内时，是否重叠显示。如果为 true，则同一范围内的对象会直接压盖；如果为 false 则通过 overlapDisplayedOptions 控制对象不压盖显示。
+ * @param {OverlapDisplayedOptions} [options.overlapDisplayedOptions] - 避免地图对象压盖显示的过滤选项，当 overlapDisplayed 为 false 时有效，用来增强对地图对象压盖时的处理。
+ * @param {boolean} [options.markerAngleFixed=false] - 指定点状符号的角度是否固定。
+ * @param {boolean} [options.textAngleFixed=false] - 文本角度是否固定。
+ * @param {boolean} [options.textOrientationFixed=false] - 文本朝向是否固定。
+ * @param {boolean} [options.paintBackground=false] - 是否绘制地图背景。
+ * @param {boolean} [options.maxVisibleTextSize] - 文本的最大可见尺寸，单位为像素。
+ * @param {boolean} [options.maxVisibleVertex] - 最大几何对象可见节点数。如果几何对象的节点数超过指定的个数，则超过的那部分节点不显示。
+ * @param {boolean} [options.minVisibleTextSize] - 文本的最小可见尺寸，单位为像素。
+ * @param {string} [options.tileversion] - 切片版本名称，_cache 为 true 时有效。
+ * @param {string} [options.tileProxy] - 代理地址。
+ * @param {NDVIParameter|HillshadeParameter} [options.rasterfunction] - 栅格分析参数。
+ * @param {string} [options.format = 'png'] - 瓦片表述类型，支持 "png" 、"webp"、"bmp" 、"jpg"、"gif" 等图片类型。
+ * @param {Function} [options.imageLoadFunction] - 加载图片的方法。默认为function(imageTile, src) {imageTile.getImage().src = src;};
+ * @param {string} [options.ratio=1.5] - 	请求图片大小比例。 1 表示请求图片大小和地图视窗范围一致，2 表示请求图片大小是地图视窗范围的2倍，以此类推。
+ * @extends {ol.source.Image}
+ * @usage
+ */
+ export class ImageSuperMapRest extends ImageSource {
+  constructor(options) {
+    super({
+      attributions: options.attributions,
+      imageSmoothing: options.imageSmoothing,
+      projection: options.projection,
+      resolutions: options.resolutions
+    });
+    if (options.url === undefined) {
+      return;
+    }
+    this.imageLoadFunction_ =
+      options.imageLoadFunction !== undefined ? options.imageLoadFunction : defaultImageLoadFunction;
+    this._image = null;
+    this.renderedRevision_ = 0;
+    this._crossOrigin = options.crossOrigin !== undefined ? options.crossOrigin : null;
+    this._url = options.url;
+    this.ratio_ = options.ratio !== undefined ? options.ratio : 1.5;
+
+    options.attributions =
+      options.attributions ||
+      "Map Data <span>© SuperMap iServer</span> with © SuperMap iClient";
+
+    options.format = options.format ? options.format : 'png';
+    this._layerUrl = CommonUtil.urlPathAppend(options.url, 'image.' + options.format);
+    //为url添加安全认证信息片段
+    this._layerUrl = SecurityManager.appendCredential(this._layerUrl);
+
+    const params = {};
+    //切片是否透明
+    const transparent = options.transparent !== undefined ? options.transparent : true;
+    params['transparent'] = transparent;
+
+    //是否使用缓存吗，默认为true
+    const cacheEnabled = options.cacheEnabled !== undefined ? options.cacheEnabled : true;
+    params['cacheEnabled'] = cacheEnabled;
+
+    //如果有layersID，则是在使用专题图
+    if (options.layersID !== undefined) {
+      params['layersID'] = options.layersID;
+    }
+    //是否重定向,默认为false
+    let redirect = false;
+    if (options.redirect !== undefined) {
+      redirect = options.redirect;
+    }
+    params['redirect'] = redirect;
+
+    if (options.prjCoordSys) {
+      params['prjCoordSys'] = JSON.stringify(options.prjCoordSys);
+    }
+    if (options.clipRegionEnabled && options.clipRegion instanceof Geometry) {
+      options.clipRegion = Util.toSuperMapGeometry(new GeoJSON().writeGeometryObject(options.clipRegion));
+      options.clipRegion = CommonUtil.toJSON(ServerGeometry.fromGeometry(options.clipRegion));
+      params['clipRegionEnabled'] = options.clipRegionEnabled;
+      params['clipRegion'] = JSON.stringify(options.clipRegion);
+    }
+    if (!!options.overlapDisplayed && options.overlapDisplayedOptions) {
+      // options.overlapDisplayedOptions = options.overlapDisplayedOptions;
+      params['overlapDisplayed'] = options.overlapDisplayed;
+      params['overlapDisplayedOptions'] = options.overlapDisplayedOptions.toString();
+    }
+    if (cacheEnabled === true && options.tileversion) {
+      params['tileversion'] = options.tileversion;
+    }
+    if (options.rasterfunction) {
+      params['rasterfunction'] = JSON.stringify(options.rasterfunction);
+    }
+    //是否反走样地图,默认为false
+    if (options.antialias !== undefined) {
+      params['antialias'] = options.antialias;
+    }
+    if (options.markerAngleFixed !== undefined) {
+      params['markerAngleFixed'] = options.markerAngleFixed;
+    }
+    if (options.textAngleFixed !== undefined) {
+      params['textAngleFixed'] = options.textAngleFixed;
+    }
+    if (options.textOrientationFixed !== undefined) {
+      params['textOrientationFixed'] = options.textOrientationFixed;
+    }
+    if (options.paintBackground !== undefined) {
+      params['paintBackground'] = options.paintBackground;
+    }
+    if (!isNaN(options.maxVisibleTextSize)) {
+      params['maxVisibleTextSize'] = +options.maxVisibleTextSize;
+    }
+    if (!isNaN(options.minVisibleTextSize)) {
+      params['maxVisibleTextSize'] = +options.minVisibleTextSize;
+    }
+    if (!isNaN(options.maxVisibleVertex)) {
+      params['maxVisibleVertex'] = Math.round(+options.maxVisibleVertex);
+    }
+
+    this._layerUrl = CommonUtil.urlAppend(this._layerUrl, CommonUtil.getParameterString(params));
+
+    //存储一个cacheEnabled
+    this.cacheEnabled = cacheEnabled;
+
+    if (options.tileProxy) {
+      this.tileProxy = options.tileProxy;
+    }
+  }
+  getImageInternal(extent, resolution, pixelRatio) {
+    resolution = this.findNearestResolution(resolution);
+    const imageResolution = resolution / pixelRatio;
+    const center = getCenter(extent);
+    const viewWidth = Math.ceil(getWidth(extent) / imageResolution);
+    const viewHeight = Math.ceil(getHeight(extent) / imageResolution);
+    const viewExtent = getForViewAndSize(center, imageResolution, 0, [viewWidth, viewHeight]);
+    const requestWidth = Math.ceil((this.ratio_ * getWidth(extent)) / imageResolution);
+    const requestHeight = Math.ceil((this.ratio_ * getHeight(extent)) / imageResolution);
+    const requestExtent = getForViewAndSize(center, imageResolution, 0, [requestWidth, requestHeight]);
+    const image = this._image;
+    if (
+      image &&
+      this.renderedRevision_ === this.getRevision() &&
+      image.getResolution() === resolution &&
+      image.getPixelRatio() === pixelRatio &&
+      containsExtent(image.getExtent(), viewExtent)
+    ) {
+      return image;
+    }
+    const imageSize = [
+      Math.round(getWidth(requestExtent) / imageResolution),
+      Math.round(getHeight(requestExtent) / imageResolution)
+    ];
+    const imageUrl = this._getRequestUrl(requestExtent, imageSize);
+    this._image = new ImageWrapper(
+      requestExtent,
+      resolution,
+      pixelRatio,
+      imageUrl,
+      this._crossOrigin,
+      this.imageLoadFunction_
+    );
+    this.renderedRevision_ = this.getRevision();
+    this._image.addEventListener('change', this.handleImageChange.bind(this));
+    return this._image;
+  }
+  _getRequestUrl(extent, imageSize) {
+    const params = {
+      width: imageSize[0],
+      height: imageSize[1],
+      viewBounds: { leftBottom: { x: extent[0], y: extent[1] }, rightTop: { x: extent[2], y: extent[3] } }
+    };
+    //不启用缓存时启用时间戳
+    if (!this.cacheEnabled) {
+      params['_t'] = new Date().getTime();
+    }
+    let imageUrl = CommonUtil.urlAppend(this._layerUrl, CommonUtil.getParameterString(params));
+    //支持代理
+    if (this.tileProxy) {
+      imageUrl = this.tileProxy + encodeURIComponent(imageUrl);
+    }
+    return imageUrl;
+  }
+  /**
+   * @function ImageSuperMapRest.optionsFromMapJSON
+   * @param {string} url - 地址。
+   * @param {Object} mapJSONObj - 地图 JSON。
+   * @description 获取地图 JSON 信息。
+   */
+  static optionsFromMapJSON(url, mapJSONObj) {
+    var extent = [mapJSONObj.bounds.left, mapJSONObj.bounds.bottom, mapJSONObj.bounds.right, mapJSONObj.bounds.top];
+    var resolutions = getResolutions();
+
+    function getResolutions() {
+      var level = 28;
+      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) {
+        for (let i = 0; i < mapJSONObj.visibleScales.length; i++) {
+          resolutions.push(Util.scaleToResolution(mapJSONObj.visibleScales[i], dpi, unit));
+        }
+      } else {
+        for (let i = 0; i < level; i++) {
+          resolutions.push(maxReolution / Math.pow(2, i));
+        }
+      }
+
+      function sortNumber(a, b) {
+        return b - a;
+      }
+
+      return resolutions.sort(sortNumber);
+    }
+    return { url,resolutions };
+  }
+}

package/mapping/ImageTileSuperMapRest.js

@@ -0,0 +1,99 @@
+/* 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 XYZ from 'ol/source/XYZ';
+import { SecurityManager } from '@supermapgis/iclient-common/security/SecurityManager';
+import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
+
+/**
+ * @class ImageTileSuperMapRest
+ * @browsernamespace ol.source
+ * @version 10.2.0
+ * @category  iServer Image
+ * @classdesc SuperMap iServer 影像服务图层源。根据指定的请求参数，返回影像数据栅格瓦片并渲染。
+ * @param {Object} options - 参数。
+ * @param {string} options.url - 服务地址。例如: http://{ip}:{port}/iserver/{imageservice-imageserviceName}/restjsr/
+ * @param {string} options.collectionId - 影像集合（Collection）的 ID，在一个影像服务中唯一标识影像集合。
+ * @param {string} [options.sqlFilter] 显示影像的过滤条件。相当于 SQL 查询中的 where 子句。支持 st_geometry 空间函数过滤。11.0 版本暂不支持通过 ECQL 进行过滤。
+ * @param {ImageRenderingRule} [options.renderingRule] 指定影像显示的风格，包含拉伸显示方式、颜色表、波段组合以及应用栅格函数进行快速处理等。不指定时，使用发布服务时所配置的风格。
+ * @param {Array.<number>} [options.ids] 返回影像集合中指定 ID 的影像，该 ID 为系统维护的一个自增 ID，为 SuperMap SDX 引擎的 SmID 字段内容。
+ * @param {Array.<string>} [options.names] 返回影像集合中指定名称影像的瓦片资源。影像名称包含文件后缀，如 S-60-45.tif。
+ * @param {string} [options.format='png'] - 瓦片表述类型，瓦片格式目前支持 png、jpg 和 webp 三种格式。
+ * @param {boolean} [options.transparent=true] - 瓦片是否透明。默认透明。
+ * @param {boolean} [options.cacheEnabled=true] - 是否启用缓存。
+ * @param {string} [options.tileProxy] -  代理地址。
+ * @param {string} [options.attribution='Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' title='SuperMap iServer' target='_blank'>SuperMap iServer</a></span>'] - 版权描述信息。
+ * @extends {ol.source.XYZ}
+ * @usage
+ */
+export class ImageTileSuperMapRest extends XYZ {
+    constructor(options) {
+        options = options || {};
+        options.format = options.format || 'png';
+        options.transparent = options.transparent === undefined ? true : options.transparent === true;
+        options.cacheEnabled = options.cacheEnabled === undefined ? true : options.cacheEnabled === true;
+        var attributions = options.attributions || "Map Data <span>© SuperMap iServer</span>";
+        var url = _createLayerUrl(options.url, options);
+        var superOptions = {
+            ...options,
+            attributions: attributions,
+            url: url
+        };
+        // 需要代理时走自定义 tileLoadFunction，否则走默认的tileLoadFunction
+        if (!options.tileLoadFunction && options.tileProxy) {
+            superOptions.tileLoadFunction = tileLoadFunction;
+        }
+        super(superOptions);
+        var me = this;
+        this.options = options;
+        if (options.tileProxy) {
+            this.tileProxy = options.tileProxy;
+        }
+        function tileLoadFunction(imageTile, src) {
+            imageTile.getImage().src = me.tileProxy + encodeURIComponent(src);
+        }
+
+        function _createLayerUrl(url, options) {
+            var layerUrl = CommonUtil.urlPathAppend(
+                url,
+                `/collections/${options.collectionId}/tile.${options.format}?x={x}&y={y}&z={z}`
+            );
+            var requestParams = _getAllRequestParams(options);
+            layerUrl = CommonUtil.urlAppend(layerUrl, _getParamString(requestParams));
+            layerUrl = SecurityManager.appendCredential(layerUrl);
+
+            if (!options.cacheEnabled) {
+                layerUrl += '&_t=' + new Date().getTime();
+            }
+            return layerUrl;
+        }
+
+        function _getAllRequestParams(options) {
+            var params = {};
+            params['transparent'] = options.transparent;
+            params['cacheEnabled'] = !(options.cacheEnabled === false);
+            if (options.sqlFilter) {
+                params['sqlFilter'] = options.sqlFilter;
+            }
+            if (options.renderingRule) {
+                params['renderingRule'] = JSON.stringify(options.renderingRule);
+            }
+            if (options.ids) {
+                params['ids'] = options.ids.join(',');
+            }
+            if (options.names) {
+                params['names'] = options.names.join(',');
+            }
+            return params;
+        }
+
+        function _getParamString(obj) {
+            var params = [];
+            for (var i in obj) {
+                params.push(encodeURIComponent(i) + '=' + encodeURIComponent(obj[i]));
+            }
+            return params.join('&');
+        }
+    }
+}

package/mapping/InitMap.js

@@ -0,0 +1,150 @@
+import { MapService } from '../services/MapService';
+import { InitMapServiceBase, isPlaneProjection, getTileFormat, getTileset } from '@supermapgis/iclient-common/iServer/InitMapServiceBase';
+import olMap from 'ol/Map';
+import View from 'ol/View';
+import Tile from 'ol/layer/Tile';
+import { TileSuperMapRest } from './TileSuperMapRest';
+import { Util } from '../core/Util';
+import proj4 from 'proj4';
+import * as olProj4 from 'ol/proj/proj4';
+import { get } from 'ol/proj';
+
+window.proj4 = proj4;
+
+/**
+ * @function initMap
+ * @description 根据 SuperMap iServer 服务参数，创建地图与图层。目前仅支持 SuperMap iServer 地图服务，创建的图层为 ol.Tile。
+ * @category BaseTypes Util
+ * @version 11.0.1
+ * @param {number} url - 服务地址，例如: http://{ip}:{port}/iserver/services/map-world/rest/maps/World。
+ * @param {Object} options - 参数。
+ * @param {Object} [options.mapOptions] - 地图配置，参数设置参考 {@link https://openlayers.org/en/v6.15.1/apidoc/module-ol_Map-Map.html}。
+ * @param {Object} [options.viewOptions] - 视图配置，参数设置参考 {@link https://openlayers.org/en/v6.15.1/apidoc/module-ol_View-View.html} ，未设置的情况下，默认使用 SuperMap iServer 服务参数进行设置。
+ * @param {Object} [options.layerOptions] - 图层配置，参数设置参考 {@link https://openlayers.org/en/v6.15.1/apidoc/module-ol_layer_Tile-TileLayer.html} ，未设置的情况下，默认使用 SuperMap iServer 服务参数进行设置。
+ * @param {Object} [options.sourceOptions] - 数据源配置，参数设置参考 {@link TileSuperMapRest} ，未设置的情况下，默认使用 SuperMap iServer 服务参数进行设置。
+ * @param {string} [options.proxy] - 服务代理地址。
+ * @param {boolean} [options.withCredentials=false] - 请求是否携带 cookie。
+ * @param {boolean} [options.crossOrigin] - 是否允许跨域请求。
+ * @param {Object} [options.headers] - 请求头。
+ * @returns {Object} 实例对象，对象包括地图实例，图层实例，数据源实例。
+ * @usage
+ * ```
+ * // 浏览器
+ * <script type="text/javascript" src="{cdn}"></script>
+ * <script>
+ *   const initMap = {namespace}.initMap(url, { mapOptions, viewOptions, layerOptions, sourceOptions });
+ *
+ * </script>
+ * // ES6 Import
+ * import { initMap } from '{npm}';
+ *
+ * initMap(url, { mapOptions, viewOptions, layerOptions, sourceOptions })
+ * ```
+ * */
+export async function initMap(url, options = {}) {
+  const { mapOptions, viewOptions, layerOptions, sourceOptions } = options;
+  const initMapService = new InitMapServiceBase(MapService, url, options);
+  const tilesets = await initMapService.getTilesets();
+  const result = await initMapService.getMapInfo();
+  if (!result || !result.result) {
+    return 'service is not work!';
+  }
+  const mapObject = result.result;
+  const { prjCoordSys, bounds, center, visibleScales, coordUnit, scale, dpi } = mapObject;
+  // tileset和地图不同投影，优先使用地图
+  const tileset = getTileset(tilesets.result, { prjCoordSys, tileType: 'Image' });
+
+  const config = {
+    center,
+    bounds,
+    dpi,
+    visibleScales,
+    scale,
+    prjCoordSys,
+    coordUnit,
+    tileFormat: 'webp',
+    tileSize: 256
+  };
+  if (tileset) {
+    config.tileFormat = getTileFormat(tileset);
+    config.tileSize = tileset.tileWidth || 256;
+    config.transparent = tileset.transparent || true;
+    config.origin = [tileset.originalPoint.x, tileset.originalPoint.y];
+    config.resolutions = tileset.resolutions;
+    config.scaleDenominators = tileset.scaleDenominators;
+    config.dpi = Util.getDpi(1.0 / tileset.scaleDenominators[0], tileset.resolutions[0], coordUnit);
+  }
+
+  if (!get(`EPSG:${prjCoordSys.epsgCode}`) && !isPlaneProjection(prjCoordSys.type)) {
+    const wkt = await initMapService.getWKT();
+    registerProj(prjCoordSys.epsgCode, wkt, bounds);
+  }
+
+  let map = createMap(config, mapOptions, viewOptions);
+  let { layer, source } = createLayer(url, config, sourceOptions, layerOptions);
+  map.addLayer(layer);
+  return {
+    map,
+    source,
+    layer
+  };
+}
+
+/**
+ * @function viewOptionsFromMapJSON
+ * @category BaseTypes Util
+ * @version 11.0.1
+ * @description 通过 iServer REST 地图参数构造 ol 视图对象。
+ * @param {Object} mapJSONObj - 地图 JSON 对象。
+ * @param {number} [level=22] - 地图最大级别。
+ * @returns {Object} ol视图参数，包括中心点、投影、级别、分辨率数组。
+ */
+
+export function viewOptionsFromMapJSON(mapJSONObj, level = 22) {
+  let { bounds, dpi, center, visibleScales, scale, coordUnit, prjCoordSys, scaleDenominators, resolutions } = mapJSONObj;
+  const mapCenter =
+    center.x && center.y ? [center.x, center.y] : [(bounds.left + bounds.right) / 2, (bounds.bottom + bounds.top) / 2];
+  const extent = [bounds.left, bounds.bottom, bounds.right, bounds.top];
+  let projection = Util.getProjection(prjCoordSys, extent);
+  resolutions = resolutions || Util.scalesToResolutions(visibleScales, bounds, dpi, coordUnit, level);
+  const resolution = scaleDenominators ? (1.0 / scale) : Util.scaleToResolution(scale, dpi, coordUnit);
+  const zoom = Util.getZoomByResolution(resolution, resolutions);
+  return {
+    center: mapCenter,
+    projection,
+    zoom,
+    resolutions
+  };
+}
+
+function createMap(result, mapOptions, viewOptions) {
+  let view = viewOptionsFromMapJSON(result);
+  var map = new olMap({
+    target: 'map',
+    view: new View({ ...view, ...viewOptions }),
+    ...mapOptions
+  });
+  return map;
+}
+
+function registerProj(epsgCode, wkt, bounds) {
+  const extent = [bounds.left, bounds.bottom, bounds.right, bounds.top];
+  let epsgCodeStr = `EPSG:${epsgCode}`;
+  !get(epsgCodeStr) && proj4.defs(epsgCodeStr, wkt);
+  if (olProj4 && olProj4.register) {
+    olProj4.register(proj4);
+    var prj = get(epsgCodeStr);
+    prj.setExtent(extent);
+  }
+}
+
+function createLayer(url, result, sourceOptions, layerOptions) {
+  let options = TileSuperMapRest.optionsFromMapJSON(url, result, true);
+  options = { ...options, ...sourceOptions };
+  var source = new TileSuperMapRest(options);
+  var layer = new Tile({
+    source,
+    ...layerOptions
+  });
+  return { layer, source };
+}