Skip to content

Commit 77e4ef2

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
【feature】 ol 新增 initMap review by songym
1 parent 99a23bb commit 77e4ef2

File tree

13 files changed

+580
-186
lines changed

13 files changed

+580
-186
lines changed

‎examples/openlayers/01_tiledMapLayer3857.html‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,47 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8">
6+
<head>
7+
<meta charset="UTF-8" />
88
<title data-i18n="resources.title_tiledMapLayer3857"></title>
99
<script type="text/javascript" src="../js/include-web.js"></script>
1010
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
11-
</head>
12-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
13-
<div id="map" style="width: 100%;height:100%"></div>
14-
<script type="text/javascript">
15-
var map, url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-china400/rest/maps/China";
16-
map = new ol.Map({
17-
target: 'map',
18-
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
11+
</head>
12+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
13+
<div id="map" style="width: 100%; height: 100%"></div>
14+
<script type="text/javascript">
15+
var map,
16+
url =
17+
(window.isLocal ? window.server : 'https:iserver.supermap.io') +
18+
'/iserver/services/map-china400/rest/maps/China';
19+
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
20+
ol.supermap.initMap(url, {
21+
mapOptions: {
22+
controls: ol.control
23+
.defaults({ attributionOptions: { collapsed: false } })
24+
.extend([new ol.supermap.control.Logo()])
25+
}
26+
});
27+
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
28+
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
29+
3.调用 ol.Map 创建地图
30+
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
31+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
32+
const mapObj = serviceResult.result;
33+
map = new ol.Map({
34+
target: 'map',
35+
controls: ol.control
36+
.defaults({ attributionOptions: { collapsed: false } })
1937
.extend([new ol.supermap.control.Logo()]),
20-
view: new ol.View({
21-
center: [0, 0],
22-
zoom: 1,
23-
projection: 'EPSG:3857',
24-
multiWorld: true
25-
})
26-
});
27-
var layer = new ol.layer.Tile({
28-
source: new ol.source.TileSuperMapRest({
29-
url: url,
30-
wrapX: true
31-
}),
32-
projection: 'EPSG:3857'
33-
});
34-
map.addLayer(layer);
35-
map.addControl(new ol.supermap.control.ScaleLine());
36-
</script>
37-
</body>
38-
</html>
38+
view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
39+
});
40+
var layer = new ol.layer.Tile({
41+
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true))
42+
});
43+
map.addLayer(layer);
44+
map.addControl(new ol.supermap.control.ScaleLine());
45+
});
46+
*/
47+
</script>
48+
</body>
49+
</html>

‎examples/openlayers/01_tiledMapLayer4326.html‎

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,49 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8">
6+
<head>
7+
<meta charset="UTF-8" />
88
<title data-i18n="resources.title_tiledMapLayer4326"></title>
99
<script type="text/javascript" src="../js/include-web.js"></script>
1010
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
11-
</head>
12-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
13-
<div id="map" style="width: 100%;height:100%"></div>
14-
<script type="text/javascript">
15-
var map, url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-world/rest/maps/World";
16-
map = new ol.Map({
17-
target: 'map',
18-
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
19-
.extend([new ol.supermap.control.Logo()]),
20-
view: new ol.View({
21-
center: [0, 0],
22-
zoom: 2,
23-
projection: 'EPSG:4326',
24-
multiWorld: true
25-
})
26-
});
27-
var layer = new ol.layer.Tile({
28-
source: new ol.source.TileSuperMapRest({
29-
url: url,
30-
wrapX: true
31-
}),
32-
projection: 'EPSG:4326'
33-
});
34-
map.addLayer(layer);
35-
map.addControl(new ol.supermap.control.ScaleLine());
36-
</script>
37-
</body>
38-
</html>
11+
</head>
12+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
13+
<div id="map" style="width: 100%; height: 100%"></div>
14+
<script type="text/javascript">
15+
var map,
16+
url =
17+
(window.isLocal ? window.server : 'https://iserver.supermap.io') +
18+
'/iserver/services/map-world/rest/maps/World';
19+
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
20+
ol.supermap.initMap(url, {
21+
mapOptions: {
22+
controls: ol.control
23+
.defaults({ attributionOptions: { collapsed: false } })
24+
.extend([new ol.supermap.control.Logo()])
25+
}
26+
});
27+
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
28+
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
29+
3.调用 ol.Map 创建地图
30+
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
31+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
32+
const mapObj = serviceResult.result;
33+
const viewOptions = ol.supermap.viewOptionsFromMapJSON(mapObj);
34+
map = new ol.Map({
35+
target: 'map',
36+
controls: ol.control
37+
.defaults({ attributionOptions: { collapsed: false } })
38+
.extend([new ol.supermap.control.Logo()]),
39+
view: new ol.View(viewOptions)
40+
});
41+
var layer = new ol.layer.Tile({
42+
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj, true)),
43+
projection: 'EPSG:4326'
44+
});
45+
map.addLayer(layer);
46+
map.addControl(new ol.supermap.control.ScaleLine());
47+
});
48+
*/
49+
</script>
50+
</body>
51+
</html>

