Skip to content

Commit b4d3aeb

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
【feature】 ol 新增 initMap review by songym
1 parent 0367cb4 commit b4d3aeb

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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy