Skip to content

Commit 3a17a6f

Browse files
zhurczhurc
committed
对接分段专题图,并增加示例
1 parent 1d039e1 commit 3a17a6f

File tree

10 files changed

+1179
-936
lines changed

10 files changed

+1179
-936
lines changed

‎build/deps.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,8 @@ var deps = {
222222
"ThemeLayer": {
223223
"name": "专题图",
224224
"src": [
225-
'./src/leaflet/overlay/UniqueThemeLayer.js'
225+
'./src/leaflet/overlay/UniqueThemeLayer.js',
226+
'./src/leaflet/overlay/RangeThemeLayer.js'
226227
]
227228
}
228229
}

‎dist/iclient9-leaflet.js‎

Lines changed: 888 additions & 860 deletions
Large diffs are not rendered by default.

‎examples/css/editor.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@ html, body, .wrapper {
1414
.edit-container {
1515
background-color: #f9f9f9;
1616
position: relative;
17+
margin-top: 52px;
1718
}
1819

1920
.edit-container section.content {
2021
width: 100%;
21-
padding: 52px 0 0 0;
22+
padding: 0;
2223
position: absolute;
2324
top: 0;
24-
bottom: -52px;
25+
bottom: 0;
2526
}
2627

2728
.content .pane {
@@ -85,7 +86,7 @@ html, body, .wrapper {
8586
cursor: pointer;
8687
z-index: 900;
8788
position: absolute;
88-
top: 54px;
89+
top: 4px;
8990
right: 0;
9091
width: 54px;
9192
height: 30px;

‎examples/leaflet/config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,10 @@ var exampleConfig = {
424424
name: "单值专题图",
425425
thumbnail: "l_uniqueThemeLayer.png",
426426
fileName: "uniqueThemeLayer"
427+
}, {
428+
name: "分段专题图",
429+
thumbnail: "l_rangeThemeLayer.png",
430+
fileName: "rangeThemeLayer"
427431
}]
428432
}
429433

‎examples/leaflet/img/l_rangeThemeLayer.png‎

38.2 KB
Loading

‎examples/leaflet/rangeThemeLayer.html‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
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 rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
9+
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
10+
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
11+
<style type="text/css">
12+
.legendItemHeader,
13+
.legendItemValue {
14+
width: 120px;
15+
height: 18px;
16+
font-size: 14px;
17+
}
18+
</style>
19+
</head>
20+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
21+
<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
22+
<script type="text/javascript">
23+
var map, themeLayer, infoView,
24+
baseUrl = "http://113.209.64.227:8090/iserver/services/map-Jingjin/rest/maps/京津地区地图",
25+
dataUrl = "http://113.209.64.227:8090/iserver/services/data-Jingjin/rest/data";
26+
27+
init();
28+
function init() {
29+
// 检测是否支持 Canvas
30+
if (!document.createElement('canvas').getContext) {
31+
alert("您的浏览器不支持 Canvas，请升级！");
32+
return;
33+
}
34+
35+
map = L.map("map", {
36+
crs: L.CRS.EPSG4326,
37+
center: [40, 117],
38+
maxZoom: 18,
39+
zoom: 7
40+
});
41+
L.supermap.tiledMapLayer(baseUrl).addTo(map);
42+
initThemeLayer();
43+
}
44+
function initThemeLayer() {
45+
themeLayer = L.supermap.rangeThemeLayer("ThemeLayer", {
46+
// 开启 hover 高亮效果
47+
isHoverAble: true,
48+
opacity: 0.8
49+
}).addTo(map);
50+
51+
themeLayer.style = new SuperMap.ThemeStyle({
52+
shadowBlur: 16,
53+
shadowColor: "#000000",
54+
fillColor: "#FFFFFF"
55+
});
56+
57+
// hover 高亮样式
58+
themeLayer.highlightStyle = new SuperMap.ThemeStyle({
59+
stroke: true,
60+
strokeWidth: 4,
61+
strokeColor: 'blue',
62+
fillColor: "#00EEEE",
63+
fillOpacity: 0.8
64+
});
65+
66+
// 用于单值专题图的属性字段名称
67+
themeLayer.themeField = "POP_DENSITY99";
68+
// 风格数组，设定值对应的样式
69+
themeLayer.styleGroups = [{
70+
start: 0,
71+
end: 0.02,
72+
style: {
73+
color: '#FDE2CA'
74+
}
75+
}, {
76+
start: 0.02,
77+
end: 0.04,
78+
style: {
79+
color: '#FACE9C'
80+
}
81+
}, {
82+
start: 0.04,
83+
end: 0.06,
84+
style: {
85+
color: '#F09C42'
86+
}
87+
}, {
88+
start: 0.06,
89+
end: 0.1,
90+
style: {
91+
color: '#D0770B'
92+
}
93+
}, {
94+
start: 0.1,
95+
end: 0.2,
96+
style: {
97+
color: '#945305'
98+
}
99+
}];
100+
101+
themeLayer.on('mousemove', highLightLayer);
102+
addThemeLayer();
103+
}
104+
105+
function addThemeLayer() {
106+
var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
107+
queryParameter: new SuperMap.FilterParameter({
108+
name: "Jingjin",
109+
attributeFilter: "SMID > -1"
110+
}),
111+
toIndex: 500,
112+
datasetNames: ["Jingjin:BaseMap_R"]
113+
});
114+
L.supermap.featureService(dataUrl)
115+
.getFeaturesBySQL(getFeatureBySQLParams, processComplete, SuperMap.DataFormat.ISERVER);
116+
117+
}
118+
119+
function processComplete(serviceResult) {
120+
var result = serviceResult.result;
121+
if (result && result.features) {
122+
themeLayer.addFeatures(result.features);
123+
}
124+
initLegendView();
125+
initInfoView();
126+
}
127+
128+
//高亮时显示图层信息框的控件
129+
function initInfoView() {
130+
infoView = L.control({position: 'bottomright'});
131+
infoView.onAdd = function () {
132+
this._div = L.DomUtil.create('div', 'panel panel-primary infoPane');
133+
$(this._div).css("width", "272px");
134+
$("<div class='panel-heading'><h5 class='panel-title text-center'>属性表</h5></div>").appendTo(this._div);
135+
var content = $("<div class='panel-body content'></div>").appendTo(this._div);
136+
content.css('fontSize', '14px');
137+
return this._div;
138+
};
139+
140+
infoView.update = function (fea) {
141+
var content = $(".content");
142+
content.text("");
143+
if (!fea) {
144+
return;
145+
}
146+
var innerHtml = "ID: " + fea.attributes.SMID + "<br/>";
147+
innerHtml += "行政区名:" + fea.attributes.NAME + "<br/>";
148+
innerHtml += "人口密度:" + parseFloat(fea.attributes.POP_DENSITY99).toFixed(5) + "<br/>";
149+
content.html(innerHtml);
150+
}
151+
}
152+
153+
//图例控件
154+
function initLegendView() {
155+
var legendView = L.control({position: 'bottomright'});
156+
legendView.onAdd = function () {
157+
this._div = L.DomUtil.create('div', 'panel panel-primary legend ');
158+
var title = "<div class='panel-heading'><h5 class='panel-title text-center'>图例</h5></div>";
159+
$(title + "<div class='panel-body text-center' ><table>" +
160+
"<tr><td class='legendItemHeader'>人口密度(1999年)</td><td class='legendItemValue'>颜色</td></tr>" +
161+
"<tr> <td class='legendItemHeader'>0 - 0.02</td> <td class='legendItemValue' style='background: #FDE2CA'></td></tr>" +
162+
"<tr> <td class='legendItemHeader'>0.02 - 0.04</td> <td class='legendItemValue' style='background: #FACE9C'></td> </tr>" +
163+
"<tr> <td class='legendItemHeader'>0.04 - 0.06</td> <td class='legendItemValue' style='background: #F09C42'></td> </tr>" +
164+
"<tr> <td class='legendItemHeader'>0.06 - 0.1</td> <td class='legendItemValue' style='background: #D0770B'></td> </tr>" +
165+
"<tr> <td class='legendItemHeader'>0.1 - 0.2</td> <td class='legendItemValue' style='background: #945305'></td> </tr>" +
166+
"</table></div>"
167+
).appendTo(this._div);
168+
return this._div;
169+
};
170+
legendView.addTo(map);
171+
}
172+
173+
function highLightLayer(e) {
174+
if (e.target && e.target.refDataID) {
175+
var fea = themeLayer.getFeatureById(e.target.refDataID);
176+
if (fea) {
177+
infoView.addTo(map);
178+
infoView.update(fea);
179+
}
180+
} else if (infoView) {
181+
infoView.remove();
182+
}
183+
}
184+
185+
</script>
186+
</body>
187+
</html>