‎examples/openlayers/01_tiledMapLayerNoProj.html‎

Lines changed: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,43 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8">
6+
<head>
7+
<meta charset="UTF-8" />
88
<title data-i18n="resources.title_tiledMapLayerNoProj"></title>
99
<script type="text/javascript" src="../js/include-web.js"></script>
1010
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
11-
</head>
12-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
13-
<div id="map" style="width: 100%;height:100%"></div>
14-
<script type="text/javascript">
15-
var url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-changchun/rest/maps/长春市区图";
16-
var extent = [48.4, -7668.25, 8958.85, -55.58];
17-
var projection = new ol.proj.Projection({
18-
code:'',
19-
extent: extent,
20-
units: 'm',
21-
getPointResolution:function(resolution, point){
22-
return resolution
11+
</head>
12+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
13+
<div id="map" style="width: 100%; height: 100%"></div>
14+
<script type="text/javascript">
15+
var url = 'https://iserver.supermap.io/iserver/services/map-changchun/rest/maps/长春市区图';
16+
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
17+
ol.supermap.initMap(url, {
18+
mapOptions: {
19+
controls: ol.control
20+
.defaults({ attributionOptions: { collapsed: false } })
21+
.extend([new ol.supermap.control.Logo()])
2322
}
24-
});
25-
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
26-
var mapJSONObj = serviceResult.result;
27-
var map = new ol.Map({
28-
target: 'map',
29-
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
30-
.extend([new ol.supermap.control.Logo()]),
31-
view: new ol.View({
32-
center: [5105, -3375],
33-
zoom: 1,
34-
projection: projection,
35-
origin: [48.4, -55.58],
36-
multiWorld: true
37-
})
38-
});
39-
var layer = new ol.layer.Tile({
40-
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj))
41-
});
42-
map.addLayer(layer);
43-
map.addControl(new ol.supermap.control.ScaleLine());
44-
});
45-
46-
</script>
47-
</body>
48-
</html>
23+
});
24+
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
25+
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
26+
3.调用 ol.Map 创建地图
27+
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图
28+
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
29+
var mapObj = serviceResult.result;
30+
var map = new ol.Map({
31+
target: 'map',
32+
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
33+
.extend([new ol.supermap.control.Logo()]),
34+
view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
35+
});
36+
var layer = new ol.layer.Tile({
37+
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapObj))
38+
});
39+
map.addLayer(layer);
40+
map.addControl(new ol.supermap.control.ScaleLine());
41+
});
42+
*/
43+
</script>
44+
</body>
45+
</html>

‎examples/openlayers/01_tiledMapLayerOverlapped.html‎

