Skip to content

Commit 2290d94

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Vue组件示例框架&实现基本的绘制组件】
1 parent 11c0a2e commit 2290d94

11 files changed

Lines changed: 12572 additions & 133 deletions

File tree

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -691,6 +691,30 @@
691691
}
692692
]
693693
},
694+
{
695+
"name": "IGServer-X-内网",
696+
"iconfont": "icon_igs",
697+
"folder": "igserver-x",
698+
"leaffolder": false,
699+
"childs": [
700+
{
701+
"name": "矢量大数据",
702+
"iconfont": "iconapachespark",
703+
"folder": "vector",
704+
"leaffolder": true,
705+
"childs": [
706+
{
707+
"name": "数据目录",
708+
"file": "spark-buffer",
709+
"diffcult": "3",
710+
"detail": "",
711+
"icon": "spark-buffer.png",
712+
"update": "最后更新时间：2020-10-01"
713+
}
714+
]
715+
}
716+
]
717+
},
694718
{
695719
"name": "DataStore-内网",
696720
"iconfont": "iconESfuwuElasticsearch",
@@ -818,6 +842,30 @@
818842
]
819843
}
820844
]
845+
},
846+
{
847+
"name": "Vue组件",
848+
"iconfont": "iconvue",
849+
"folder": "vue",
850+
"leaffolder": false,
851+
"childs": [
852+
{
853+
"name": "控制组件",
854+
"iconfont": "iconhand_draw",
855+
"folder": "control",
856+
"leaffolder": true,
857+
"childs": [
858+
{
859+
"name": "绘制组件",
860+
"file": "draw",
861+
"diffcult": "2",
862+
"detail": "",
863+
"icon": "draw.png",
864+
"update": "最后更新时间：2020-10-26"
865+
}
866+
]
867+
}
868+
]
821869
}
822870
]
823871
}

‎website/public/static/demo/mapboxgl/example/igserver-x/vector/spark-buffer.htm‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>分布式缓冲区</title>
6+
<script src="./static/libs/include-mapboxgl-local.js"></script>
7+
<style>
8+
#map {
9+
position: absolute;
10+
width: 100%;
11+
height: 100%;
12+
}
13+
.mapboxgl-popup {
14+
max-width: fit-content !important;
15+
}
16+
.table-popup-wrapper {
17+
width: fit-content;
18+
}
19+
</style>
20+
</head>
21+
22+
<body>
23+
<div id="map"></div>
24+
<script>
25+
mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
26+
var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
27+
var vecsrc = {
28+
//来源类型为栅格瓦片
29+
type: 'raster',
30+
tiles: [
31+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
32+
'http://t' +
33+
Math.round(Math.random() * 7) +
34+
'.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
35+
'&TILECOL=' +
36+
'{x}' +
37+
'&TILEROW=' +
38+
'{y}' +
39+
'&TILEMATRIX=' +
40+
'{z}' +
41+
'&tk=' +
42+
tiandituKey
43+
],
44+
//栅格瓦片的分辨率
45+
tileSize: 256
46+
};
47+
var cvasrc = {
48+
//来源类型为栅格瓦片
49+
type: 'raster',
50+
tiles: [
51+
//来源请求地址，请求天地图提供的全球矢量中文注记WMTS服务
52+
'http://t' +
53+
Math.round(Math.random() * 7) +
54+
'.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
55+
'&TILECOL=' +
56+
'{x}' +
57+
'&TILEROW=' +
58+
'{y}' +
59+
'&TILEMATRIX=' +
60+
'{z}' +
61+
'&tk=' +
62+
tiandituKey
63+
],
64+
//栅格瓦片的分辨率
65+
tileSize: 256
66+
};
67+
var popup = new mapboxgl.Popup({ closeOnClick: false });
68+
var map = new mapboxgl.Map({
69+
container: 'map',
70+
crs: 'EPSG:4326', //经纬度一定要设置crs参数
71+
maxBounds: [
72+
[-180, -90],
73+
[180, 90]
74+
],
75+
style: {
76+
//设置版本号，一定要设置
77+
version: 8,
78+
//添加来源
79+
sources: {
80+
vecsrc: vecsrc,
81+
cvasrc: cvasrc
82+
},
83+
//设置加载并显示来源的图层信息
84+
layers: [
85+
{
86+
//图层id，要保证唯一性
87+
id: 'vecsrc',
88+
//图层类型
89+
type: 'raster',
90+
//连接图层来源
91+
source: 'vecsrc',
92+
//图层最小缩放级数
93+
minzoom: 0,
94+
//图层最大缩放级数
95+
maxzoom: 22
96+
},
97+
{
98+
//图层id，要保证唯一性
99+
id: 'cvasrc',
100+
//图层类型
101+
type: 'raster',
102+
//连接图层来源
103+
source: 'cvasrc',
104+
//图层最小缩放级数
105+
minzoom: 0,
106+
//图层最大缩放级数
107+
maxzoom: 22
108+
}
109+
]
110+
},
111+
zoom: 10,
112+
pitch: 45,
113+
center: [121.4693, 31.12307]
114+
});
115+
116+
var vm = this;
117+
118+
map.on('load', () => {
119+
vm.query();
120+
});
121+
122+
function query() {
123+
const url =
124+
'http://192.168.96.101:9091/pgsql/vectortileservice_dzy?' +
125+
'libName=bigdata03&srvName=bigdata03.mpf26126&version=1' +
126+
'&TileMatrix={z}&TileRow={y}&TileCol={x}&keepField=lat';
127+
/* var param = {
128+
networkProtocol: 'http',
129+
ip: '192.168.96.101',
130+
port: 9091,
131+
path: 'bigdata03/bigdata03/', // 这里的最后一个mpf24091是mapgis平台中的图层名',
132+
version: '1.0',
133+
tileMatrix: '{z}',
134+
tileRow: '{y}',
135+
tileCol: '{x}'
136+
};
137+
138+
var vectortile = new Zondy.DataStore.PostGIS.PostgisVectorTileService(param);
139+
var url = vectortile.getWmtsUrl(); */
140+
var sourceId = 'query-source';
141+
var layerId = 'select_layer';
142+
143+
map.addSource(sourceId, {
144+
type: 'vector',
145+
tiles: [url],
146+
mapgisOffset: 1
147+
});
148+
map.addLayer({
149+
id: layerId,
150+
type: 'circle',
151+
source: sourceId,
152+
'source-layer': 'bigdata03.mpf26126',
153+
paint: {
154+
'circle-radius': 12,
155+
'circle-color': '#B42222',
156+
'circle-stroke-width': 3,
157+
'circle-stroke-color': '#ffffff'
158+
},
159+
filter: ['==', '$type', 'Point']
160+
});
161+
}
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)