Skip to content

Commit 876c43b

Browse files
author
ParnDeedlit&潘卓然
committed
【站点】【新增】【新增客户端专题图示例】
1 parent 6eb88a7 commit 876c43b

File tree

5 files changed

+670
-711
lines changed

5 files changed

+670
-711
lines changed

‎website/public/static/demo/mapboxgl/example/client-view/clienttheme/grade-symbol.htm‎

Lines changed: 187 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,199 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3-
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5-
<title>客户端等级符号专题图</title>
6-
<!--引入当前页面样式表-->
7-
<link href="./style.css" rel="stylesheet" type="text/css" />
8-
<script src="./static/libs/include-mapboxgl-local.js"></script>
9-
<style>
10-
body {
11-
height: 700px;
12-
}
13-
</style>
14-
<script type="text/javascript">
15-
//使用严格模式
16-
'use strict';
17-
//定义地图文档图层和地图、专题图图层
18-
var mapDocLayer, map, themeLayer;
19-
var { protocol, ip, port } = window.webclient;
20-
var ip = `${ip}`;
21-
var port = `${port}`;
22-
var docName = 'Hubei4326';
23-
24-
/** 初始化地图显示*/
25-
function init() {
26-
//地图容器
27-
//地图容器
28-
map = new window.mapboxgl.Map({
29-
container: 'map',
30-
minZoom: 3,
31-
center: [112.247175, 31.152892],
32-
style: { version: 8, sources: {}, layers: [] }
33-
});
34-
35-
function appendMapDoc() {
36-
if (map != null) {
37-
var docLayer = new mapboxgl.Zondy.Map.MapDocLayer(docName, {
38-
//IP地址
39-
ip: ip,
40-
//端口号
41-
port: port,
42-
//只显示一个图层,不平铺显示
43-
noWrap: true
44-
});
45-
docLayer.addToMap(map);
46-
}
47-
}
48-
map.on('load', function () {
49-
appendMapDoc();
50-
});
51-
}
52-
53-
/** 添加专题图*/
54-
function createThemeBtn() {
55-
startPressBar();
56-
addThemeFeatures(gradeQuerySuccess);
57-
}
58-
59-
/** 添加专题图要素*/
60-
function addThemeFeatures(onsuccess) {
61-
var queryStruct = new Zondy.Service.QueryFeatureStruct();
62-
//是否包含几何图形信息
63-
queryStruct.IncludeGeometry = true;
64-
//是否包含属性信息
65-
queryStruct.IncludeAttribute = true;
66-
//是否包含图形显示参数
67-
queryStruct.IncludeWebGraphic = false;
68-
//实例化查询参数对象
69-
var queryParam = new Zondy.Service.QueryParameter({
70-
resultFormat: 'json',
71-
struct: queryStruct
72-
});
73-
//设置查询分页号
74-
queryParam.pageIndex = 0;
75-
//设置查询要素数目
76-
queryParam.recordNumber = 10000;
77-
//实例化地图文档查询服务对象
78-
var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
79-
ip: ip,
80-
port: port,
81-
requestType: 'POST'
82-
});
83-
84-
//执行查询操作，querySuccess为查询回调函数
85-
queryService.query(onsuccess, null);
86-
}
873

