Repository navigation
Expand file tree
/
Copy pathInitMap.js
More file actions
150 lines (140 loc) · 6.07 KB
/
Copy pathInitMap.js
File metadata and controls
150 lines (140 loc) · 6.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
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] - 请求是否携带凭据。默认情况下，仅同源请求包含凭据。
* @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 };
}