Skip to content

Commit 3400ef4

Browse files
chenmeiyiSupermapchenmeiyiSupermap
committed
修改ol3示例中的样式、脚本顺序及部分示例对应的预览图。review by zhurch
1 parent c2ffcc5 commit 3400ef4

File tree

100 files changed

+3630
-3885
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+3630
-3885
lines changed

‎examples/openlayers/01_layerService.html‎

Lines changed: 47 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
<title>SuperMap 图层信息</title>
66
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
77
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8-
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
9-
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
108
<style>
119
.ol-popup {
1210
position: absolute;
@@ -46,86 +44,56 @@
4644
}
4745

4846
</style>
49-
50-
<script type="text/javascript">
51-
var container = document.getElementById('popup');
52-
var content = document.getElementById('popup-content');
53-
var extent = [-180.0, -90.0, 180, 90];
54-
var dpi = 96;
55-
var resolutions = [
56-
ol.supermap.Util.scaleToResolution(1.6901635716026555E-9, dpi, Unit.DEGREE),
57-
ol.supermap.Util.scaleToResolution(3.375595414562003E-9, dpi, Unit.DEGREE),
58-
ol.supermap.Util.scaleToResolution(6.751190829124006E-9, dpi, Unit.DEGREE),
59-
ol.supermap.Util.scaleToResolution(1.3502381658248012E-8, dpi, Unit.DEGREE),
60-
ol.supermap.Util.scaleToResolution(2.7004763316496024E-8, dpi, Unit.DEGREE),
61-
ol.supermap.Util.scaleToResolution(5.400952663299205E-8, dpi, Unit.DEGREE),
62-
ol.supermap.Util.scaleToResolution(1.080190532659841E-7, dpi, Unit.DEGREE),
63-
ol.supermap.Util.scaleToResolution(2.1603810653196843E-7, dpi, Unit.DEGREE),
64-
ol.supermap.Util.scaleToResolution(4.320762130639359E-7, dpi, Unit.DEGREE),
65-
ol.supermap.Util.scaleToResolution(8.641524261278681E-7, dpi, Unit.DEGREE),
66-
];
67-
var overlay = new ol.Overlay(({
68-
element: container,
69-
autoPan: true,
70-
autoPanAnimation: {
71-
duration: 250
72-
}
73-
}));
74-
var map,
75-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
76-
function init() {
77-
map = new ol.Map({
78-
target: 'map',
79-
view: new ol.View({
80-
center: [0, 0],
81-
zoom: 2,
82-
projection: 'EPSG:4326'
83-
}),
84-
overlays: [overlay],
85-
});
86-
var layer = new ol.layer.Tile({
87-
source: new ol.supermap.TileSuperMapRest({
88-
url: url,
89-
tileGrid: new ol.tilegrid.TileGrid({
90-
extent: extent,
91-
resolutions: resolutions,
92-
})
93-
}),
94-
projection: 'EPSG:4326'
95-
});
96-
map.addLayer(layer);
97-
}
98-
99-
function layerService() {
100-
closeInfoWin();
101-
var getLayersInfoService = new ol.supermap.GetLayersInfoService(url);
102-
getLayersInfoService.on("complete", function (serviceResult) {
103-
var innerHtml = "";
104-
serviceResult.element.result.map(function (layer) {
105-
innerHtml += layer.name + "<br>";
106-
});
107-
content.innerHTML = innerHtml;
108-
overlay.setPosition([0, 0]);
109-
});
110-
getLayersInfoService.getLayersInfo();
111-
}
112-
113-
function closeInfoWin() {
114-
if (overlay) {
115-
overlay.setPosition(undefined);
116-
}
117-
}
118-
119-
</script>
12047
</head>
121-
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
48+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
49+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
12250
<div id="popup" class="ol-popup">
12351
<div id="popup-content"></div>
12452
</div>
125-
<div id="toolbar" style="height:44px; padding-top: 6px; text-align: right ">
126-
<input type="button" class="btn btn-default" value="获取图层信息" onclick="layerService()"/>
127-
<input type="button" class="btn btn-default" value="清除结果" onclick="closeInfoWin()"/>
128-
</div>
129-
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
13053
</body>
54+
55+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
56+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
57+
<script type="text/javascript">
58+
var container = document.getElementById('popup');
59+
var content = document.getElementById('popup-content');
60+
var overlay = new ol.Overlay(({
61+
element: container,
62+
autoPan: true,
63+
autoPanAnimation: {
64+
duration: 250
65+
}
66+
}));
67+
var map, url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
68+
map = new ol.Map({
69+
target: 'map',
70+
view: new ol.View({
71+
center: [0, 0],
72+
zoom: 3,
73+
projection: 'EPSG:4326'
74+
}),
75+
overlays: [overlay]
76+
});
77+
var layer = new ol.layer.Tile({
78+
source: new ol.supermap.TileSuperMapRest({
79+
url: url
80+
}),
81+
projection: 'EPSG:4326'
82+
});
83+
map.addLayer(layer);
84+
layerService();
85+
86+
function layerService() {
87+
var getLayersInfoService = new ol.supermap.GetLayersInfoService(url);
88+
getLayersInfoService.on("complete", function (serviceResult) {
89+
var innerHtml = "";
90+
serviceResult.element.result.map(function (layer) {
91+
innerHtml += layer.name + "<br>";
92+
});
93+
content.innerHTML = innerHtml;
94+
overlay.setPosition([0, 0]);
95+
});
96+
getLayersInfoService.getLayersInfo();
97+
}
98+
</script>
13199
</html>

‎examples/openlayers/01_mapQueryByBounds.html‎

Lines changed: 59 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,98 +5,69 @@
55
<title>地图bounds查询</title>
66
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
77
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8-
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
9-
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
10-
<script type="text/javascript">
11-
var map, polygon, vectorLayer, resultLayer,
12-
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
13-
var extent = [-180.0, -90.0, 180, 90];
14-
var dpi = 96;
15-
var resolutions = [
16-
ol.supermap.Util.scaleToResolution(1.6901635716026555E-9, dpi, Unit.DEGREE),
17-
ol.supermap.Util.scaleToResolution(3.375595414562003E-9, dpi, Unit.DEGREE),
18-
ol.supermap.Util.scaleToResolution(6.751190829124006E-9, dpi, Unit.DEGREE),
19-
ol.supermap.Util.scaleToResolution(1.3502381658248012E-8, dpi, Unit.DEGREE),
20-
ol.supermap.Util.scaleToResolution(2.7004763316496024E-8, dpi, Unit.DEGREE),
21-
ol.supermap.Util.scaleToResolution(5.400952663299205E-8, dpi, Unit.DEGREE),
22-
ol.supermap.Util.scaleToResolution(1.080190532659841E-7, dpi, Unit.DEGREE),
23-
ol.supermap.Util.scaleToResolution(2.1603810653196843E-7, dpi, Unit.DEGREE),
24-
ol.supermap.Util.scaleToResolution(4.320762130639359E-7, dpi, Unit.DEGREE),
25-
ol.supermap.Util.scaleToResolution(8.641524261278681E-7, dpi, Unit.DEGREE),
26-
];
27-
function init() {
28-
map = new ol.Map({
29-
target: 'map',
30-
view: new ol.View({
31-
center: [0, 0],
32-
zoom: 2,
33-
projection: 'EPSG:4326'
34-
})
35-
});
36-
var layer = new ol.layer.Tile({
37-
source: new ol.supermap.TileSuperMapRest({
38-
url: url,
39-
tileGrid: new ol.tilegrid.TileGrid({
40-
extent: extent,
41-
resolutions: resolutions,
42-
})
8+
</head>
9+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
10+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
11+
</body>
12+
13+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
14+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
15+
<script type="text/javascript">
16+
var map, polygon, vectorLayer, resultLayer,
17+
url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
18+
map = new ol.Map({
19+
target: 'map',
20+
view: new ol.View({
21+
center: [0, 0],
22+
zoom: 2,
23+
projection: 'EPSG:4326'
24+
})
25+
});
26+
var layer = new ol.layer.Tile({
27+
source: new ol.supermap.TileSuperMapRest({
28+
url: url
29+
}),
30+
projection: 'EPSG:4326'
31+
});
32+
map.addLayer(layer);
33+
query();
34+
35+
function query() {
36+
polygon = new ol.geom.Polygon([[[0, 0], [60, 0], [60, 39], [0, 39], [0, 0]]]);
37+
var polygonSource = new ol.source.Vector({
38+
features: [new ol.Feature(polygon)],
39+
wrapX: false
40+
});
41+
vectorLayer = new ol.layer.Vector({
42+
source: polygonSource,
43+
style: new ol.style.Style({
44+
stroke: new ol.style.Stroke({
45+
color: 'blue',
46+
width: 3
4347
}),
44-
projection: 'EPSG:4326'
48+
fill: new ol.style.Fill({
49+
color: 'rgba(0, 0, 255, 0.1)'
50+
})
4551
})
46-
map.addLayer(layer);
47-
}
52+
});
53+
map.addLayer(vectorLayer);
4854

49-
function query() {
50-
clearLayer();
51-
polygon = new ol.geom.Polygon([[[0, 0], [116, 0], [116, 39], [0, 39], [0, 0]]]);
55+
var queryService = new ol.supermap.QueryService(url);
56+
queryService.on("complete", function (serviceResult) {
5257
var vectorSource = new ol.source.Vector({
53-
features: [new ol.Feature(polygon)]
58+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0]),
59+
wrapX: false
5460
});
55-
vectorLayer = new ol.layer.Vector({
56-
source: vectorSource,
57-
style: new ol.style.Style({
58-
stroke: new ol.style.Stroke({
59-
color: 'blue',
60-
width: 3
61-
}),
62-
fill: new ol.style.Fill({
63-
color: 'rgba(0, 0, 255, 0.1)'
64-
})
65-
})
66-
});
67-
map.addLayer(vectorLayer);
68-
69-
var queryService = new ol.supermap.QueryService(url);
70-
queryService.on("complete", function (serviceResult) {
71-
var vectorSource = new ol.source.Vector({
72-
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0])
73-
});
74-
resultLayer = new ol.layer.Vector({
75-
source: vectorSource,
76-
});
77-
map.addLayer(resultLayer);
61+
resultLayer = new ol.layer.Vector({
62+
source: vectorSource
7863
});
79-
var param = new QueryByBoundsParameters({
80-
queryParams: {name: "Capitals@World.1"},
81-
bounds: polygon.getExtent()
82-
});
83-
queryService.queryByBounds(param);
84-
}
85-
function clearLayer() {
86-
if (vectorLayer) {
87-
map.removeLayer(vectorLayer);
88-
}
89-
if (resultLayer) {
90-
map.removeLayer(resultLayer);
91-
}
92-
}
93-
</script>
94-
</head>
95-
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
96-
<div id="toolbar" style="height:44px; padding-top: 6px; text-align: right ">
97-
<input type="button" class="btn btn-default" value="地图bounds查询" onclick="query()"/>
98-
<input type="button" class="btn btn-default" value="清除结果" onclick="clearLayer()"/>
99-
</div>
100-
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
101-
</body>
64+
map.addLayer(resultLayer);
65+
});
66+
var param = new QueryByBoundsParameters({
67+
queryParams: {name: "Capitals@World.1"},
68+
bounds: polygon.getExtent()
69+
});
70+
queryService.queryByBounds(param);
71+
}
72+
</script>
10273
</html>

0 commit comments

Comments
 (0)