Skip to content

Commit 58c3e4c

Browse files
author
caoxinke
committed
添加OpenLayers对接iServer地址匹配服务的例子。
1 parent e3d0de7 commit 58c3e4c

File tree

11 files changed

+1516
-565
lines changed

11 files changed

+1516
-565
lines changed

‎build/deps.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ var deps = {
8989
//ProcessingJobs
9090
"./src/common/iServer/KernelDensityJobsService.js",
9191
"./src/common/iServer/BuildCacheJobsService.js",
92+
//AddressService
93+
"./src/common/iServer/AddressService.js",
9294
],
9395
"graph": [
9496
"./src/common/iServer/Bar.js",
@@ -328,6 +330,12 @@ var deps = {
328330
"src": [
329331
"./src/openlayers/services/ProcessingJobsService.js"
330332
]
333+
},
334+
"Address": {
335+
"name": "地理匹配服务",
336+
"src": [
337+
"./src/openlayers/services/AddressService.js"
338+
]
331339
}
332340
},
333341
"overlay": {

‎dist/iclient9-openlayers.js‎

Lines changed: 883 additions & 561 deletions
Large diffs are not rendered by default.

‎examples/openlayers/addressService.html‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>地址匹配服务</title>
6+
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
8+
<style>
9+
.control {
10+
position: absolute;
11+
top: 10px;
12+
right: 10px;
13+
}
14+
15+
.ol-popup {
16+
position: absolute;
17+
background-color: white;
18+
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
19+
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
20+
padding: 15px;
21+
border-radius: 10px;
22+
border: 1px solid #cccccc;
23+
bottom: 12px;
24+
left: -50px;
25+
min-width: 300px;
26+
}
27+
28+
.ol-popup:after, .ol-popup:before {
29+
top: 100%;
30+
border: solid transparent;
31+
content: " ";
32+
height: 0;
33+
width: 0;
34+
position: absolute;
35+
pointer-events: none;
36+
}
37+
38+
.ol-popup:after {
39+
border-top-color: white;
40+
border-width: 10px;
41+
left: 48px;
42+
margin-left: -10px;
43+
}
44+
45+
.ol-popup:before {
46+
border-top-color: #cccccc;
47+
border-width: 11px;
48+
left: 48px;
49+
margin-left: -11px;
50+
}
51+
</style>
52+
</head>
53+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
54+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
55+
<div id="control" class="control" style='width:20%'>
56+
<div class="panel panel-default">
57+
<div class="panel-body">
58+
<ul class="nav nav-tabs nav-justified">
59+
<li id="geocode" role="presentation" class="active"><a href="#">正向匹配</a></li>
60+
<li id="geodecode" role="presentation"><a href="#">反向匹配</a></li>
61+
</ul>
62+
<p>
63+
<div class="tab-content">
64+
<div id="geocodeParam" role="tabpanel" class="tab-pane deplistContent active">
65+
<div class="input-group">
66+
<span class="input-group-addon">地址　　　</span>
67+
<input id="address" type="text" class="form-control" placeholder="公司"/>
68+
</div>
69+
<p>
70+
<div class="input-group">
71+
<span class="input-group-addon">过滤字段　</span>
72+
<input id="filters" type="text" class="form-control"
73+
placeholder="北京市,海淀区"/>
74+
</div>
75+
<p>
76+
<div class="input-group">
77+
<span class="input-group-addon">最小索引　</span>
78+
<input id="fromIndex" type="text" class="form-control"
79+
placeholder="0"/>
80+
</div>
81+
<p>
82+
<div class="input-group">
83+
<span class="input-group-addon">最大索引　</span>
84+
<input id="toIndex" type="text" class="form-control"
85+
placeholder="10"/>
86+
</div>
87+
<p>
88+
<div class="input-group">
89+
<span class="input-group-addon">最大结果数</span>
90+
<input id="maxReturn" type="text" class="form-control"
91+
placeholder="-1"/>
92+
</div>
93+
<p>
94+
<div class="input-group">
95+
<span class="input-group-addon">坐标系　　</span>
96+
<input id="prjCoordSys" type="text" class="form-control"
97+
placeholder="{epsgcode:4326}"/>
98+
</div>
99+
<p>
100+
<div align="right">
101+
<input type="button" id='codeBtn' class="btn btn-primary" value="匹配"/>
102+
</div>
103+
</div>
104+
<div id="geodecodeParam" role="tabpanel" class="tab-pane deplistContent">
105+
<div class="input-group">
106+
<span class="input-group-addon">横坐标　　</span>
107+
<input id="xCoord" type="text" class="form-control" placeholder="116.3518541194752"/>
108+
</div>
109+
<p>
110+
<div class="input-group">
111+
<span class="input-group-addon">纵坐标　　</span>
112+
<input id="yCoord" type="text" class="form-control"
113+
placeholder="40.00097839595237"/>
114+
</div>
115+
<p>
116+
<div class="input-group">
117+
<span class="input-group-addon">过滤字段　</span>
118+
<input id="filters2" type="text" class="form-control"
119+
placeholder="北京市,海淀区"/>
120+
</div>
121+
<p>
122+
<div class="input-group">
123+
<span class="input-group-addon">最小索引　</span>
124+
<input id="fromIndex2" type="text" class="form-control"
125+
placeholder="0"/>
126+
</div>
127+
<p>
128+
<div class="input-group">
129+
<span class="input-group-addon">最大索引　</span>
130+
<input id="toIndex2" type="text" class="form-control"
131+
placeholder="10"/>
132+
</div>
133+
<p>
134+
<div class="input-group">
135+
<span class="input-group-addon">最大结果数</span>
136+
<input id="maxReturn2" type="text" class="form-control"
137+
placeholder="-1"/>
138+
</div>
139+
<p>
140+
<div class="input-group">
141+
<span class="input-group-addon">查询半径　</span>
142+
<input id="geoDecodingRadius" type="text" class="form-control"
143+
placeholder="-1"/>
144+
</div>
145+
<p>
146+
<div class="input-group">
147+
<span class="input-group-addon">坐标系　　</span>
148+
<input id="prjCoordSys2" type="text" class="form-control"
149+
placeholder="{epsgcode:4326}"/>
150+
</div>
151+
<p>
152+
<div align="right">
153+
<input type="button" id='decodeBtn' class="btn btn-primary" value="匹配"/>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
<div id="info" class="ol-popup">
161+
<div id="info-content"></div>
162+
</div>
163+
164+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
165+
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
166+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
167+
<script type="text/javascript">
168+
var map, url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China_4326",
169+
addressUrl = "http://localhost:8090/iserver/services/addressmatch-BeijingAddress/restjsr/v1/address",
170+
imgUrl = "http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/images/markerbig_select.png",
171+
vectorSource = new ol.source.Vector(),
172+
addressService = new ol.supermap.AddressService(addressUrl),
173+
view = new ol.View({
174+
center: [116.383572, 39.914714],
175+
zoom: 12,
176+
projection: 'EPSG:4326'
177+
}),
178+
container = document.getElementById('info'),
179+
content = document.getElementById('info-content'),
180+
overlay = new ol.Overlay(({
181+
element: container,
182+
autoPan: true,
183+
autoPanAnimation: {
184+
duration: 250
185+
},
186+
offset: [0, -20]
187+
}));
188+
map = new ol.Map({
189+
target: 'map',
190+
view: view,
191+
overlays: [overlay]
192+
});
193+
var control = new ol.control.Control({element: document.getElementById('control')});
194+
control.setMap(map);
195+
map.addControl(control);
196+
var select = new ol.interaction.Select();
197+
map.addInteraction(select);
198+
select.on('select', function (e) {
199+
if (e.selected.length > 0) {
200+
var feature = e.selected[0];
201+
var innerHTML = "";
202+
innerHTML += "地址:" + feature.getProperties().address + "<br>";
203+
var x = Number(feature.getProperties().location.x.toString().match(/^\d+(?:\.\d{0,2})?/));
204+
var y = Number(feature.getProperties().location.y.toString().match(/^\d+(?:\.\d{0,2})?/));
205+
innerHTML += "坐标:[" + x + "," + y + "]<br>";
206+
if (feature.getProperties().score > 0) {
207+
innerHTML += "匹配度:" + feature.getProperties().score + "<br>";
208+
}
209+
innerHTML += "过滤字段:" + feature.getProperties().filters + "<br>";
210+
content.innerHTML = innerHTML;
211+
overlay.setPosition(feature.getGeometry().flatCoordinates);
212+
} else if (overlay) {
213+
overlay.setPosition(undefined);
214+
}
215+
});
216+
217+
var layer = new ol.layer.Tile({
218+
source: new ol.supermap.TileSuperMapRest({
219+
url: url,
220+
wrapX: true,
221+
projection: 'EPSG:4326'
222+
})
223+
});
224+
var vectorLayer = new ol.layer.Vector({
225+
source: vectorSource
226+
});
227+
map.addLayer(layer);
228+
map.addLayer(vectorLayer);
229+
230+
$("#geocode").click(function () {
231+
$("#geocode")[0].className = 'active';
232+
$("#geodecode")[0].className = '';
233+
$("#geocodeParam").addClass('active');
234+
$("#geodecodeParam").removeClass('active');
235+
});
236+
$("#geodecode").click(function () {
237+
$("#geocode")[0].className = '';
238+
$("#geodecode")[0].className = 'active';
239+
$("#geodecodeParam").addClass('active');
240+
$("#geocodeParam").removeClass('active');
241+
});
242+
$("#codeBtn").click(function () {
243+
select.featureOverlay_.getSource().clear();
244+
overlay.setPosition(undefined);
245+
vectorSource.clear();
246+
var geoCodeParam = new SuperMap.GeoCodingParameter({
247+
address: $('#address').val() || $('#address').attr('placeholder'),
248+
fromIndex: $('#fromIndex').val() || $('#fromIndex').attr('placeholder'),
249+
toIndex: $('#toIndex').val() || $('#toIndex').attr('placeholder'),
250+
filters: $('#filters').val() || $('#filters').attr('placeholder'),
251+
prjCoordSys: $('#prjCoordSys').val() || $('#prjCoordSys').attr('placeholder'),
252+
maxReturn: $('#maxReturn').val() || $('#maxReturn').attr('placeholder')
253+
});
254+
addressService.code(geoCodeParam, function (obj) {
255+
var features = [];
256+
obj.result.map(function (item) {
257+
var feature = new ol.Feature();
258+
feature.setGeometry(new ol.geom.Point([item.location.x, item.location.y]));
259+
feature.setProperties({
260+
location: item.location,
261+
address: item.address,
262+
score: item.score,
263+
filters: item.filters
264+
});
265+
feature.setStyle(new ol.style.Style({
266+
image: new ol.style.Icon(({
267+
anchor: [0.5, 1],
268+
src: imgUrl
269+
}))
270+
}));
271+
features.push(feature);
272+
});
273+
vectorSource.addFeatures(features);
274+
view.animate({zoom: 11}, {center: [116.383572, 39.914714]});
275+
});
276+
});
277+
$("#decodeBtn").click(function () {
278+
select.featureOverlay_.getSource().clear();
279+
overlay.setPosition(undefined);
280+
vectorSource.clear();
281+
var geoDecodeParam = new SuperMap.GeoDecodingParameter({
282+
x: $('#xCoord').val() || $('#xCoord').attr('placeholder'),
283+
y: $('#yCoord').val() || $('#yCoord').attr('placeholder'),
284+
fromIndex: $('#fromIndex2').val() || $('#fromIndex2').attr('placeholder'),
285+
toIndex: $('#toIndex2').val() || $('#toIndex2').attr('placeholder'),
286+
filters: $('#filters2').val() || $('#filters2').attr('placeholder'),
287+
prjCoordSys: $('#prjCoordSys2').val() || $('#prjCoordSys2').attr('placeholder'),
288+
maxReturn: $('#maxReturn2').val() || $('#maxReturn2').attr('placeholder'),
289+
geoDecodingRadius: $('#geoDecodingRadius').val() || $('#geoDecodingRadius').attr('placeholder'),
290+
});
291+
addressService.decode(geoDecodeParam, function (obj) {
292+
var features = [];
293+
obj.result.map(function (item) {
294+
var feature = new ol.Feature();
295+
feature.setGeometry(new ol.geom.Point([item.location.x, item.location.y]));
296+
feature.setProperties({
297+
location: item.location,
298+
address: item.address,
299+
score: item.score,
300+
filters: item.filters
301+
});
302+
feature.setStyle(new ol.style.Style({
303+
image: new ol.style.Icon(({
304+
anchor: [0.5, 1],
305+
src: imgUrl
306+
}))
307+
}));
308+
features.push(feature);
309+
});
310+
vectorSource.addFeatures(features);
311+
view.animate({zoom: 11}, {center: [geoDecodeParam.x, geoDecodeParam.y]});
312+
});
313+
});
314+
</script>
315+
</body>
316+
</html>

‎examples/openlayers/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,14 @@ var exampleConfig = {
250250
thumbnail: "buildCacheService.png",
251251
fileName: "buildCacheService"
252252
}]
253+
},
254+
"address": {
255+
name: "地址匹配",
256+
content: [{
257+
name: "地址匹配",
258+
thumbnail: "addressService.png",
259+
fileName: "addressService"
260+
}]
253261
}
254262
}
255263
},

‎examples/openlayers/img/addressService.png‎

53.1 KB
Loading

examples/openlayers/mapNycTaxi.html renamed to examples/openlayers/mapvNycTaxi.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,13 @@
8484
popup.appendChild(gui.domElement);
8585
gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
8686
gui.addColor(options, 'fillStyle').onChange(finished);
87-
8887
function finished() {
8988
layer.getSource().update(options);
9089
}
9190

9291
var control = new ol.control.Control({element: popup});
9392
control.setMap(map);
9493
map.addControl(control);
95-
9694
}
9795
</script>
9896
</body>

0 commit comments

Comments
 (0)