Skip to content

Commit 687ec7a

Browse files
zhurczhurc
committed
2 parents 590fbc6 + 83da702 commit 687ec7a

File tree

7 files changed

+2239
-1767
lines changed

7 files changed

+2239
-1767
lines changed

‎build/deps.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,8 @@ var deps = {
333333
"src": [
334334
"./src/openlayers/overlay/theme/theme.js",
335335
"./src/openlayers/overlay/theme/geoFeature.js",
336-
"./src/openlayers/overlay/theme/unique.js"
336+
"./src/openlayers/overlay/theme/unique.js",
337+
"./src/openlayers/overlay/theme/range.js"
337338
]
338339
}
339340
}

‎dist/iclient9-openlayers.js‎

Lines changed: 1866 additions & 1752 deletions
Large diffs are not rendered by default.

‎examples/openlayers/config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,10 @@ var exampleConfig = {
421421
name: "单值专题图",
422422
thumbnail: "uniqueThemeLayer.png",
423423
fileName: "uniqueThemeLayer"
424+
}, {
425+
name: "分段专题图",
426+
thumbnail: "rangeThemeLayer.png",
427+
fileName: "rangeThemeLayer"
424428
}]
425429
}
426430
}

‎examples/openlayers/img/rangeThemeLayer.png‎

75.9 KB
Loading