‎examples/leaflet/uniqueThemeLayer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>客户端单值专题图</title>
66
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
77
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
8-
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet-src.js"></script>
8+
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
99
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
1010
<script type="text/javascript" src="../../dist/iclient9-leaflet.js"></script>
1111
<style>
@@ -188,7 +188,7 @@
188188
var legendView = L.control({position: 'bottomright'});
189189
legendView.onAdd = function () {
190190
this._div = L.DomUtil.create('div', 'panel panel-primary legend ');
191-
var title = "<div class='panel-heading'><h5 class='panel-title text-center'>属性表</h5></div>";
191+
var title = "<div class='panel-heading'><h5 class='panel-title text-center'>图例</h5></div>";
192192
$(title + "<div class='panel-body text-left' ><table>" +
193193
"<tr><td class='legendItemHeader'>土地类型</td><td class='legendItemValue'>颜色</td></tr>" +
194194
"<tr> <td class='legendItemHeader' >草地</td> <td class='legendItemValue' style='background: #C1FFC1'></td></tr>" +

‎src/leaflet/overlay/RangeThemeLayer.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* Class: SuperMap.Layer.Range
3+
* 范围分段专题图。
4+
*
5+
* 范围分段专题图对数据（<SuperMap.Feature.Vector>）属性字段（attributes）的属性值进行分段，使用不同的颜色或符号（线型、填充）渲染不同范围段的属性值。
6+
* 分段专题图一般用来反映连续分布现象的数量或程度特征，如降水量的分布，土壤侵蚀强度的分布等。
7+
*
8+
* Inherits from:
9+
* - <GeoFeatureThemeLayer>
10+
*/
11+
var L = require("leaflet");
12+
var SuperMap = require('../../common/SuperMap');
13+
var GeoFeatureThemeLayer = require('./theme/GeoFeatureThemeLayer');
14+
15+
var RangeThemeLayer = GeoFeatureThemeLayer.extend({
16+
17+
18+
initialize: function (name, options) {
19+
GeoFeatureThemeLayer.prototype.initialize.call(this, name, options);
20+
//{Array(ThemeStyle)} 图层中专题要素的样式
21+
this.style = [];
22+
//{String} 用于指定专题要素样式的属性字段名称。
23+
// 此属性字段是要用户数据（feature） attributes 中包含的字段，且字段对应的值的类型必须是数值型。使用标签分组显示还需要设置 styleGroups 属性。
24+
25+
this.themeField = null;
26+
27+
//使用此属性需要设置 themeField 属性。
28+
//1.没有同时设置 themeField 和 styleGroups，则所有专题要素都使用本图层的 style 进行渲染；
29+
//2.同时设置 themeField 和 styleGroups，则按照 themeField 指定的字段名称获取用户数据（feature）attributes 中对应的属性值；
30+
// a.如果属性值等于 styleGroups 数组里某个元素定义的 value 值，则此专题要素取 styleGroups 数组中该元素定义的 style 进行渲染。
31+
// b.如果属性值不等于 styleGroups 数组里任何元素定义的 value 值，则此专题要素按照本图层的 style 进行渲染。
32+
//此数组每个元素对象必须有两个属性：value : 与字段 themeField 相对应的属性值；style：专题要素 style。
33+
this.styleGroups = [];
34+
},
35+
36+
37+
//根据用户数据（feature）设置专题要素的 Style
38+
getStyleByData: function (feat) {
39+
var me = this,
40+
feature = feat,
41+
style = SuperMap.Util.copyAttributesWithClip({}, me.style);
42+
43+
var groups = me.styleGroups,
44+
isSfInAttributes = false,//指定的 themeField 是否是 feature 的属性字段之一
45+
attribute = null; //属性值
46+
47+
var isValidStyleGroup = me.styleGroups && me.styleGroups.length > 0;
48+
49+
if (me.themeField && isValidStyleGroup && feature.attributes) {
50+
var Sf = me.themeField,
51+
attributes = feature.attributes;
52+
53+
for (var property in attributes) {
54+
if (Sf !== property) {
55+
continue;
56+
}
57+
isSfInAttributes = true;
58+
attribute = attributes[property];
59+
break;
60+
}
61+
}
62+
63+
//判断属性值是否属于styleGroups的某一个范围，以便对获取分组 style
64+
if (isSfInAttributes && isValidStyleGroup) {
65+
for (var i = 0, len = groups.length; i < len; i++) {
66+
if ((attribute >= groups[i].start) && (attribute < groups[i].end)) {
67+
var sty1 = groups[i].style;
68+
style = SuperMap.Util.copyAttributesWithClip(style, sty1);
69+
}
70+
}
71+
72+
}
73+
return style;
74+
}
75+
76+
});
77+
L.supermap.rangeThemeLayer = function (name, options) {
78+
return new RangeThemeLayer(name, options);
79+
};
80+
81+
module.exports = RangeThemeLayer;

0 commit comments

Comments
 (0)