Skip to content

Commit a53c046

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增MapboxGL-ArcServer的服务以及示例说明】
1 parent 9d9b692 commit a53c046

15 files changed

Lines changed: 700 additions & 13 deletions

File tree

‎website/public/static/demo/config/config-mapboxgl.json‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,18 +289,66 @@
289289
"leaffolder": false,
290290
"childs": [
291291
{
292-
"name": "ARCGIS-OGC",
292+
"name": "ArcGIS-MapServer",
293+
"iconfont": "iconmap",
294+
"folder": "arcgismapserver",
295+
"leaffolder": true,
296+
"childs": [
297+
{
298+
"name": "瓦片图层",
299+
"file": "tiles",
300+
"diffcult": "2",
301+
"detail": "瓦片图层服务",
302+
"icon": "tiles.png",
303+
"update": "最后更新时间：2020-12-17"
304+
},
305+
{
306+
"name": "要素图层",
307+
"file": "featurelayer",
308+
"diffcult": "2",
309+
"detail": "要素图层服务",
310+
"icon": "featurelayer.png",
311+
"update": "最后更新时间：2020-12-17"
312+
},
313+
{
314+
"name": "图例图层",
315+
"file": "legend",
316+
"diffcult": "2",
317+
"detail": "图例服务",
318+
"icon": "legend.png",
319+
"update": "最后更新时间：2020-12-17"
320+
}
321+
]
322+
},
323+
{
324+
"name": "ArcGIS-OGC",
293325
"iconfont": "iconmap",
294326
"folder": "arcgisogc",
295327
"leaffolder": true,
296328
"childs": [
329+
{
330+
"name": "WMTS",
331+
"file": "wmts",
332+
"diffcult": "2",
333+
"detail": "arcgis-ogc-wmts服务",
334+
"icon": "wmts.png",
335+
"update": "最后更新时间：2020-12-17"
336+
},
297337
{
298338
"name": "WMS",
299339
"file": "wms",
300340
"diffcult": "2",
301341
"detail": "ogc-wms服务",
302342
"icon": "wms.png",
303343
"update": "最后更新时间：2020-11-27"
344+
},
345+
{
346+
"name": "WMS-调序",
347+
"file": "wmsreverse",
348+
"diffcult": "2",
349+
"detail": "ogc-wms服务",
350+
"icon": "wms.png",
351+
"update": "最后更新时间：2020-12-17"
304352
}
305353
]
306354
}

‎website/public/static/demo/mapboxgl/example/arcgis-mapserver/arcgismapserver/featurelayer.htm‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>OGC_WMS</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script src="./static/libs/include-mapboxgl-local.js"></script>
9+
<!--引入当前页面样式表-->
10+
<link href="../../css/mapboxgl/style.css" rel="stylesheet" type="text/css" />
11+
<style type="text/css">
12+
#map {
13+
position: absolute;
14+
bottom: 0;
15+
width: 100%;
16+
height: 100vh;
17+
}
18+
</style>
19+
<script>
20+
//使用严格模式
21+
'use strict';
22+
var map;
23+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
24+
/**
25+
* 地图初始化
26+
*/
27+
function init() {
28+
//实例化要加载的source来源对象（世界矢量地图）
29+
var dark = {
30+
type: 'raster',
31+
tiles: [
32+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
33+
'http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
34+
'&TILECOL=' +
35+
'{x}' +
36+
'&TILEROW=' +
37+
'{y}' +
38+
'&TILEMATRIX=' +
39+
'{z}' +
40+
'&tk=' +
41+
tiandituKey
42+
],
43+
//栅格瓦片的分辨率
44+
tileSize: 256
45+
};
46+
//实例化Map对象加载地图
47+
map = new mapboxgl.Map({
48+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
49+
maxBounds: [
50+
[-180, -90],
51+
[180, 90]
52+
],
53+
//地图容器div的id
54+
container: 'map',
55+
//设置地图样式信息
56+
style: {
57+
//设置版本号，一定要设置
58+
version: 8,
59+
//添加来源
60+
sources: {
61+
dark: dark
62+
},
63+
//设置加载并显示来源的图层信息
64+
layers: [
65+
{
66+
//图层id，要保证唯一性
67+
id: 'dark',
68+
//图层类型
69+
type: 'raster',
70+
//连接图层来源
71+
source: 'dark',
72+
//图层最小缩放级数
73+
minzoom: 0,
74+
//图层最大缩放级数
75+
maxzoom: 22
76+
}
77+
]
78+
},
79+
zoom: 3,
80+
center: [116.39, 40.2]
81+
});
82+
83+
//注册地图加载事件
84+
var { protocol, ip, port } = window.webclient;
85+
map.on('load', function () {
86+
map.addLayer({
87+
id: 'featurelayer-layer',
88+
type: 'raster',
89+
source: {
90+
type: 'raster',
91+
tiles: [
92+
`http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/export?` +
93+
'F=image' +
94+
'&FORMAT=PNG32' +
95+
'&TRANSPARENT=true' +
96+
'&LAYERS=show:0,2,4,7,9,10,11,12' +
97+
'&SIZE=512,512' +
98+
'&bbox={bbox}' +
99+
'&BBOXSR=4326' + // 即便这个地方是4547,也得设置成4326/4490，
100+
'&IMAGESR=4326' + // 请看右侧markdown说明
101+
'&DPI=90'
102+
],
103+
tileSize: 512
104+
},
105+
paint: {}
106+
});
107+
});
108+
}
109+
</script>
110+
</head>
111+
112+
<body onload="init()">
113+
<div id="map"></div>
114+
</body>
115+
</html>

‎website/public/static/demo/mapboxgl/example/arcgis-mapserver/arcgismapserver/legend.htm‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>OGC_WMS</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
9+
<script src="./static/libs/include-mapboxgl-local.js"></script>
10+
<!--引入当前页面样式表-->
11+
<link href="../../css/mapboxgl/style.css" rel="stylesheet" type="text/css" />
12+
<style type="text/css">
13+
#map {
14+
position: absolute;
15+
bottom: 0;
16+
width: 100%;
17+
height: 100vh;
18+
}
19+
#legend {
20+
position: absolute;
21+
z-index: 9000;
22+
border: 1px #333 solid;
23+
border-radius: 6px;
24+
background: #ffffff;
25+
padding-right: 12px;
26+
width: fit-content;
27+
height: fit-content;
28+
right: 20px;
29+
bottom: 20px;
30+
}
31+
.legend-icon {
32+
height: 20px;
33+
width: 20px;
34+
}
35+
</style>
36+
<script>
37+
//使用严格模式
38+
'use strict';
39+
var map;
40+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
41+
/**
42+
* 地图初始化
43+
*/
44+
function init() {
45+
//实例化要加载的source来源对象（世界矢量地图）
46+
var dark = {
47+
type: 'raster',
48+
tiles: [
49+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
50+
'http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
51+
'&TILECOL=' +
52+
'{x}' +
53+
'&TILEROW=' +
54+
'{y}' +
55+
'&TILEMATRIX=' +
56+
'{z}' +
57+
'&tk=' +
58+
tiandituKey
59+
],
60+
//栅格瓦片的分辨率
61+
tileSize: 256
62+
};
63+
//实例化Map对象加载地图
64+
map = new mapboxgl.Map({
65+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
66+
maxBounds: [
67+
[-180, -90],
68+
[180, 90]
69+
],
70+
//地图容器div的id
71+
container: 'map',
72+
//设置地图样式信息
73+
style: {
74+
//设置版本号，一定要设置
75+
version: 8,
76+
//添加来源
77+
sources: {
78+
dark: dark
79+
},
80+
//设置加载并显示来源的图层信息
81+
layers: [
82+
{
83+
//图层id，要保证唯一性
84+
id: 'dark',
85+
//图层类型
86+
type: 'raster',
87+
//连接图层来源
88+
source: 'dark',
89+
//图层最小缩放级数
90+
minzoom: 0,
91+
//图层最大缩放级数
92+
maxzoom: 22
93+
}
94+
]
95+
},
96+
zoom: 7.5,
97+
center: [116.39, 40.2]
98+
});
99+
100+
//注册地图加载事件
101+
var { protocol, ip, port } = window.webclient;
102+
map.on('load', function () {
103+
map.addLayer({
104+
id: 'tile-layer',
105+
type: 'raster',
106+
source: {
107+
type: 'raster',
108+
tiles: ['http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/tile/{z}/{y}/{x}'],
109+
tileSize: 512,
110+
mapgisOffset: -1
111+
},
112+
paint: {}
113+
});
114+
});
115+
116+
$.get('http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/legend?f=pjson', initLegend);
117+
}
118+
119+
function initLegend(legends) {
120+
legends = JSON.parse(legends);
121+
const layers = legends.layers;
122+
let legend = document.getElementById('legend');
123+
layers.forEach((l) => {
124+
let ul = document.createElement('ul');
125+
ul.innerText = l.layerName;
126+
l.legend.forEach((c) => {
127+
let li = document.createElement('li');
128+
let icon = document.createElement('img');
129+
let span = document.createElement('span');
130+
li.style = "display:flex";
131+
icon.className = 'legend-icon'
132+
icon.src = `data:image/png;base64,${c.imageData}`;
133+
span.innerText = c.label;
134+
li.appendChild(icon);
135+
li.appendChild(span);
136+
ul.appendChild(li);
137+
});
138+
legend.appendChild(ul);
139+
});
140+
}
141+
</script>
142+
</head>
143+
144+
<body onload="init()">
145+
<div id="map"></div>
146+
<div id="legend"></div>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)