Skip to content

Commit 3f4e241

Browse files
author
caoxinke
committed
添加OL3下空间分析、网络分析example。
1 parent f7ad798 commit 3f4e241

File tree

5 files changed

+297
-18
lines changed

5 files changed

+297
-18
lines changed

‎examples/ol3/01_tiledMapLayerNoProj.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
var map = new ol.Map({
2222
target: 'map',
2323
view: new ol.View({
24-
center: [mapJSONObj.center.x, mapJSONObj.center.y],
25-
zoom: 0,
24+
center: [-3375, 5105],
25+
zoom: 6,
2626
projection: projection
2727
})
2828
});

‎examples/ol3/02_filedStatistics.html‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
border-radius: 10px;
1717
border: 1px solid #cccccc;
1818
bottom: 12px;
19-
left: -50px;
19+
left: 50px;
2020
min-width: 280px;
2121
}
22+
2223
</style>
2324

2425
<div id="popup" class="ol-popup">
@@ -44,6 +45,7 @@
4445
var content = document.getElementById('popup-content');
4546
var extent = [-180.0, -90.0, 180, 90];
4647
var dpi = 96;
48+
var myControl = new ol.control.Control({element: container});
4749
var resolutions = [
4850
ol.supermap.Util.scaleToResolution(1.6901635716026555E-9, dpi, Unit.DEGREE),
4951
ol.supermap.Util.scaleToResolution(3.375595414562003E-9, dpi, Unit.DEGREE),
@@ -56,16 +58,9 @@
5658
ol.supermap.Util.scaleToResolution(4.320762130639359E-7, dpi, Unit.DEGREE),
5759
ol.supermap.Util.scaleToResolution(8.641524261278681E-7, dpi, Unit.DEGREE),
5860
];
59-
var overlay = new ol.Overlay(({
60-
element: container,
61-
autoPan: true,
62-
autoPanAnimation: {
63-
duration: 250
64-
}
65-
}));
6661
var map, currentData, layersName = [],
67-
mapURL = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
68-
dataURL = "http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data";
62+
mapURL = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
63+
dataURL = "http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data";
6964

