Skip to content

Commit fd4f6e9

Browse files
luoxiao-supermapluoxiao-supermap
committed
[feature][leaflet] initmap review by songym
1 parent 1ee24ad commit fd4f6e9

File tree

16 files changed

+1185
-94
lines changed

16 files changed

+1185
-94
lines changed

‎build/jsdocs/template/typeLinkExt.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
var olapi = "https://openlayers.org/en/v6.14.1/apidoc/";
2-
var lfapi = "https://leafletjs.com/reference-1.7.1.html";
2+
var lfapi = "https://leafletjs.com/index.html";
33
var mbglapi = "https://www.mapbox.com/mapbox-gl-js/api/";
44
var mapv = "https://github.com/huiyan-fe/mapv/blob/master/src/";
55
var classicapi="https://iclient.supermap.io/web/libs/iclient8c/apidoc/files/SuperMap"
@@ -69,6 +69,7 @@ var typeLinks = {
6969
"L.Rectangle": lfapi + '#rectangle',
7070
'L.LatLngBounds': lfapi+ '#latlngbounds',
7171
'L.Map': lfapi + '#map-example',
72+
'L.MapOptions': lfapi + '#map-option',
7273
'L.Evented':lfapi +'#evented',
7374
'L.Browser':lfapi +'#browser',
7475

‎examples/leaflet/01_overlayTiledMapLayer.html‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,48 @@
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>
10-
</head>
11-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12-
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14-
<script type="text/javascript">
15-
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, urlWorld = host + "/iserver/services/map-world/rest/maps/World",
17-
urlJinjing = host + "/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图";
18-
map = L.map('map', {
19-
crs: L.CRS.EPSG4326,
20-
center: [40, 118],
21-
maxZoom: 18,
22-
zoom: 6
23-
});
10+
</head>
11+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
12+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
13+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
16+
var map,
17+
urlWorld = host + '/iserver/services/map-world/rest/maps/World',
18+
urlJinjing = host + '/iserver/services/map-jingjin/rest/maps/京津地区人口分布图_专题图';
2419

25-
new L.supermap.TiledMapLayer(urlWorld).addTo(map);
26-
new L.supermap.TiledMapLayer(urlJinjing, {
27-
transparent: true,
28-
opacity: 0.6
29-
}).addTo(map);
30-
</script>
31-
</body>
20+
// 方式一：1.调用 L.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
21+
// 2.调用 L.supermap.TiledMapLayer 创建叠加图层
22+
L.supermap.initMap(urlWorld, { mapOptions: { center: [40, 118], zoom: 7 } }).then(({ map }) => {
23+
new L.supermap.TiledMapLayer(urlJinjing, {
24+
transparent: true,
25+
opacity: 0.6
26+
}).addTo(map);
27+
});
28+
/*
29+
// 方式二：1.调用 L.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
30+
// 2.调用 L.supermap.crsFromMapJSON 创建 CRS
31+
// 3.调用 L.map 创建地图
32+
// 4.调用 L.supermap.TiledMapLayer 创建底图和叠加图层
33+
new L.supermap.MapService(urlWorld).getMapInfo((res) => {
34+
var crs = L.supermap.crsFromMapJSON(res.result);
35+
map = L.map('map', {
36+
crs: crs,
37+
center: [40, 118],
38+
maxZoom: 18,
39+
zoom: 7
40+
});
41+
new L.supermap.TiledMapLayer(urlWorld).addTo(map);
42+
new L.supermap.TiledMapLayer(urlJinjing, {
43+
transparent: true,
44+
opacity: 0.6
45+
}).addTo(map);
46+
});
47+
*/
48+
</script>
49+
</body>
3250
</html>

‎examples/leaflet/01_tiledMapLayer3857.html‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,44 @@
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>
10-
</head>
11-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12-
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14-
<script type="text/javascript">
15-
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, url = host + "/iserver/services/map-china400/rest/maps/China";
17-
map = L.map('map', {
18-
center: [0, 0],
19-
maxZoom: 18,
20-
zoom: 1
21-
});
22-
new L.supermap.TiledMapLayer(url).addTo(map);
23-
</script>
24-
</body>
25-
</html>
10+
</head>
11+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
12+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
13+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
16+
var map,
17+
url = host + '/iserver/services/map-china400/rest/maps/China';
18+
url = 'http://172.16.14.44:8090/iserver/services/map-china400/rest/maps/China';
19+
20+
// 方式一：1.调用 L.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
21+
L.supermap.initMap(url, { mapOptions: { zoom: 0 } });
22+
/*
23+
// 方式二：1.调用 L.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
24+
// 2.调用 L.supermap.crsFromMapJSON 创建 CRS
25+
// 3.调用 L.map 创建地图
26+
// 4.调用 L.supermap.TiledMapLayer 创建底图
27+
new L.supermap.MapService(url).getMapInfo((res) => {
28+
var crs = L.supermap.crsFromMapJSON(res.result);
29+
map = L.map('map', {
30+
crs: crs,
31+
center: [0, 0],
32+
maxZoom: 18,
33+
zoom: 1
34+
});
35+
new L.supermap.TiledMapLayer(url).addTo(map);
36+
});
37+
*/
38+
// map = L.map('map', {
39+
// center: [36.03133177633048, 136.40625000000054],
40+
// maxZoom: 18,
41+
// zoom: 0
42+
// });
43+
// new L.supermap.TiledMapLayer(url).addTo(map);
44+
</script>
45+
</body>
46+
</html>

‎examples/leaflet/01_tiledMapLayer4326.html‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,39 @@
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>
10-
</head>
11-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12-
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14-
<script type="text/javascript">
15-
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, url = host + "/iserver/services/map-world/rest/maps/World";
17-
map = L.map('map', {
18-
crs: L.CRS.EPSG4326,
19-
center: [0, 0],
20-
maxZoom: 18,
21-
zoom: 1
22-
});
23-
new L.supermap.TiledMapLayer(url).addTo(map);
10+
</head>
11+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
12+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
13+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
16+
var map,
17+
url = host + '/iserver/services/map-world/rest/maps/World';
2418

25-
</script>
26-
</body>
27-
</html>
19+
// 方式一：1.调用 L.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
20+
L.supermap.initMap(url);
21+
/*
22+
// 方式二：1.调用 L.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
23+
// 2.调用 L.supermap.crsFromMapJSON 创建 CRS
24+
// 3.调用 L.map 创建地图
25+
// 4.调用 L.supermap.TiledMapLayer 创建底图
26+
new L.supermap.MapService(url).getMapInfo((res) => {
27+
var def = `GEOGCS["GCS_China_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101,AUTHORITY["EPSG","7044"]]],PRIMEM["Greenwich",0.0,AUTHORITY["EPSG","8901"]],UNIT["DEGREE",0.017453292519943295],AUTHORITY["EPSG","4490"]]`;
28+
Proj4js.defs('EPSG:4490', def);
29+
var crs = L.supermap.crsFromMapJSON(res.result);
30+
map = L.map('map', {
31+
crs: crs,
32+
center: [23.909946174843483, 17.607615853850504],
33+
maxZoom: 18,
34+
zoom: 0
35+
});
36+
new L.supermap.TiledMapLayer(url).addTo(map);
37+
});
38+
*/
39+
</script>
40+
</body>
41+
</html>

‎examples/leaflet/01_tiledMapLayerNonEarth.html‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,37 @@
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_tiledMapLayerNonEarth"></title>
99
<script type="text/javascript" src="../js/include-web.js"></script>
10-
</head>
11-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
12-
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
13-
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14-
<script type="text/javascript">
15-
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
16-
var map, url = host + "/iserver/services/map-changchun/rest/maps/长春市区图";
17-
map = L.map('map', {
18-
crs: new L.supermap.CRS.NonEarthCRS({
19-
bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
20-
origin: L.point(48.4, -55.58)
21-
}),
22-
center: [-4500, 4000],
23-
maxZoom: 18,
24-
zoom: 1
25-
});
26-
new L.supermap.TiledMapLayer(url, {noWrap: true}).addTo(map);
27-
</script>
28-
</body>
10+
</head>
11+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
12+
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
13+
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
14+
<script type="text/javascript">
15+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
16+
var map,
17+
url = host + '/iserver/services/map-changchun/rest/maps/长春市区图';
18+
19+
// 方式一：1.调用 L.supermap.initMap，根据 SuperMap iServer 地图服务的地图信息，创建地图和底图
20+
L.supermap.initMap(url, { layerOptions: { noWrap: true } });
21+
/*
22+
// 方式二：1.调用 L.supermap.MapService，获取 SuperMap iServer 地图服务的地图信息
23+
// 2.调用 L.supermap.crsFromMapJSON 创建 CRS
24+
// 3.调用 L.map 创建地图
25+
// 4.调用 L.supermap.TiledMapLayer 创建底图
26+
new L.supermap.MapService(url).getMapInfo((res) => {
27+
var crs = L.supermap.crsFromMapJSON(res.result);
28+
map = L.map('map', {
29+
crs: crs,
30+
center: [-4500, 4000],
31+
maxZoom: 18,
32+
zoom: 1
33+
});
34+
new L.supermap.TiledMapLayer(url, { noWrap: true }).addTo(map);
35+
});
36+
*/
37+
</script>
38+
</body>
2939
</html>

‎src/common/util/MapCalculateUtil.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,11 @@ export function conversionDegree(degrees) {
112112
return `${degree}°${fraction}'${second}`;
113113
}
114114

115-
export function scalesToResolutions(scales, bounds, dpi, unit, level = 22) {
115+
export function scalesToResolutions(scales, bounds, dpi, mapUnit, level = 22) {
116116
var resolutions = [];
117117
if (scales && scales.length > 0) {
118118
for (let i = 0; i < scales.length; i++) {
119-
resolutions.push(scaleToResolution(scales[i], dpi, unit));
119+
resolutions.push(scaleToResolution(scales[i], dpi, mapUnit));
120120
}
121121
} else {
122122
const maxReolution = Math.abs(bounds.left - bounds.right) / 256;

‎src/leaflet/core/Proj4Leaflet.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ L.Proj.Projection = L.Class.extend({
115115
* @param {Array.<number>} [options.resolutions] - 分辨率数组。
116116
* @param {(Array.<number>|L.Bounds)} [options.bounds] - 范围。
117117
* @param {number} [options.dpi=96] - dpi。
118-
* @param {number} [options.wrapLng] - 定义经度（水平）坐标轴是否在给定范围内环绕。大多数情况下默认为[-180，180]。
118+
* @param {Array.<number>} [options.wrapLng] - 定义经度（水平）坐标轴是否在给定范围内环绕。大多数情况下默认为[-180，180]。
119119
* @example
120120
* var crs =new CRS("EPSG:4326",{
121121
* origin: [-180,90],
@@ -305,7 +305,7 @@ export var CRS = L.Class.extend({
305305
var meterPerMapUnit = 1;
306306
if (mapUnit === 'meter') {
307307
meterPerMapUnit = 1;
308-
} else if (mapUnit === 'degrees') {
308+
} else if (mapUnit === 'degrees' || mapUnit === 'degree') {
309309
// 每度表示多少米。
310310
meterPerMapUnit = (Math.PI * 2 * earchRadiusInMeters) / 360;
311311
} else if (mapUnit === 'kilometer') {

‎src/leaflet/core/Util.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@
33
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
44
import L from 'leaflet';
55
import { GeoJSON as GeoJSONFormat } from '@supermap/iclient-common/format/GeoJSON';
6-
import { getMeterPerMapUnit as MeterPerMapUnit } from '@supermap/iclient-common/util/MapCalculateUtil';
7-
6+
import {
7+
getMeterPerMapUnit as MeterPerMapUnit,
8+
getZoomByResolution,
9+
scalesToResolutions
10+
} from '@supermap/iclient-common/util/MapCalculateUtil';
11+
812
/**
913
* @function toGeoJSON
1014
* @category BaseTypes Util
@@ -224,4 +228,7 @@ export var getResolutionFromScaleDpi = function(scale, dpi, coordUnit, datumAxis
224228
}
225229
return -1;
226230
};
227-
231+
export {
232+
getZoomByResolution,
233+
scalesToResolutions
234+
}

‎src/leaflet/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@ import {
3939
WebMap,
4040
webMap,
4141
ImageTileLayer,
42-
imageTileLayer
42+
imageTileLayer,
43+
initMap,
44+
crsFromMapJSON
4345
} from './mapping';
4446
import {
4547
DataFlowLayer,
@@ -237,7 +239,9 @@ export {
237239
WebMap,
238240
webMap,
239241
ImageTileLayer,
240-
imageTileLayer
242+
imageTileLayer,
243+
initMap,
244+
crsFromMapJSON
241245
};
242246
export {
243247
DataFlowLayer,

‎src/leaflet/mapping/TiledMapLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ export var TiledMapLayer = L.TileLayer.extend({
346346
if (options.overlapDisplayed === false) {
347347
params["overlapDisplayed"] = false;
348348
if (options.overlapDisplayedOptions) {
349-
params["overlapDisplayedOptions"] = me.overlapDisplayedOptions.toString();
349+
params["overlapDisplayedOptions"] = options.overlapDisplayedOptions;
350350
}
351351
} else {
352352
params["overlapDisplayed"] = true;

0 commit comments

Comments
 (0)