Skip to content

Commit 6f2c304

Browse files
MyShallowTimeMyShallowTime
committed
[update] loadSymbol接口支持加载Web符号数组
UT、示例更新 review by zhaoq
1 parent 615349e commit 6f2c304

File tree

17 files changed

+359
-464
lines changed

17 files changed

+359
-464
lines changed

‎examples/mapboxgl/websymbol-editor/js/websymbol-editor.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/mapboxgl/websymbol_DLG_I49.html‎

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
bottom: 0;
2121
width: 100%;
2222
}
23-
2423
</style>
2524
</head>
2625

@@ -150,49 +149,32 @@
150149
});
151150
};
152151

153-
var loadSymbol = function (symbolId) {
154-
return new Promise(function (resolve) {
155-
map.loadSymbol(symbolId, function (error, symbol) {
156-
if (error) {
157-
widgets.alert.showAlert(resources.msg_addWebSymbolFailed, false);
158-
resolve();
159-
}
160-
map.addSymbol(symbolId, symbol);
161-
resolve();
162-
});
163-
});
164-
};
165-
166-
var loadSymbols = function () {
167-
var symbols = [
152+
map.on("load", function () {
153+
// 配置基础路径
154+
new mapboxgl.supermap.WebSymbol().init({ basePath: window.exampleWebSymbolBasePath });
155+
// 批量加载Web符号
156+
var symbolIds = [
168157
"line-963379",
169158
"line-963381",
170159
"line-962613",
171160
"line-962604",
172161
"line-964861",
173162
"line-962597"
174163
];
175-
var loadSymbolPromises = symbols.map(function (symbolId) {
176-
return loadSymbol(symbolId);
177-
});
178-
return Promise.all(loadSymbolPromises);
179-
};
180-
181-
map.on("load", function () {
182-
// 配置基础路径
183-
new mapboxgl.supermap.WebSymbol().init({basePath: window.exampleWebSymbolBasePath});
184-
loadSymbols()
185-
.then(function () {
186-
createBOULLayer(630200, "line-963379");
187-
createBOULLayer(640200, "line-963381");
188-
createHYDLLayer(210101, "line-962613");
189-
createLRDLLayer(420101, "line-962604");
190-
createLRDLLayer(420201, "line-964861");
191-
createLRDLLayer(420202, "line-962597");
164+
map.loadSymbol(symbolIds, function (_error, symbols) {
165+
symbols.forEach((symbol, index) => {
166+
symbol && map.addSymbol(symbolIds[index], symbol);
192167
});
168+
createBOULLayer(630200, "line-963379");
169+
createBOULLayer(640200, "line-963381");
170+
createHYDLLayer(210101, "line-962613");
171+
createLRDLLayer(420101, "line-962604");
172+
createLRDLLayer(420201, "line-964861");
173+
createLRDLLayer(420202, "line-962597");
174+
});
193175
});
194176

195177
</script>
196178
</body>
197179

198-
</html>
180+
</html>

‎examples/mapboxgl/websymbol_YangtzeRiverdelta.html‎

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
bottom: 0;
2121
width: 100%;
2222
}
23-
2423
</style>
2524
</head>
2625

@@ -31,7 +30,7 @@
3130
<script>
3231
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
3332
var serverUrl =
34-
host + "/iserver/services/map-YangtzeRiverDelta/restjsr/v1/vectortile/maps/长江三角洲发展结构图";
33+
host + "/iserver/services/map-YangtzeRiverDelta/restjsr/v1/vectortile/maps/长江三角洲发展结构图";
3534
var map = new mapboxgl.Map({
3635
container: "map",
3736
style: {
@@ -53,41 +52,6 @@
5352
]
5453
});
5554

56-
var loadSymbol = function (symbolId) {
57-
return new Promise(function (resolve) {
58-
map.loadSymbol(symbolId, function (error, symbol) {
59-
if(error){
60-
widgets.alert.showAlert(resources.msg_addWebSymbolFailed, false);
61-
resolve();
62-
}
63-
map.addSymbol(symbolId, symbol);
64-
resolve();
65-
});
66-
});
67-
};
68-
69-
// 批量加载符号
70-
var loadSymbols = function () {
71-
var symbols = [
72-
"polygon-955463", //Frame
73-
"polygon-955464", //Province_R
74-
"polygon-955514", //SuHuZhe_R
75-
"polygon-955441", //SuHuZheInsideBuffer
76-
"polygon-955383", //SuHuZheBuffer2
77-
"polygon-955453", //SuHuZheBuffer1
78-
"line-962558", //直线
79-
"line-964890", //省级行政区界线
80-
"line-962614", //海岸线
81-
"line-962475", //地级行政区界线
82-
"line-964890", //省级行政区界线
83-
"line-964890" //省级行政区界线
84-
];
85-
var loadSymbolPromises = symbols.map(function (symbolId) {
86-
return loadSymbol(symbolId);
87-
});
88-
return Promise.all(loadSymbolPromises);
89-
};
90-
9155
var createPolygonLayer = function (name, symbolId) {
9256
map.addLayer({
9357
"id": name + "@YangtzeRiverDelta(0_24)",
@@ -111,7 +75,7 @@
11175
// 三角洲发展结构图
11276
var createDevelopLayer = function () {
11377
map.loadSymbol("line-964890", function (error, newSymbol) {
114-
if(error){
78+
if (error) {
11579
widgets.alert.showAlert(resources.msg_addWebSymbolFailed, false);
11680
return;
11781
}
@@ -246,14 +210,32 @@
246210

247211
map.on("load", function () {
248212
// 配置基础路径
249-
new mapboxgl.supermap.WebSymbol().init({basePath: window.exampleWebSymbolBasePath});
213+
new mapboxgl.supermap.WebSymbol().init({ basePath: window.exampleWebSymbolBasePath });
250214
var uploadedDataURL = "../data/yangtze-river-delta.json";
251215
$.get(uploadedDataURL, function (data) {
252216
map.addSource("sanjiaozhou", {
253217
type: "geojson",
254218
data: data,
255219
});
256-
loadSymbols().then(function () {
220+
// 批量加载Web符号
221+
var symbolIds = [
222+
"polygon-955463", //Frame
223+
"polygon-955464", //Province_R
224+
"polygon-955514", //SuHuZhe_R
225+
"polygon-955441", //SuHuZheInsideBuffer
226+
"polygon-955383", //SuHuZheBuffer2
227+
"polygon-955453", //SuHuZheBuffer1
228+
"line-962558", //直线
229+
"line-964890", //省级行政区界线
230+
"line-962614", //海岸线
231+
"line-962475", //地级行政区界线
232+
"line-964890", //省级行政区界线
233+
"line-964890" //省级行政区界线
234+
];
235+
map.loadSymbol(symbolIds, function (_error, symbols) {
236+
symbols.forEach((symbol, index) => {
237+
symbol && map.addSymbol(symbolIds[index], symbol);
238+
});
257239
createPolygonLayer("Frame", "polygon-955463");
258240
createPolygonLayer("Province_R", "polygon-955464");
259241
createPolygonLayer("SuHuZhe_R", "polygon-955514");
@@ -278,4 +260,4 @@
278260
</script>
279261
</body>
280262

281-
</html>
263+
</html>

‎examples/mapboxgl/websymbol_landuse.html‎

Lines changed: 31 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
bottom: 0;
2121
width: 100%;
2222
}
23-
2423
</style>
2524
</head>
2625

@@ -55,56 +54,6 @@
5554
]
5655
});
5756

58-
var loadSymbol = function (symbolId) {
59-
return new Promise(function (resolve) {
60-
map.loadSymbol(symbolId, function (error, symbol) {
61-
if (error) {
62-
widgets.alert.showAlert(resources.msg_addWebSymbolFailed, false);
63-
resolve();
64-
}
65-
map.addSymbol(symbolId, symbol);
66-
resolve();
67-
});
68-
});
69-
};
70-
71-
// 批量加载符号
72-
var loadSymbols = function () {
73-
var symbols = [
74-
"polygon-955452",
75-
"polygon-955550",
76-
"polygon-955871",
77-
"polygon-955875",
78-
"polygon-955525",
79-
"polygon-955508",
80-
"polygon-955400",
81-
"polygon-955545",
82-
"polygon-955529",
83-
"polygon-955385",
84-
"polygon-955872",
85-
"polygon-955527",
86-
"polygon-955532",
87-
"polygon-955433",
88-
"polygon-955880",
89-
"polygon-955464",
90-
"polygon-955519",
91-
"polygon-955879",
92-
"polygon-955878",
93-
"polygon-955483",
94-
"polygon-955537",
95-
"polygon-955398",
96-
"line-962543",
97-
"line-962524",
98-
"line-962613",
99-
"line-964935",
100-
"polygon-0"
101-
];
102-
var loadSymbolPromises = symbols.map(function (symbolId) {
103-
return loadSymbol(symbolId);
104-
});
105-
return Promise.all(loadSymbolPromises);
106-
};
107-
10857
// 添加面图层
10958
var createPolygonLayer = function () {
11059
map.addLayer({
@@ -144,31 +93,40 @@
14493
});
14594
};
14695

147-
// 添加线图层
148-
var createLineLayer = function () {
149-
map.addLayer({
150-
"id": "pl@landuse(0_24)",
151-
"source": "landuse",
152-
"source-layer": "pl@landuse",
153-
"type": "line",
154-
"symbol": [
155-
"match",
156-
["get", "DLBM"],
157-
"011", "line-962543", //公路用地
158-
"013", "line-962524", //农村道路
159-
"021", "line-962613", //河流水面
160-
"023", "line-962613", //河流水面
161-
"line-964935"
162-
]
163-
});
164-
};
165-
16696
map.on("load", function () {
16797
// 配置基础路径
168-
new mapboxgl.supermap.WebSymbol().init({basePath: window.exampleWebSymbolBasePath});
169-
loadSymbols().then(function () {
98+
new mapboxgl.supermap.WebSymbol().init({ basePath: window.exampleWebSymbolBasePath });
99+
// 批量加载Web符号
100+
var symbolIds = [
101+
"polygon-955452",
102+
"polygon-955550",
103+
"polygon-955871",
104+
"polygon-955875",
105+
"polygon-955525",
106+
"polygon-955508",
107+
"polygon-955400",
108+
"polygon-955545",
109+
"polygon-955529",
110+
"polygon-955385",
111+
"polygon-955872",
112+
"polygon-955527",
113+
"polygon-955532",
114+
"polygon-955433",
115+
"polygon-955880",
116+
"polygon-955464",
117+
"polygon-955519",
118+
"polygon-955879",
119+
"polygon-955878",
120+
"polygon-955483",
121+
"polygon-955537",
122+
"polygon-955398",
123+
"polygon-0"
124+
];
125+
map.loadSymbol(symbolIds, function (_error, symbols) {
126+
symbols.forEach((symbol, index) => {
127+
symbol && map.addSymbol(symbolIds[index], symbol);
128+
});
170129
createPolygonLayer();
171-
createLineLayer();
172130
});
173131
});
174132

‎examples/mapboxgl/websymbol_landuseOfJingjin.html‎

Lines changed: 21 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
width: 100%;
2626
height: 100%;
2727
}
28-
2928
</style>
3029
</head>
3130

@@ -67,39 +66,6 @@
6766
zoom: 7,
6867
crs: "EPSG:4326"
6968
});
70-
var loadSymbol = function (symbolId) {
71-
return new Promise(function (resolve) {
72-
map.loadSymbol(symbolId, function (error, symbol) {
73-
if (error) {
74-
widgets.alert.showAlert(resources.msg_addFailed, false);
75-
resolve();
76-
}
77-
map.addSymbol(symbolId, symbol);
78-
resolve();
79-
});
80-
});
81-
};
82-
// 批量加载Web符号
83-
var loadSymbols = function () {
84-
var symbols = [
85-
"polygon-955877",
86-
"polygon-955872",
87-
"polygon-955395",
88-
"polygon-955451",
89-
"polygon-955875",
90-
"polygon-955549",
91-
"polygon-955529",
92-
"polygon-955548",
93-
"polygon-955523",
94-
"polygon-955537",
95-
"polygon-955399",
96-
"polygon-0"
97-
];
98-
var loadSymbolPromises = symbols.map(function (symbolId) {
99-
return loadSymbol(symbolId);
100-
});
101-
return Promise.all(loadSymbolPromises);
102-
};
10369

10470
// 添加土地利用图层
10571
var createLandUseLayer = function () {
@@ -139,13 +105,31 @@
139105

140106
map.on("load", function () {
141107
// 配置基础路径
142-
new mapboxgl.supermap.WebSymbol().init({basePath: window.exampleWebSymbolBasePath});
143-
loadSymbols().then(function () {
108+
new mapboxgl.supermap.WebSymbol().init({ basePath: window.exampleWebSymbolBasePath });
109+
// 批量加载Web符号
110+
var symbolIds = [
111+
"polygon-955877",
112+
"polygon-955872",
113+
"polygon-955395",
114+
"polygon-955451",
115+
"polygon-955875",
116+
"polygon-955549",
117+
"polygon-955529",
118+
"polygon-955548",
119+
"polygon-955523",
120+
"polygon-955537",
121+
"polygon-955399",
122+
"polygon-0"
123+
];
124+
map.loadSymbol(symbolIds, function (_error, symbols) {
125+
symbols.forEach((symbol, index) => {
126+
symbol && map.addSymbol(symbolIds[index], symbol);
127+
});
144128
createLandUseLayer();
145129
});
146130
});
147131

148132
</script>
149133
</body>
150134

151-
</html>
135+
</html>

0 commit comments

Comments
 (0)