Skip to content

Commit 713aaa5

Browse files
liqian7liqian7
committed
【feature】新增数据流图层微件范例，更新热力图图层微件范例Style参数 review by songym
1 parent ecbb50c commit 713aaa5

File tree

8 files changed

+16002
-10967
lines changed

8 files changed

+16002
-10967
lines changed

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.js‎

Lines changed: 15744 additions & 10840 deletions
Large diffs are not rendered by default.

‎dist/mapboxgl/iclient9-mapboxgl-widgets-vue.min.js‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/locales/en-US/resources.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -551,6 +551,7 @@ window.examplesResources = {
551551
"title_widgetsRangeTheme_Vue": 'RangeTheme Layer Widget(Vue)',
552552
"title_widgetsRankSymbolTheme_Vue": 'RankSymbolTheme Layer Widget(Vue)',
553553
"title_widgetsLabelTheme_Vue": 'LabelTheme Layer Widget(Vue)',
554+
"title_widgetsDataFlow_Vue": 'Data FLow Layer Widget(Vue)',
554555

555556
"text_code": "Forward Match",
556557
"text_decode": "Reverse Match",

‎examples/locales/zh-CN/resources.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,7 @@ window.examplesResources = {
499499
"title_widgetsRangeTheme_Vue": '分段专题图图层微件（Vue）',
500500
"title_widgetsRankSymbolTheme_Vue": '等级符号专题图图层微件（Vue）',
501501
"title_widgetsLabelTheme_Vue": '标签专题图图层微件（Vue）',
502+
"title_widgetsDataFlow_Vue": '数据流图层微件（Vue）',
502503

503504
"text_code": "正向匹配",
504505
"text_decode": "反向匹配",

‎examples/mapboxgl/config.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1171,81 +1171,87 @@ var exampleConfig = {
11711171
} ,{
11721172
name: "栅格图层",
11731173
name_en: "Raster layer",
1174-
version: "9.1.2",
1174+
version: "10.x.x",
11751175
thumbnail: "widgets_map_vue.png",
11761176
fileName: "widgets_raster_vue"
11771177
} ,{
11781178
name: "矢量瓦片图层",
11791179
name_en: "Vector tile layer",
1180-
version: "9.1.2",
1180+
version: "10.x.x",
11811181
thumbnail: "widgets_vector_tile_vue.png",
11821182
fileName: "widgets_vector_tile_vue"
11831183
} ,{
11841184
name: "点聚合图层",
11851185
name_en: "Cluster layer",
1186-
version: "9.1.2",
1186+
version: "10.x.x",
11871187
thumbnail: "widgets_cluster_vue.png",
11881188
fileName: "widgets_cluster_vue"
11891189
} ,{
11901190
name: "单值专题图",
11911191
name_en: "Unique Theme layer",
1192-
version: "9.1.2",
1192+
version: "10.x.x",
11931193
thumbnail: "widgets_uniquetheme_vue.png",
11941194
fileName: "widgets_uniquetheme_vue"
11951195
} ,{
11961196
name: "分段专题图",
11971197
name_en: "Range Theme layer",
1198-
version: "9.1.2",
1198+
version: "10.x.x",
11991199
thumbnail: "widgets_rangetheme_vue.png",
12001200
fileName: "widgets_rangetheme_vue"
12011201
} ,{
12021202
name: "等级符号专题图",
12031203
name_en: "RanSymbol Theme layer",
1204-
version: "9.1.2",
1204+
version: "10.x.x",
12051205
thumbnail: "widgets_ranksymboltheme_vue.png",
12061206
fileName: "widgets_ranksymboltheme_vue"
12071207
} ,{
12081208
name: "标签专题图",
12091209
name_en: "Label Theme layer",
1210-
version: "9.1.2",
1210+
version: "10.x.x",
12111211
thumbnail: "widgets_labeltheme_vue.png",
12121212
fileName: "widgets_labeltheme_vue"
12131213
} ,{
12141214
name: "图表专题图",
12151215
name_en: "Statistical chart",
1216-
version: "9.1.2",
1216+
version: "10.x.x",
12171217
thumbnail: "widgets_graph_theme_layer_vue.png",
12181218
fileName: "widgets_graph_theme_layer_vue"
12191219
} ,{
12201220
name: "热力图图层",
12211221
name_en: "Heatmap layer",
1222-
version: "9.1.2",
1222+
version: "10.x.x",
12231223
thumbnail: "widgets_heatmap_vue.png",
12241224
fileName: "widgets_heatmap_vue"
12251225
} ,{
12261226
name: "MapV 图层",
12271227
name_en: "MapV layer",
1228-
version: "9.1.2",
1228+
version: "10.x.x",
12291229
thumbnail: "mapvPolylineTime.gif",
12301230
fileName: "widgets_mapv_vue"
12311231
} ,{
12321232
name: "Echarts 图层",
12331233
name_en: "Echarts layer",
1234-
version: "9.1.2",
1234+
version: "10.x.x",
12351235
thumbnail: "echarts_ChangchunPublicTransportNetwork.gif",
12361236
fileName: "widgets_echarts_vue"
12371237
} ,{
12381238
name: "DeckGL 图层",
12391239
name_en: "DeckGL layer",
1240-
version: "9.1.2",
1240+
version: "10.x.x",
12411241
thumbnail: "widgets_deckgl_vue.png",
12421242
fileName: "widgets_deckgl_vue"
1243-
},{
1243+
} ,{
12441244
name: "打开文件",
12451245
name_en: "Open File",
1246-
version: "9.1.2",
1246+
version: "10.x.x",
12471247
thumbnail: "widgets_openfile_vue.png",
12481248
fileName: "widgets_openfile_vue"
1249+
} ,{
1250+
name: "数据流图层",
1251+
name_en: "Data Flow Layer",
1252+
version: "10.x.x",
1253+
thumbnail: "widgets_dataflow_vue.gif",
1254+
fileName: "widgets_dataflow_vue"
12491255
}
12501256
]
12511257
}

