Skip to content

Commit 3cdd491

Browse files
songyumengsongyumeng
committed
增加 ol对接echarts的范例
1 parent c3cf695 commit 3cdd491

File tree

14 files changed

+1014
-23
lines changed

14 files changed

+1014
-23
lines changed

‎dist/iclient9-openlayers.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@
7777
if (options.url === undefined) {
7878
return;
7979
}
80+
if (!options.attributions) {
81+
options.attributions =[
82+
new ol.Attribution({
83+
html: ' with <a href="http://icltest.supermapol.com/">SuperMap iClient</a>'
84+
})]
85+
}
8086
var layerUrl = options.url + "/image.png?redirect=false";
8187
//为url添加安全认证信息片段
8288
if (SuperMap.Credential && SuperMap.Credential.CREDENTIAL) {

‎examples/js/editor.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,10 @@ function run() {
100100
function loadPreview(content) {
101101
var iFrame = document.getElementById("innerPage").contentWindow;
102102
iFrame.document.open();
103-
iFrame.addEventListener("load",mapHeight);
103+
iFrame.addEventListener('load',mapHeight);
104104
iFrame.document.write(content);
105105
iFrame.document.close();
106+
mapHeight();
106107
}
107108

108109
/**设置显示源码的拖拽效果**/
@@ -151,6 +152,7 @@ function initSelect() {
151152
}
152153

153154
function mapHeight() {
154-
$("#innerPage").contents().find("body").height($("#innerPage").height());
155+
$("#innerPage").contents().find("html").height("100%");
156+
$("#innerPage").contents().find("body").height("100%");
155157
}
156158

‎examples/openlayers/config.js‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -218,19 +218,38 @@ var exampleConfig = {
218218
}
219219
]
220220
},
221-
"D3": {
222-
name: "D3-单值专题图",
223-
content: [{
224-
name: "D3-单值专题图",
225-
content: null
226-
}]
227-
},
221+
// "D3": {
222+
// name: "D3-单值专题图",
223+
// content: [{
224+
// name: "D3-单值专题图",
225+
// content: null
226+
// }]
227+
// },
228228
"ECharts": {
229-
name: "ECharts-柱状图",
230-
content: [{
231-
name: "ECharts-柱状图",
232-
content: null
233-
}]
229+
name: "ECharts",
230+
content: [
231+
{
232+
name: "折线图",
233+
thumbnail: "ol_echartsLineMarker.png",
234+
fileName: "echartsLineMarker"
235+
},
236+
{
237+
name: "柱状图",
238+
thumbnail: "ol_echartsBar.png",
239+
fileName: "echartsBar"
240+
},
241+
{
242+
name: "散点图",
243+
thumbnail: "ol_echartsScatter.png",
244+
fileName: "echartsScatter"
245+
},
246+
{
247+
name: "饼图",
248+
thumbnail: "ol_echartsPie.png",
249+
fileName: "echartsPie"
250+
}
251+
]
252+
234253
}
235254
}
236255
},

‎examples/openlayers/echartsBar.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>ECharts Bar with OpenLayers</title>
6+
<link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
7+
</head>
8+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
9+
<div id="map" style="width: 100%;position:absolute;top: 0;border: 1px solid #dddddd"></div>
10+
<div id="popup"></div>
11+
</body>
12+
<script type="text/javascript" src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
13+
<script type="text/javascript" src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
14+
<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
15+
<script type="text/javascript">
16+
var resultLayer;
17+
var map = new ol.Map({
18+
target: 'map',
19+
view: new ol.View({
20+
center: [105.2, 31.6],
21+
zoom: 5,
22+
projection: 'EPSG:4326'
23+
}),
24+
layers: [new ol.layer.Tile({
25+
source: new ol.supermap.TileSuperMapRest({
26+
url: "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
27+
}),
28+
projection: 'EPSG:4326'
29+
})]
30+
});
31+
var popup = new ol.Overlay({
32+
element: document.getElementById('popup'),
33+
offset: [5, 5]
34+
});
35+
map.addOverlay(popup);
36+
var option = {
37+
legend: {
38+
data: ['降雨量', '径流量'],
39+
align: 'left'
40+
},
41+
toolbox: {
42+
feature: {
43+
magicType: {
44+
type: ['stack', 'tiled']
45+
},
46+
saveAsImage: {
47+
pixelRatio: 2
48+
}
49+
}
50+
},
51+
backgroundColor: '#fff',
52+
tooltip: {},
53+
xAxis: {
54+
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
55+
silent: false,
56+
splitLine: {
57+
show: false
58+
}
59+
},
60+
yAxis: {},
61+
series: [{
62+
name: 'bar',
63+
type: 'bar',
64+
animationDelay: function (idx) {
65+
return idx * 10;
66+
}
67+
}, {
68+
name: 'bar2',
69+
type: 'bar',
70+
animationDelay: function (idx) {
71+
return idx * 10 + 100;
72+
}
73+
}],
74+
animationEasing: 'elasticOut',
75+
animationDelayUpdate: function (idx) {
76+
return idx * 5;
77+
}
78+
};
79+
var chart = echarts.init(document.createElement('div'), '', {
80+
width: 500,
81+
height: 300
82+
});
83+
chart.setOption(option);
84+
query();
85+
function query() {
86+
clearLayer();
87+
var queryService = new ol.supermap.QueryService("http://support.supermap.com:8090/iserver/services/map-china400/rest/maps/China");
88+
var param = new QueryBySQLParameters({
89+
queryParams: [{
90+
name: "China_ProCenCity_pt@China",
91+
attributeFilter: "1 = 1"
92+
}, {
93+
name: "China_Capital_pt@China",
94+
attributeFilter: "1 = 1"
95+
}]
96+
});
97+
queryService.queryBySQL(param);
98+
queryService.on("complete", function (serviceResult) {
99+
var features = [];
100+
for (var i = 0; i < serviceResult.element.result.length; i++) {
101+
var temp = (new ol.format.GeoJSON()).readFeatures(serviceResult.element.result[i], {
102+
dataProjection: 'EPSG:3857',
103+
featureProjection: 'EPSG:4326'
104+
});
105+
features = features.concat(temp);
106+
}
107+
resultLayer = new ol.layer.Vector({
108+
source: new ol.source.Vector({
109+
wrapX: false,
110+
features: features
111+
})
112+
});
113+
map.addLayer(resultLayer);
114+
var select = new ol.interaction.Select();
115+
map.addInteraction(select);
116+
select.on('select', function (e) {
117+
if (this.getFeatures().getLength() > 0) {
118+
var city = this.getFeatures().item(0).getProperties().NAME;
119+
var data1 = [];
120+
var data2 = [];
121+
for (var i = 0; i < 7; i++) {
122+
var data = Math.random().toFixed(2);
123+
data1.push(data);
124+
data2.push(data * (Math.random() + 1.5));
125+
126+
}
127+
chart.setOption({
128+
title: {
129+
text: city,
130+
subtext: '数据纯属虚构'
131+
},
132+
series: [
133+
{
134+
name: '降雨量',
135+
data: data1,
136+
},
137+
{
138+
name: '径流量',
139+
data: data2,
140+
}
141+
],
142+
});
143+
popup.setElement(chart.getDom());
144+
var coordinate = e.mapBrowserEvent.coordinate;
145+
popup.setPosition(coordinate);
146+
} else {
147+
popup.setPosition(undefined);
148+
}
149+
});
150+
});
151+
}
152+
function clearLayer() {
153+
if (resultLayer) {
154+
map.removeLayer(resultLayer);
155+
}
156+
}
157+
</script>
158+
</html>

0 commit comments

Comments
 (0)