88-
/** 生成专题图*/
89-
function gradeQuerySuccess(data) {
90-
if (data != null) {
91-
themeLayer = Zondy.Map.rankSymbolThemeLayer('ThemeLayer', 'Circle', { calGravity: true });
92-
themeLayer.themeField = 'GDP2016';
93-
// 配置图表参数
94-
themeLayer.symbolSetting = {
95-
//允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
96-
codomain: [0, 1400],
97-
//圆最大半径 默认100
98-
maxR: 25,
99-
//圆最小半径 默认0
100-
minR: 5,
101-
// 圆形样式
102-
circleStyle: { fillOpacity: 0.8 },
103-
// 符号专题图填充颜色
104-
fillColor: '#00FF7F',
105-
// 专题图hover 样式
106-
circleHoverStyle: {
107-
fillOpacity: 1,
108-
stroke: true,
109-
strokeWidth: 4,
110-
strokeColor: 'blue'
111-
}
112-
};
113-
map.addLayer(themeLayer);
114-
themeLayer.on('mousemove', showInfoWin);
115-
themeLayer.on('mouseout', closeInfoWin);
116-
themeLayer.addFeatures(data);
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>客户端等级符号专题图</title>
7+
<!--引入当前页面样式表-->
8+
<link href="./style.css" rel="stylesheet" type="text/css" />
9+
<script src="./static/libs/include-mapboxgl-local.js"></script>
10+
<style>
11+
body {
12+
height: 700px;
13+
}
14+
</style>
15+
<script type="text/javascript">
16+
//使用严格模式
17+
'use strict';
18+
//定义地图文档图层和地图、专题图图层
19+
var mapDocLayer, map, themeLayer;
20+
var { protocol, ip, port } = window.webclient;
21+
var ip = `${ip}`;
22+
var port = `${port}`;
23+
var docName = 'Hubei3857';
24+
25+
/** 初始化地图显示*/
26+
function init() {
27+
map = new mapboxgl.Map({
28+
//地图容器div的id
29+
container: 'map',
30+
center: [112.247175, 30.152892],
31+
zoom: 6,
32+
//设置地图样式信息
33+
style: {
34+
//设置版本号，一定要设置
35+
version: 8,
36+
//添加来源
37+
sources: {},
38+
//设置加载并显示来源的图层信息
39+
layers: []
11740
}
118-
stopPressBar();
119-
}
120-
121-
/** 删除专题图*/
122-
function deleteTheme() {
123-
if (map != null && themeLayer != null) {
124-
map.removeLayer(themeLayer);
41+
});
42+
function appendMapDoc() {
43+
if (map != null) {
44+
mapDocLayer = new mapboxgl.Zondy.Map.MapDocLayer(docName, {
45+
//IP地址
46+
ip: `${ip}`,
47+
//端口号
48+
port: `${port}`,
49+
//只显示一个图层,不平铺显示
50+
noWrap: true
51+
});
52+
mapDocLayer.addToMap(map);
12553
}
12654
}
127-
128-
var popup = null;
129-
130-
/** 设置弹框*/
131-
function showInfoWin(e) {
132-
// e.target 是图形对象，即数据的可视化对象，柱状图中是柱条;
133-
// 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
134-
// 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field 和 value;
135-
if (e.target && e.target.refDataID && e.target.dataInfo) {
136-
closeInfoWin();
137-
// 获取图形对应的数据 (feature)
138-
var fea = themeLayer.getFeatureById(e.target.refDataID);
139-
140-
var info = e.target.dataInfo;
141-
// 弹窗内容
142-
var contentHTML = "<div style='color: #000; background-color: #fff'>";
143-
contentHTML += '行政区：' + '<br><strong>' + fea.attributes['NAME'] + '</strong>';
144-
145-
contentHTML += "<hr style='margin: 3px'>";
146-
contentHTML += 'GDP2016： <br/><strong>' + info.value + '</strong>(亿元)';
147-
contentHTML += '</div>';
148-
149-
var tempPoint = map.mouseEventToLatLng(e.event);
150-
popup = L.tooltip({ direction: 'top' }).setContent(contentHTML).setLatLng([tempPoint.lat, tempPoint.lng]).addTo(map);
151-
return;
152-
}
55+
map.on('load', function () {
56+
appendMapDoc();
57+
});
58+
}
59+
60+
/** 添加专题图*/
61+
function createThemeBtn() {
62+
startPressBar();
63+
addThemeFeatures(gradeQuerySuccess);
64+
}
65+
66+
/** 添加专题图要素*/
67+
function addThemeFeatures(onsuccess) {
68+
var queryStruct = new Zondy.Service.QueryFeatureStruct();
69+
//是否包含几何图形信息
70+
queryStruct.IncludeGeometry = true;
71+
//是否包含属性信息
72+
queryStruct.IncludeAttribute = true;
73+
//是否包含图形显示参数
74+
queryStruct.IncludeWebGraphic = false;
75+
//实例化查询参数对象
76+
var queryParam = new Zondy.Service.QueryParameter({
77+
resultFormat: 'json',
78+
struct: queryStruct
79+
});
80+
//设置查询分页号
81+
queryParam.pageIndex = 0;
82+
//设置查询要素数目
83+
queryParam.recordNumber = 10000;
84+
//实例化地图文档查询服务对象
85+
var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
86+
ip: ip,
87+
port: port,
88+
requestType: 'POST'
89+
});
90+
91+
//执行查询操作，querySuccess为查询回调函数
92+
queryService.query(onsuccess, null);
93+
}
94+
95+
/** 生成专题图*/
96+
function gradeQuerySuccess(data) {
97+
if (data != null) {
98+
themeLayer = Zondy.Map.rankSymbolThemeLayer('ThemeLayer', 'Circle', { calGravity: true, map: map });
99+
themeLayer.themeField = 'GDP2011';
100+
// 配置图表参数
101+
themeLayer.symbolSetting = {
102+
//允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
103+
codomain: [0, 1400],
104+
//圆最大半径 默认100
105+
maxR: 25,
106+
//圆最小半径 默认0
107+
minR: 5,
108+
// 圆形样式
109+
circleStyle: { fillOpacity: 0.8 },
110+
// 符号专题图填充颜色
111+
fillColor: '#00FF7F',
112+
// 专题图hover 样式
113+
circleHoverStyle: {
114+
fillOpacity: 1,
115+
stroke: true,
116+
strokeWidth: 4,
117+
strokeColor: 'blue'
118+
}
119+
};
120+
themeLayer.on('mousemove', showInfoWin);
121+
themeLayer.on('mouseout', closeInfoWin);
122+
themeLayer.addFeatures(data);
153123
}
124+
stopPressBar();
125+
}
154126

155-
/** 移除地图弹窗*/
156-
function closeInfoWin() {
157-
if (popup) {
158-
popup.remove(map);
159-
}
127+
/** 删除专题图*/
128+
function deleteTheme() {
129+
if (map != null && themeLayer != null) {
130+
map.removeLayer(themeLayer);
160131
}
161-
162-
/** 开始进度条动画*/
163-
function startPressBar() {
164-
document.getElementById('preview').style.display = '';
132+
}
133+
134+
var popup = null;
135+
136+
/** 设置弹框*/
137+
function showInfoWin(e) {
138+
// e.target 是图形对象，即数据的可视化对象，柱状图中是柱条;
139+
// 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
140+
// 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field 和 value;
141+
if (e.target && e.target.refDataID && e.target.dataInfo) {
142+
closeInfoWin();
143+
// 获取图形对应的数据 (feature)
144+
var fea = themeLayer.getFeatureById(e.target.refDataID);
145+
146+
var info = e.target.dataInfo;
147+
// 弹窗内容
148+
var contentHTML = "<div style='color: #000; background-color: #fff'>";
149+
contentHTML += "行政区：" + "<br><strong>" + fea.attributes['NAME'] + "</strong>";
150+
151+
contentHTML += "<hr style='margin: 3px'>";
152+
contentHTML += "GDP2011： <br/><strong>" + info.value + "</strong>";
153+
contentHTML += "</div>";
154+
155+
var offsetTop = map.getContainer().offsetTop;
156+
var offsetLeft = map.getContainer().offsetLeft;
157+
158+
var tempPoint = map.unproject(new window.mapboxgl.Point(e.event.x - offsetLeft, e.event.y - offsetTop));
159+
popup = new mapboxgl.Popup({ anchor: 'bottom', closeOnClick: false, closeButton: false })
160+
.setHTML(contentHTML)
161+
.setLngLat(tempPoint)
162+
.addTo(map);
163+
return;
165164
}
165+
}
166166

167-
/** 停止进度条动画*/
168-
function stopPressBar() {
169-
document.getElementById('preview').style.display = 'none';
167+
/** 移除地图弹窗*/
168+
function closeInfoWin() {
169+
if (popup) {
170+
popup.remove(map);
170171
}
171-
</script>
172-
</head>
173-
174-
<body onload="init();">
175-
<div id="preview" style="display: none; text-align: center; padding-top: 250px; font-weight: bold">
176-
<img src="./static/assets/graphic-image/39-1.gif" alt="" /><br />
177-
<br />
178-
<span>正在操作，请稍候</span>
179-
</div>
180-
<div class="ToolLib">
181-
<input type="button" class="ButtonLib" id="createThemeBtn" value="添加专题图" onclick="createThemeBtn()" />
182-
<input type="button" class="ButtonLib" id="deleteThemeBtn" value="删除专题图" onclick="deleteTheme()" />
183-
</div>
184-
<div id="map" style="width: 100%; height: 95%; position: absolute; top: 34px; background-color: #d8d4d4"></div>
185-
</body>
186-
</html>
172+
}
173+
174+
/** 开始进度条动画*/
175+
function startPressBar() {
176+
document.getElementById('preview').style.display = '';
177+
}
178+
179+
/** 停止进度条动画*/
180+
function stopPressBar() {
181+
document.getElementById('preview').style.display = 'none';
182+
}
183+
</script>
184+
</head>
185+
186+
<body onload="init();">
187+
<div id="preview" style="display: none; text-align: center; padding-top: 250px; font-weight: bold">
188+
<img src="./static/assets/graphic-image/39-1.gif" alt="" /><br />
189+
<br />
190+
<span>正在操作，请稍候</span>
191+
</div>
192+
<div class="ToolLib" style="position:absolute;">
193+
<input type="button" class="ButtonLib" id="createThemeBtn" value="添加专题图" onclick="createThemeBtn()" />
194+
<input type="button" class="ButtonLib" id="deleteThemeBtn" value="删除专题图" onclick="deleteTheme()" />
195+
</div>
196+
<div id="map" style="width: 100%; height: 95%; position: absolute; top: 34px; background-color: #d8d4d4"></div>
197+
</body>
198+
199+
</html>

0 commit comments

Comments
 (0)