‎examples/openlayers/rangeThemeLayer.html‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
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 type="text/css">
9+
/*图例 style*/
10+
.legend {
11+
position: absolute;
12+
right: 10px;
13+
top: 350px;
14+
width: 250px;
15+
text-align: center;
16+
border: 2px solid #D6E3F1;
17+
background: #FFF;
18+
z-index: 1000;
19+
display: none;
20+
}
21+
22+
.legendTitle {
23+
background: #1E90FF;
24+
}
25+
26+
.legendContent {
27+
padding-left: 15px;
28+
padding-right: 15px;
29+
height: 160px;
30+
display: block;
31+
overflow-y: auto;
32+
}
33+
34+
.legendItemHeader {
35+
top: 5px;
36+
width: 100px;
37+
height: 18px;
38+
text-align: center;
39+
}
40+
41+
.legendItemValue {
42+
top: 5px;
43+
width: 120px;
44+
text-align: center;
45+
height: 18px;
46+
}
47+
48+
/*信息框 style*/
49+
#infoBox {
50+
border: 2px solid #D6E3F1;
51+
position: absolute;
52+
right: 10px;
53+
top: 250px;
54+
width: 250px;
55+
z-index: 999;
56+
display: none;
57+
}
58+
59+
<!--</style>
60+
</head>
61+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
62+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
63+
<div>
64+
<div id="mapLegend" class="legend">
65+
<div class="legendTitle">
66+
<span>图例</span>
67+
</div>
68+
<div class="legendContent">
69+
<table>
70+
<tr>
71+
<td class="legendItemHeader">人口密度(1999年)</td>
72+
<td class="legendItemValue">颜色</td>
73+
</tr>
74+
<tr>
75+
<td class="legendItemHeader">0 - 0.02</td>
76+
<td class="legendItemValue" style="background: #FDE2CA"></td>
77+
</tr>
78+
<tr>
79+
<td class="legendItemHeader">0.02 - 0.04</td>
80+
<td class="legendItemValue" style="background: #FACE9C"></td>
81+
</tr>
82+
<tr>
83+
<td class="legendItemHeader">0.04 - 0.06</td>
84+
<td class="legendItemValue" style="background: #F09C42"></td>
85+
</tr>
86+
<tr>
87+
<td class="legendItemHeader">0.06 - 0.1</td>
88+
<td class="legendItemValue" style="background: #D0770B"></td>
89+
</tr>
90+
<tr>
91+
<td class="legendItemHeader">0.1 - 0.2</td>
92+
<td class="legendItemValue" style="background: #945305"></td>
93+
</tr>
94+
</table>
95+
</div>
96+
</div>
97+
<div id="infoBox">
98+
<div style="text-align: center;background: #1E90FF"> 属性表 </div>
99+
<div id="infoContent" style="overflow-y: auto; padding: 5px; background-color: #FFFFFF">
100+
</div>
101+
</div>
102+
</div>
103+
<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
104+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
105+
106+
<script type="text/javascript">
107+
var map, options, themeLayer, themeSource
108+
baseUrl = "http://113.209.64.227:8090/iserver/services/map-Jingjin/rest/maps/京津地区地图",
109+
url2 = "http://113.209.64.227:8090/iserver/services/data-Jingjin/rest/data",
110+
extent = [114.59, 37.76, 119.51, 42.31],
111+
projection = new ol.proj.Projection({
112+
extent: extent,
113+
units: 'm'
114+
});
115+
new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
116+
var mapJSONObj = serviceResult.result;
117+
map = new ol.Map({
118+
target: 'map',
119+
view: new ol.View({
120+
center: [116.85, 39.79],
121+
zoom: 2,
122+
projection: projection
123+
})
124+
});
125+
options = ol.supermap.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
126+
var layer = new ol.layer.Tile({
127+
source: new ol.supermap.TileSuperMapRest(options)
128+
});
129+
map.addLayer(layer);
130+
131+
themeSource = new ol.source.Range("ThemeLayer", {map: map});
132+
themeSource.setOpacity(0.8);
133+
themeLayer = new ol.layer.Image({
134+
source: themeSource
135+
});
136+
themeLayer.setOpacity(0.8);
137+
themeSource.style = {
138+
shadowBlur: 16,
139+
shadowColor: "#000000",
140+
fillColor: "#FFFFFF"
141+
};
142+
// 开启 hover 高亮效果
143+
themeSource.isHoverAble = true;
144+
// hover 高亮样式
145+
themeSource.highlightStyle = {
146+
stroke: true,
147+
strokeWidth: 4,
148+
strokeColor: 'blue',
149+
fillColor: "#00EEEE",
150+
fillOpacity: 0.8
151+
};
152+
// 用于单值专题图的属性字段名称
153+
themeSource.themeField = "POP_DENSITY99";
154+
// 风格数组，设定值对应的样式
155+
themeSource.styleGroups = [
156+
{
157+
start: 0,
158+
end: 0.02,
159+
style: {
160+
color: '#FDE2CA'
161+
}
162+
},
163+
{
164+
start: 0.02,
165+
end: 0.04,
166+
style: {
167+
color: '#FACE9C'
168+
}
169+
},
170+
{
171+
start: 0.04,
172+
end: 0.06,
173+
style: {
174+
color: '#F09C42'
175+
}
176+
},
177+
{
178+
start: 0.06,
179+
end: 0.1,
180+
style: {
181+
color: '#D0770B'
182+
}
183+
},
184+
{
185+
start: 0.1,
186+
end: 0.2,
187+
style: {
188+
color: '#945305'
189+
}
190+
}
191+
];
192+
//专题图层 mousemove 事件
193+
themeSource.on('mousemove', function (e) {
194+
if (e.target && e.target.refDataID) {
195+
document.getElementById("infoBox").style.display = "block";
196+
var fid = e.target.refDataID;
197+
var fea = themeSource.getFeatureById(fid);
198+
if (fea) {
199+
document.getElementById("infoContent").innerHTML = "";
200+
document.getElementById("infoContent").innerHTML += "ID: " + fea.attributes.SMID + "<br/>";
201+
document.getElementById("infoContent").innerHTML += "行政区名:" + fea.attributes.NAME + "<br/>";
202+
document.getElementById("infoContent").innerHTML += "人口密度:" + parseFloat(fea.attributes.POP_DENSITY99).toFixed(5) + "<br/>";
203+
}
204+
}
205+
else {
206+
document.getElementById("infoContent").innerHTML = "";
207+
document.getElementById("infoBox").style.display = "none";
208+
}
209+
});
210+
211+
var pointerInteraction = new ol.interaction.Pointer();
212+
pointerInteraction.handleMoveEvent_ = function (event) {
213+
themeSource.fire('mousemove', event);
214+
};
215+
map.addInteraction(pointerInteraction);
216+
clearLayer();
217+
var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
218+
getFeatureParam = new SuperMap.FilterParameter({
219+
name: "Jingjin",
220+
attributeFilter: "SMID > -1"
221+
});
222+
getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
223+
queryParameter: getFeatureParam,
224+
toIndex: 500,
225+
datasetNames:["Jingjin:BaseMap_R"]
226+
});
227+
getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
228+
format: SuperMap.DataFormat.ISERVER,
229+
eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}
230+
});
231+
getFeatureBySQLService.processAsync(getFeatureBySQLParams);
232+
});
233+
234+
function processCompleted(getFeaturesEventArgs) {
235+
var result = getFeaturesEventArgs.result;
236+
if (result && result.features) {
237+
themeSource.addFeatures(result.features);
238+
map.addLayer(themeLayer);
239+
}
240+
//显示图例
241+
document.getElementById("mapLegend").style.display = "block";
242+
}
243+
244+
function processFailed(e) {
245+
alert(e.error.errorMsg);
246+
}
247+
248+
function clearLayer() {
249+
document.getElementById("mapLegend").style.display = "none";
250+
document.getElementById("infoBox").style.display = "none";
251+
//先清除上次的显示结果
252+
themeSource.clear();
253+
}
254+
255+
</script>
256+
</body>
257+
</html>

‎examples/openlayers/uniqueThemeLayer.html‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,6 @@
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">
88
<style type="text/css">
9-
body {
10-
margin: 0;
11-
overflow: hidden;
12-
background: #fff;
13-
}
14-
15-
#map {
16-
position: relative;
17-
height: 510px;
18-
border: 1px solid #3473b7;
19-
}
20-
219
.legend {
2210
position: absolute;
2311
right: 10px;
@@ -68,9 +56,9 @@
6856

6957
</style>
7058
</head>
71-
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
59+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
60+
<div id="map" style="width: 100%;height:100%;border: 1px solid #dddddd"></div>
7261
<div>
73-
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
7462
<div id="mapLegend" class="legend">
7563
<div class="legendTitle">
7664
<span>图例</span>

0 commit comments

Comments
 (0)