7065
function init() {
7166
map = new ol.Map({
@@ -74,8 +69,7 @@
7469
center: [0, 0],
7570
zoom: 2,
7671
projection: 'EPSG:4326'
77-
}),
78-
overlays: [overlay],
72+
})
7973
});
8074
var layer = new ol.layer.Tile({
8175
source: new ol.supermap.Tile({
@@ -171,10 +165,10 @@
171165
return;
172166
}
173167
var innerHTMLStr = '<div style="line-height: 35px;">'
174-
+ '<strong>字段（' + serviceResult.fieldName + '）统计结果:</strong><div>';
168+
+ '<strong>字段（' + serviceResult.fieldName + '）统计结果:</strong><div>';
175169
var keys = ["AVERAGE", "MAX", "MIN", "STDDEVIATION", "SUM", "VARIANCE"];
176170
var tableStr = "<table id='trafficRes' class='table table-bordered'><tr><td>平均值</td><td>最大值</td><td>最小值</td>"
177-
+ "<td>标准差</td><td>和</td><td>方差</td></tr>";
171+
+ "<td>标准差</td><td>和</td><td>方差</td></tr>";
178172
var resultTR = "<tr>";
179173
for (var i = 0; i < keys.length; i++) {
180174
resultTR += "<td>" + serviceResult[keys[i]] + "</td>";
@@ -183,11 +177,11 @@
183177
tableStr += resultTR + "</table>";
184178
innerHTMLStr += tableStr;
185179
content.innerHTML = innerHTMLStr;
186-
overlay.setPosition([0, 0]);
180+
map.addControl(myControl);
187181
}
188182

189183
function clearfieldStatistic() {
190-
overlay.setPosition(undefined);
184+
map.removeControl(myControl);
191185
}
192186
</script>
193187

‎examples/ol3/03_bufferAnalystService.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>空间分析服务-缓冲区分析</title>
6+
<link rel="stylesheet" href="../css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css">
8+
<script type="text/javascript" src="https://openlayers.org/en/v4.0.1/build/ol-debug.js"></script>
9+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.js"></script>
10+
11+
<script type="text/javascript">
12+
var map, roadLine, resultLayer, service, dsBufferAnalystParameters,
13+
baseUrl = "http://support.supermap.com.cn:8090/iserver/services/map-changchun/rest/maps/长春市区图",
14+
serviceUrl = "http://support.supermap.com.cn:8090/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
15+
var extent = [48.4, -7668.25, 8958.85, -55.58];
16+
var projection = new ol.proj.Projection({
17+
extent: extent,
18+
units: 'm'
19+
});
20+
function init() {
21+
var mapService = new ol.supermap.MapService(baseUrl);
22+
mapService.on("complete", function (serviceResult) {
23+
var mapJSONObj = serviceResult.element.result;
24+
map = new ol.Map({
25+
target: 'map',
26+
view: new ol.View({
27+
center: [5105, -3375],
28+
zoom: 6,
29+
projection: projection
30+
})
31+
});
32+
var layer = new ol.layer.Tile({
33+
source: new ol.supermap.Tile(ol.supermap.Tile.optionsFromMapJSON(baseUrl, mapJSONObj))
34+
});
35+
map.addLayer(layer);
36+
37+
roadLine = new ol.geom.LineString([
38+
[5305.19551436013, -3376.9669111768926],
39+
[5075.3145648369318, -3378.0037556404409],
40+
[5006.0235999418364, -3358.8890067038628],
41+
[4960.9674060199022, -3349.3316322355736],
42+
[4933.319287022352, -3337.3849141502124]
43+
]);
44+
45+
var vectorSource = new ol.source.Vector({
46+
features: [new ol.Feature(roadLine)]
47+
});
48+
var vectorLayer = new ol.layer.Vector({
49+
source: vectorSource,
50+
style: new ol.style.Style({
51+
stroke: new ol.style.Stroke({
52+
color: 'blue',
53+
width: 3
54+
}),
55+
fill: new ol.style.Fill({
56+
color: 'rgba(0, 0, 255, 0.1)'
57+
})
58+
})
59+
});
60+
map.addLayer(vectorLayer);
61+
62+
service = new ol.supermap.SpatialAnalystService(serviceUrl);
63+
dsBufferAnalystParameters = new DatasetBufferAnalystParameters({
64+
dataset: "RoadLine2@Changchun",
65+
filterQueryParameter: new FilterParameter({
66+
attributeFilter: "NAME='团结路'"
67+
}),
68+
bufferSetting: new BufferSetting({
69+
endType: SuperMap.REST.BufferEndType.ROUND,
70+
leftDistance: {value: 10},
71+
rightDistance: {value: 10},
72+
semicircleLineSegment: 10
73+
})
74+
});
75+
service.on('complete', function (serviceResult) {
76+
var vectorSource = new ol.source.Vector({
77+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result)
78+
})
79+
resultLayer = new ol.layer.Vector({
80+
source: vectorSource,
81+
style: new ol.style.Style({
82+
stroke: new ol.style.Stroke({
83+
color: 'red',
84+
width: 1
85+
}),
86+
fill: new ol.style.Fill({
87+
color: 'rgba(255, 0, 0, 0.1)'
88+
})
89+
})
90+
});
91+
map.addLayer(resultLayer);
92+
});
93+
});
94+
mapService.getMapStatus();
95+
}
96+
97+
function bufferAnalystProcess() {
98+
clearLayer();
99+
service.bufferAnalysis(dsBufferAnalystParameters);
100+
}
101+
102+
function clearLayer() {
103+
if (resultLayer) {
104+
map.removeLayer(resultLayer);
105+
}
106+
}
107+
108+
</script>
109+
</head>
110+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
111+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
112+
<input type="button" class="btn btn-primary" value="缓冲区分析" onclick="bufferAnalystProcess()"/>
113+
<input type="button" class="btn btn-primary" value="清除" onclick="clearLayer()"/>
114+
</div>
115+
116+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
117+
</body>
118+
</html>

‎examples/ol3/04_findServiceAreas.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>网络分析服务-服务区分析</title>
6+
<link rel="stylesheet" href="../css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css">
8+
<script type="text/javascript" src="https://openlayers.org/en/v4.0.1/build/ol-debug.js"></script>
9+
<script type="text/javascript" src="../../dist/SuperMapiClient9 for OL3.js"></script>
10+
11+
<script type="text/javascript">
12+
var map, resultLayer, service, parameter, point,
13+
baseUrl = "http://support.supermap.com.cn:8090/iserver/services/map-changchun/rest/maps/长春市区图",
14+
serviceUrl = "http://support.supermap.com.cn:8090/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
15+
var extent = [48.4, -7668.25, 8958.85, -55.58];
16+
var projection = new ol.proj.Projection({
17+
extent: extent,
18+
units: 'm'
19+
});
20+
function init() {
21+
var mapService = new ol.supermap.MapService(baseUrl);
22+
mapService.on("complete", function (serviceResult) {
23+
var mapJSONObj = serviceResult.element.result;
24+
map = new ol.Map({
25+
target: 'map',
26+
view: new ol.View({
27+
center: [5105, -3375],
28+
zoom: 4,
29+
projection: projection
30+
})
31+
});
32+
var layer = new ol.layer.Tile({
33+
source: new ol.supermap.Tile(ol.supermap.Tile.optionsFromMapJSON(baseUrl, mapJSONObj))
34+
});
35+
map.addLayer(layer);
36+
37+
point = new ol.geom.Point([5605, -3375]);
38+
var iconStyle = new ol.style.Style({
39+
image: new ol.style.Icon(({
40+
src: 'http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/images/markerbig_select.png'
41+
}))
42+
});
43+
var feature = new ol.Feature(point);
44+
feature.setStyle(iconStyle);
45+
var vectorSource = new ol.source.Vector({
46+
features: [feature]
47+
});
48+
vectorLayer = new ol.layer.Vector({
49+
source: vectorSource,
50+
});
51+
map.addLayer(vectorLayer);
52+
53+
service = new ol.supermap.NetworkAnalystService(serviceUrl);
54+
service.on('complete', function (serviceResult) {
55+
var vectorSource = new ol.source.Vector({
56+
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[0])
57+
})
58+
resultLayer = new ol.layer.Vector({
59+
source: vectorSource,
60+
});
61+
map.addLayer(resultLayer);
62+
});
63+
});
64+
mapService.getMapStatus();
65+
}
66+
67+
function findServiceAreas() {
68+
clearLayer();
69+
var resultSetting = new TransportationAnalystResultSetting({
70+
returnEdgeFeatures: true,
71+
returnEdgeGeometry: true,
72+
returnEdgeIDs: true,
73+
returnNodeFeatures: true,
74+
returnNodeGeometry: true,
75+
returnNodeIDs: true,
76+
returnPathGuides: true,
77+
returnRoutes: true
78+
});
79+
var analystParameter = new TransportationAnalystParameter({
80+
resultSetting: resultSetting,
81+
weightFieldName: "length"
82+
});
83+
parameter = new FindServiceAreasParameters({
84+
centers: [point],
85+
isAnalyzeById: false,
86+
parameter: analystParameter
87+
});
88+
parameter.weights = [400 + Math.random() * 100];
89+
service.findServiceAreas(parameter);
90+
}
91+
92+
function clearLayer() {
93+
if (resultLayer) {
94+
map.removeLayer(resultLayer);
95+
}
96+
}
97+
98+
</script>
99+
</head>
100+
<body onload="init()" style=" margin: 0;overflow: hidden;background: #fff;">
101+
<div id="toolbar" style=" position: relative;padding-top: 10px; padding-bottom: 10px;">
102+
<input type="button" class="btn btn-primary" value="服务区分析" onclick="findServiceAreas()"/>
103+
<input type="button" class="btn btn-primary" value="清除" onclick="clearLayer()"/>
104+
</div>
105+
106+
<div id="map" style="margin:0 auto;position: relative; height: 510px;border: 1px solid #3473b7;"></div>
107+
</body>
108+
</html>

‎examples/ol3/examples.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ <h3>Openlayers3范例分类</h3>
3838
<ul class="nav nav-tabs" id='myTab'>
3939
<li class='active'><a href="#maps" data-toggle="tab">地图</a></li>
4040
<li><a href="#data" data-toggle="tab">数据</a></li>
41+
<li><a href="#spatialAnalyst" data-toggle="tab">空间分析</a></li>
42+
<li><a href="#networkAnalyst" data-toggle="tab">网络分析</a></li>
4143
</ul>
4244

4345
<div class='tab-content' id='myTabContent'>
@@ -144,6 +146,63 @@ <h3>Openlayers3范例分类</h3>
144146
</div>
145147
</div>
146148

149+
<div class='tab-pane fade' id='spatialAnalyst'>
150+
151+
<div class="container-fluid">
152+
<div class="row-fluid">
153+
<div class="span2">
154+
<ul class='nav nav-pills'><span>></span>
155+
<li>分析</li>
156+
</ul>
157+
</div>
158+
<div class="span10">
159+
<ul class='nav nav-pills'>
160+
<li><a href='javascript:void(0)' target='_self' data-name='03_bufferAnalystService'>缓冲区分析</a></li>
161+
</ul>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
167+
<div class='tab-pane fade' id='networkAnalyst'>
168+
169+
<div class="container-fluid">
170+
<div class="row-fluid">
171+
<div class="span2">
172+
<ul class='nav nav-pills'><span>></span>
173+
<li>分析</li>
174+
</ul>
175+
</div>
176+
<div class="span10">
177+
<ul class='nav nav-pills'>
178+
<li><a href='javascript:void(0)' target='_self' data-name='04_findServiceAreas'>服务区分析</a></li>
179+
</ul>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
185+
<div class='tab-pane fade' id='trafficTransferAnalyst'>
186+
187+
<div class="container-fluid">
188+
<div class="row-fluid">
189+
<div class="span2">
190+
<ul class='nav nav-pills'><span>></span>
191+
<li>分析</li>
192+
</ul>
193+
</div>
194+
<div class="span10">
195+
<ul class='nav nav-pills'>
196+
<li><a href='javascript:void(0)' target='_self' data-name='06_trafficTransferAnalystService'>交通换乘</a></li>
197+
</ul>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
203+
</div>
204+
</div>
205+
147206
<div class='page-header'>
148207

149208
<h3><span id='demo-title'></span></h3>

0 commit comments

Comments
 (0)