forked from SuperMap/iClient-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathInitMap.js
More file actions
129 lines (120 loc) · 4.87 KB
/
InitMap.js
File metadata and controls
129 lines (120 loc) · 4.87 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
import { MapService } from '../services/MapService';
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 服务参数进行设置。
* @returns {Object} 实例对象，对象包括地图实例，图层实例，数据源实例。
* @usage
* ```
* // 浏览器
* <script type="text/javascript" src="{cdn}"></script>
* <script>
* const initMap = {namespace}.initMap;
*
* </script>
* // ES6 Import
* import { initMap } from '{npm}';
*
* initMap(url, { mapOptions, viewOptions, layerOptions, sourceOptions })
* ```
* */
export function initMap(url, options = {}) {
const { mapOptions, viewOptions, layerOptions, sourceOptions } = options;
return new Promise((resolve, reject) => {
new MapService(url).getMapInfo(async function (serviceResult) {
if (!serviceResult || !serviceResult.result) {
reject('service is not work!');
}
let { prjCoordSys, bounds } = serviceResult.result;
if (!get(`EPSG:${prjCoordSys.epsgCode}`) && prjCoordSys.type !== 'PCS_NON_EARTH') {
const wkt = await getWkt(url);
registerProj(prjCoordSys.epsgCode, wkt, bounds);
}
let map = createMap(serviceResult.result, mapOptions, viewOptions);
let { layer, source } = createLayer(url, serviceResult.result, sourceOptions, layerOptions);
map.addLayer(layer);
resolve({
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 } = 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);
var resolutions = Util.scalesToResolutions(visibleScales, bounds, dpi, coordUnit, level);
const zoom = Util.getZoomByResolution(Util.scaleToResolution(scale, dpi, coordUnit), 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 };
}
function getWkt(url) {
return new Promise((resolve) => {
new MapService(url).getWkt(function (res) {
let wkt = res.result.data;
resolve(wkt);
});
});
}