Lines changed: 62 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,71 @@
33
*********************************************************************-->
44
<!DOCTYPE html>
55
<html>
6-
<head>
7-
<meta charset="UTF-8">
6+
<head>
7+
<meta charset="UTF-8" />
88
<title data-i18n="resources.text_mapOverlay"></title>
99
<script type="text/javascript" src="../js/include-web.js"></script>
1010
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
11-
</head>
12-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
13-
<div id="map" style="width: 100%;height:100%"></div>
14-
<script type="text/javascript">
15-
var map, urlWorld = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-world/rest/maps/World",
16-
urlJinjing = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
17-
map = new ol.Map({
18-
target: 'map',
19-
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
20-
.extend([new ol.supermap.control.Logo()]),
21-
view: new ol.View({
11+
</head>
12+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
13+
<div id="map" style="width: 100%; height: 100%"></div>
14+
<script type="text/javascript">
15+
var map,
16+
urlWorld =
17+
(window.isLocal ? window.server : 'https://iserver.supermap.io') +
18+
'/iserver/services/map-world/rest/maps/World',
19+
urlJinjing =
20+
(window.isLocal ? window.server : 'https://iserver.supermap.io') +
21+
'/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图';
22+
// 方式一：1.调用 ol.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
23+
// 2.调用 ol.source.TileSuperMapRest 创建叠加图层
24+
ol.supermap
25+
.initMap(urlWorld, {
26+
mapOptions: {
27+
controls: ol.control
28+
.defaults({ attributionOptions: { collapsed: false } })
29+
.extend([new ol.supermap.control.Logo()])
30+
},
31+
viewOptions: {
2232
center: [116.85, 39.79],
23-
zoom: 7,
24-
projection: 'EPSG:4326',
25-
multiWorld: true
33+
zoom: 8
34+
}
2635
})
27-
});
28-
var worldLayer = new ol.layer.Tile({
29-
source: new ol.source.TileSuperMapRest({
36+
.then(({ map, source }) => {
37+
var Jinjing = new ol.layer.Tile({
38+
source: new ol.source.TileSuperMapRest({
39+
url: urlJinjing,
40+
tileGrid: source.getTileGrid()
41+
})
42+
});
43+
map.addLayer(Jinjing);
44+
});
45+
/* 方式二：1.调用 ol.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
46+
2.调用 ol.supermap.viewOptionsFromMapJSON 获取地图视图参数
47+
3.调用 ol.Map 创建地图
48+
4.调用 ol.layer.Tile 与 ol.source.TileSuperMapRest 创建底图和叠加图层
49+
new ol.supermap.MapService(urlJinjing).getMapInfo(function (serviceResult) {
50+
const mapObj = serviceResult.result;
51+
map = new ol.Map({
52+
target: 'map',
53+
controls: ol.control
54+
.defaults({ attributionOptions: { collapsed: false } })
55+
.extend([new ol.supermap.control.Logo()]),
56+
view: new ol.View(ol.supermap.viewOptionsFromMapJSON(mapObj))
57+
});
58+
var worldLayer = new ol.layer.Tile({
59+
source: new ol.source.TileSuperMapRest({
3060
url: urlWorld
31-
}),
32-
projection: 'EPSG:4326'
33-
});
34-
map.addLayer(worldLayer);
35-
var jinJingLayer = new ol.layer.Tile({
36-
source: new ol.source.TileSuperMapRest({
37-
url: urlJinjing,
38-
origin: [-180, 90],
39-
transparent: true
40-
}),
41-
projection: 'EPSG:4326'
42-
});
43-
map.addLayer(jinJingLayer);
44-
45-
</script>
46-
</body>
47-
</html>
61+
}),
62+
projection: 'EPSG:4326'
63+
});
64+
map.addLayer(worldLayer);
65+
var jinJingLayer = new ol.layer.Tile({
66+
source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(urlJinjing, mapObj))
67+
});
68+
map.addLayer(jinJingLayer);
69+
});
70+
*/
71+
</script>
72+
</body>
73+
</html>

‎src/openlayers/core/Util.js‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
44
import { Bounds } from '@supermap/iclient-common/commontypes/Bounds';
55
import { GeoJSON as GeoJSONFormat } from '@supermap/iclient-common/format/GeoJSON';
6-
import { getMeterPerMapUnit } from '@supermap/iclient-common/util/MapCalculateUtil';
6+
import { getMeterPerMapUnit, scalesToResolutions, getZoomByResolution } from '@supermap/iclient-common/util/MapCalculateUtil';
77
import * as olUtil from 'ol/util';
88
import Geometry from 'ol/geom/Geometry';
99
import { getVectorContext } from 'ol/render';
1010
import VectorSource from 'ol/source/Vector';
1111
import VectorLayer from 'ol/layer/Vector';
1212
import { Fill, Style } from 'ol/style';
1313
import Feature from 'ol/Feature';
14+
import Projection from 'ol/proj/Projection';
15+
import { get } from 'ol/proj';
1416

1517
/**
1618
* @name Util
@@ -417,7 +419,27 @@
417419
* @version 10.1.0
418420
* @param {ol.layer.Layer|Array.<ol.layer.Layer>} layers 图层
419421
*/
420-
unsetMask
422+
unsetMask,
423+
getZoomByResolution(scale, scales) {
424+
return getZoomByResolution(scale, scales);
425+
},
426+
scalesToResolutions(scales, bounds, dpi, unit, mapobj, level) {
427+
return scalesToResolutions(scales, bounds, dpi, unit, mapobj, level);
428+
},
429+
getProjection(prjCoordSys, extent) {
430+
let projection = get(`EPSG:${prjCoordSys.epsgCode}`);
431+
if (prjCoordSys.type == 'PCS_NON_EARTH') {
432+
projection = new Projection({
433+
extent,
434+
units: 'm',
435+
code: '0'
436+
});
437+
}
438+
if (!projection) {
439+
console.error(`The projection of EPSG:${prjCoordSys.epsgCode} is missing, please register the projection of EPSG:${prjCoordSys.epsgCode} first, refer to the documentation: https://iclient.supermap.io/web/introduction/leafletDevelop.html#multiProjection`);
440+
}
441+
return projection;
442+
}
421443
}
422444

423445
function isString(str) {

0 commit comments

Comments
 (0)