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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy