Skip to content

Commit ea26335

Browse files
Yuki-ZhaoYuki-Zhao
committed
2 parents 0b4dc8d + 3713c70 commit ea26335

File tree

5 files changed

+393
-610
lines changed

5 files changed

+393
-610
lines changed

‎examples/mapboxgl-v2/example/DLG.html

Lines changed: 49 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,25 @@
1111
padding: 0;
1212
}
1313

14-
.content {
14+
#map {
1515
position: absolute;
1616
top: 0;
1717
bottom: 0;
1818
width: 100%;
19-
display: flex;
20-
}
21-
22-
#map {
23-
width: 100%;
24-
height: 100%;
25-
}
26-
27-
img {
28-
flex-shrink: 0;
29-
width: 250px;
30-
height: fit-content;
3119
}
3220
</style>
3321
</head>
3422

3523
<body>
36-
<div class="content">
37-
<div id="map"></div>
38-
<img alt="" src="./imgs/DLG.jpg"></img>
39-
</div>
40-
<script src="../static/fonts/iconfont.js"></script>
41-
<script type="text/javascript" src="../libs/maplibregl/maplibre-gl.js"></script>
42-
<script type="text/javascript" src="../libs/maplibregl/l7.js"></script>
43-
<script type="text/javascript" src="../libs/maplibregl/iclient-maplibregl-es6.js"></script>
44-
<script type="text/javascript" src="../libs/maplibregl/iclient-maplibregl-mapextend.js"></script>
45-
<script src="./Util.js"></script>
24+
<div id="map"></div>
25+
<script type="text/javascript" src="https://iclient.supermap.io/web/libs/mapbox-gl-js/1.13.2/mapbox-gl.js"></script>
26+
<script type="text/javascript" src="../libs/mapboxgl/iclient-mapboxgl.js"></script>
4627
<script>
4728
const url = "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China";
48-
const map = new maplibregl.Map({
29+
const map = new mapboxgl.Map({
4930
container: 'map',
5031
style: {
5132
"sources": {
52-
"raster-tiles": {
53-
"type": "raster",
54-
"tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
55-
"tileSize": 256,
56-
},
5733
"DLGI49": {
5834
"tiles": ["http://172.16.14.80:8090/iserver/services/map-DLG_100W/restjsr/v1/vectortile/maps/DLGI49/tiles/{z}/{x}/{y}.mvt"],
5935
"type": "vector"
@@ -64,130 +40,22 @@
6440
34.055934678686114
6541
],
6642
"name": "DLGI49",
67-
"layers": [/* {
68-
"id": "simple-tiles",
69-
"type": "raster",
70-
"source": "raster-tiles",
71-
"minzoom": 0,
72-
"maxzoom": 22
73-
} */],
43+
"layers": [],
7444
"zoom": 8.00721072893464,
7545
"version": 8
7646
}
7747
});
7848

79-
// 每个图层使用到的符号
80-
const lineSymbols = {
81-
630200: 63020004, // 省级行政区界线
82-
640200: 64020004, // 地级行政区界线
83-
210101: 21010104, // 地面河流
84-
420101: 42010104, // 建成国道
85-
420201: 42020104, // 建成省道
86-
420202: 42020204, // 建筑中省道
87-
}
88-
89-
// 批量加载Web符号
90-
const loadSymbols = async () => {
91-
for (let symbolId in lineSymbols) {
92-
const symbol = lineSymbols[symbolId];
93-
await map.loadSymbol(`line-${symbol}`, (_err, s) => {
94-
const newSymbol = s;
95-
if (symbolId === "640200") {
96-
Object.assign(newSymbol.styles[0], {
97-
"width": 3.02,
98-
"dasharray": [
99-
5,
100-
0
101-
],
102-
"color": "rgba(247,201,221,1.00)"
103-
})
104-
Object.assign(newSymbol.styles[1], {
105-
"width": 0.76,
106-
"dasharray": [
107-
12.44,
108-
2.5,
109-
12.44,
110-
5,
111-
2.5,
112-
5
113-
]
114-
})
115-
} else if (symbolId === "630200") {
116-
Object.assign(newSymbol.styles[0], {
117-
"width": 5.67,
118-
"color": "rgba(254,152,254,1.00)"
119-
})
120-
Object.assign(newSymbol.styles[1], {
121-
"width": 0.76,
122-
"dasharray": [
123-
12.44,
124-
3.72,
125-
2.49,
126-
3.72,
127-
2.49,
128-
3.72
129-
]
130-
})
131-
} else if (symbolId === "210101") {
132-
Object.assign(newSymbol, {
133-
"width": 1.14,
134-
"color": "rgba(0,162,233,1.00)"
135-
})
136-
} else if (symbolId === "420101") {
137-
Object.assign(newSymbol, {
138-
"color": "rgba(255,0,0,1.00)"
139-
})
140-
}
141-
map.addSymbol(`line-${symbol}`, newSymbol);
142-
});
143-
}
144-
}
145-
146-
// 创建水系-线图层
147-
const createHYDLLayer = () => {
148-
map.addLayer({
149-
"id": "HYDL@DLG_100W_unique_210101_0(0_24)",
150-
"source": "DLGI49",
151-
"source-layer": "HYDL@DLG_100W",
152-
"type": "line",
153-
"filter": [
154-
"all",
155-
[
156-
"==",
157-
"GB",
158-
210101
159-
],
160-
[
161-
">",
162-
"NAME",
163-
""
164-
]
165-
],
166-
"symbol": "line-21010104"
49+
// 加载符号
50+
const loadSymbol = async (symbolId) => {
51+
await map.loadSymbol(symbolId, (_err, newSymbol) => {
52+
map.addSymbol(symbolId, newSymbol);
16753
});
16854
}
16955

17056
// 创建行政界线-线图层
171-
const createBOULLayer = () => {
172-
const layers = [{
173-
"filter": [
174-
"all",
175-
[
176-
"==",
177-
"$type",
178-
"LineString"
179-
],
180-
[
181-
"==",
182-
"GB",
183-
630200
184-
]
185-
],
186-
"id": "BOUL@DLG_100W_unique_630200_0(0_24)",
187-
"source": "DLGI49",
188-
"source-layer": "BOUL@DLG_100W",
189-
"type": "line"
190-
}, {
57+
const createBOULLayer = (value, symbolId) => {
58+
map.addLayer({
19159
"filter": [
19260
"all",
19361
[
@@ -198,90 +66,44 @@
19866
[
19967
"==",
20068
"GB",
201-
640200
69+
value
20270
]
20371
],
204-
"id": "BOUL@DLG_100W_unique_640200_0(0_24)",
72+
"id": `BOUL@DLG_100W_unique_${value}_0(0_24)`,
20573
"source": "DLGI49",
20674
"source-layer": "BOUL@DLG_100W",
207-
"type": "line"
208-
}];
209-
layers.forEach((layer) => {
210-
const { id, source, filter, type } = layer;
211-
map.addLayer({
212-
id, source, filter, type,
213-
"source-layer": layer["source-layer"],
214-
"symbol": `line-${lineSymbols[filter[2][2]]}`
215-
});
75+
"type": "line",
76+
"symbol": symbolId
21677
});
21778
}
21879

219-
// 创建公路-线图层
220-
const createLRDLLayer = () => {
221-
const layers = [{
222-
"filter": [
223-
"all",
224-
[
225-
"==",
226-
"$type",
227-
"LineString"
228-
],
229-
[
230-
"==",
231-
"GB",
232-
420101
233-
],
234-
[
235-
"any",
236-
[
237-
"==",
238-
"RTEG",
239-
"一"
240-
],
241-
[
242-
"==",
243-
"RTEG",
244-
"高"
245-
]
246-
]
247-
],
248-
"id": "LRDL@DLG_100W_unique_420101_0(0_24)",
80+
// 创建水系-线图层
81+
const createHYDLLayer = (value, symbolId) => {
82+
map.addLayer({
83+
"id": `HYDL@DLG_100W_unique_${value}_0(0_24)`,
24984
"source": "DLGI49",
250-
"source-layer": "LRDL@DLG_100W",
251-
"type": "line"
252-
}, {
85+
"source-layer": "HYDL@DLG_100W",
86+
"type": "line",
25387
"filter": [
25488
"all",
255-
[
256-
"==",
257-
"$type",
258-
"LineString"
259-
],
26089
[
26190
"==",
26291
"GB",
263-
420201
92+
value
26493
],
26594
[
266-
"any",
267-
[
268-
"==",
269-
"RTEG",
270-
"一"
271-
],
272-
[
273-
"==",
274-
"RTEG",
275-
"高"
276-
]
95+
">",
96+
"NAME",
97+
""
27798
]
27899
],
279-
"id": "LRDL@DLG_100W_unique_420201_0(0_24)",
280-
"source": "DLGI49",
281-
"source-layer": "LRDL@DLG_100W",
282-
"type": "line"
283-
},
284-
{
100+
"symbol": symbolId
101+
});
102+
}
103+
104+
// 创建公路-线图层
105+
const createLRDLLayer = (value, symbolId) => {
106+
map.addLayer({
285107
"filter": [
286108
"all",
287109
[
@@ -292,7 +114,7 @@
292114
[
293115
"==",
294116
"GB",
295-
420202
117+
value
296118
],
297119
[
298120
"any",
@@ -308,27 +130,27 @@
308130
]
309131
]
310132
],
311-
"id": "LRDL@DLG_100W_unique_420202_0(0_24)",
133+
"id": `LRDL@DLG_100W_unique_${value}_0(0_24)`,
312134
"source": "DLGI49",
313135
"source-layer": "LRDL@DLG_100W",
314-
"type": "line"
315-
}];
316-
layers.forEach((layer) => {
317-
const { id, source, filter, type } = layer;
318-
map.addLayer({
319-
id, source, filter, type,
320-
"source-layer": layer["source-layer"],
321-
"symbol": `line-${lineSymbols[filter[2][2]]}`
322-
});
136+
"type": "line",
137+
"symbol": symbolId
323138
});
324139
}
325140

326141
map.on('load', async () => {
327-
window.map = map;
328-
await loadSymbols();
329-
createBOULLayer();
330-
createHYDLLayer();
331-
createLRDLLayer();
142+
await loadSymbol("line-63020004");
143+
createBOULLayer(630200, "line-63020004");
144+
await loadSymbol("line-64020004");
145+
createBOULLayer(640200, "line-64020004");
146+
await loadSymbol("line-21010104");
147+
createHYDLLayer(210101, "line-21010104");
148+
await loadSymbol("line-42010104");
149+
createLRDLLayer(420101, "line-42010104");
150+
await loadSymbol("line-42020104");
151+
createLRDLLayer(420201, "line-42020104");
152+
await loadSymbol("line-42020204");
153+
createLRDLLayer(420202, "line-42020204");
332154
})
333155
</script>
334156
</body>

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