‎examples/mapboxgl/img/widgets_dataflow_vue.gif‎

47.5 KB
Loading

‎examples/mapboxgl/widgets_dataflow_vue.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2019 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="UTF-8" />
8+
<title data-i18n="resources.title_widgetsDataFlow_Vue"></title>
9+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
10+
<script
11+
include="iclient9-mapboxgl-widgets-vue,mapbox-gl-enhance"
12+
src="../../dist/mapboxgl/include-mapboxgl.js"
13+
></script>
14+
<style>
15+
#main {
16+
margin: 0 auto;
17+
width: 100%;
18+
height: 100%;
19+
}
20+
</style>
21+
</head>
22+
23+
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
24+
<div id="main">
25+
<sm-map :map-options="mapOptions">
26+
<sm-data-flow-layer
27+
:data-flow-url="dataFlowUrl"
28+
:layer-style="layerStyle"
29+
register-token="0ra2250-rPu6ZnqHPKqcqDjGkDGDv3bg5HHy1SNNXf79OlN0ArG07bq3cGFz0v-nfBm2RAnYJ3LGBsuiptH43g.."
30+
></sm-data-flow-layer>
31+
</sm-map>
32+
</div>
33+
<script>
34+
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
35+
var wsHost = "ws:\//" + (window.isLocal ? document.location.hostname + ":8800" : "iclsvrws.supermap.io");
36+
var attribution =
37+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
38+
" with <span>© <a href='http://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
39+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
40+
SuperMap.SecurityManager.registerToken(
41+
"ws://iclsvrws.supermap.io/iserver/services/dataflowTest/dataflow",
42+
"0ra2250-rPu6ZnqHPKqcqDjGkDGDv3bg5HHy1SNNXf79OlN0ArG07bq3cGFz0v-nfBm2RAnYJ3LGBsuiptH43g.."
43+
);
44+
// 模拟 dataflow 实时数据
45+
var featureResult, dataFlowBroadcast, timer;
46+
function broadcast() {
47+
var features = [];
48+
for (var index = 0; index < featureResult.length; index++) {
49+
var count = parseInt(Math.random() * featureResult.length);
50+
var geometry = featureResult[count].geometry;
51+
var feature = {
52+
geometry: geometry,
53+
type: "Feature",
54+
properties: { id: index + 1, time: new Date() }
55+
};
56+
features.push(feature);
57+
}
58+
dataFlowBroadcast.broadcast(features);
59+
}
60+
61+
function query() {
62+
var param = new SuperMap.QueryBySQLParameters({
63+
queryParams: { name: "Capitals@World#3", attributeFilter: "SMID > 0" }
64+
});
65+
var queryService = new mapboxgl.supermap.QueryService(
66+
host + "/iserver/services/map-world/rest/maps/World"
67+
).queryBySQL(param, function(serviceResult) {
68+
featureResult = serviceResult.result.recordsets[0].features.features;
69+
dataFlowBroadcast = new mapboxgl.supermap.DataFlowService(
70+
wsHost + "/iserver/services/dataflowTest/dataflow"
71+
).initBroadcast();
72+
dataFlowBroadcast.on("broadcastSocketConnected", function(e) {
73+
timer = window.setInterval(broadcast, 2000);
74+
});
75+
});
76+
}
77+
query();
78+
79+
new Vue({
80+
el: "#main",
81+
data() {
82+
return {
83+
dataFlowUrl: wsHost + "/iserver/services/dataflowTest/dataflow",
84+
layerStyle: {
85+
circle: new SuperMap.Widgets.commontypes.CircleStyle({
86+
"circle-color": "#3fb1e3",
87+
"circle-radius": 6
88+
})
89+
},
90+
mapOptions: {
91+
container: "map",
92+
style: {
93+
version: 8,
94+
sources: {
95+
"raster-tiles": {
96+
attribution: attribution,
97+
type: "raster",
98+
tiles: [
99+
host +
100+
"/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}"
101+
],
102+
tileSize: 256
103+
}
104+
},
105+
layers: [
106+
{
107+
id: "simple-tiles",
108+
type: "raster",
109+
source: "raster-tiles",
110+
minzoom: 0,
111+
maxzoom: 22
112+
}
113+
]
114+
},
115+
center: [120.143, 30.236],
116+
zoom: 0
117+
}
118+
};
119+
}
120+
});
121+
</script>
122+
</body>
123+
</html>

0 commit comments

Comments
 (0)