Skip to content

Commit 69ddff7

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增Vue-Mapbox的栅格组件以及示例】
1 parent 0cfd35e commit 69ddff7

14 files changed

Lines changed: 784 additions & 2 deletions

File tree

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

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,30 @@
282282
}
283283
]
284284
},
285+
{
286+
"name": "ArcGIS MapServer",
287+
"iconfont": "iconserver1",
288+
"folder": "arcgis-mapserver",
289+
"leaffolder": false,
290+
"childs": [
291+
{
292+
"name": "OGC",
293+
"iconfont": "iconmap",
294+
"folder": "arcgisogc",
295+
"leaffolder": true,
296+
"childs": [
297+
{
298+
"name": "WMS",
299+
"file": "wms",
300+
"diffcult": "2",
301+
"detail": "ogc-wms服务",
302+
"icon": "wms.png",
303+
"update": "最后更新时间：2020-11-27"
304+
}
305+
]
306+
}
307+
]
308+
},
285309
{
286310
"name": "客户端可视化",
287311
"iconfont": "iconeye",
@@ -826,7 +850,55 @@
826850
"leaffolder": false,
827851
"childs": [
828852
{
829-
"name": "控制组件",
853+
"name": "Vue-栅格",
854+
"iconfont": "iconhand_draw",
855+
"folder": "raster",
856+
"leaffolder": true,
857+
"childs": [
858+
{
859+
"name": "地图文档",
860+
"file": "document",
861+
"diffcult": "2",
862+
"detail": "",
863+
"icon": "document.png",
864+
"update": "最后更新时间：2020-11-27"
865+
},
866+
{
867+
"name": "瓦片服务",
868+
"file": "tile",
869+
"diffcult": "2",
870+
"detail": "",
871+
"icon": "tile.png",
872+
"update": "最后更新时间：2020-11-27"
873+
},
874+
{
875+
"name": "通用瓦片",
876+
"file": "raster",
877+
"diffcult": "2",
878+
"detail": "",
879+
"icon": "raster.png",
880+
"update": "最后更新时间：2020-11-27"
881+
},
882+
{
883+
"name": "WMTS瓦片",
884+
"file": "wmts",
885+
"diffcult": "2",
886+
"detail": "",
887+
"icon": "wmts.png",
888+
"update": "最后更新时间：2020-11-27"
889+
},
890+
{
891+
"name": "WMS转置BBox",
892+
"file": "reversebbox",
893+
"diffcult": "2",
894+
"detail": "",
895+
"icon": "reversebbox.png",
896+
"update": "最后更新时间：2020-11-27"
897+
}
898+
]
899+
},
900+
{
901+
"name": "Vue-交互",
830902
"iconfont": "iconhand_draw",
831903
"folder": "control",
832904
"leaffolder": true,

‎website/public/static/demo/mapboxgl/example/arcgis-mapserver/arcgisogc/wms.htm‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<title>OGC_WMS</title>
8+
<!--引入第三方的jquery脚本库-->
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+
</style>
20+
<script>
21+
//使用严格模式
22+
"use strict";
23+
var map;
24+
var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
25+
/**
26+
* 地图初始化
27+
*/
28+
function init() {
29+
//实例化要加载的source来源对象（世界矢量地图）
30+
var dark = {
31+
type: "raster",
32+
tiles: [
33+
//来源请求地址，请求天地图提供的全球矢量地图WMTS服务
34+
"http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&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+
//实例化Map对象加载地图
48+
map = new mapboxgl.Map({
49+
crs: "EPSG:4326", //经纬度一定要设置crs参数
50+
maxBounds: [
51+
[-180, -90],
52+
[180, 90],
53+
],
54+
//地图容器div的id
55+
container: "map",
56+
//设置地图样式信息
57+
style: {
58+
//设置版本号，一定要设置
59+
version: 8,
60+
//添加来源
61+
sources: {
62+
dark: dark,
63+
},
64+
//设置加载并显示来源的图层信息
65+
layers: [
66+
{
67+
//图层id，要保证唯一性
68+
id: "dark",
69+
//图层类型
70+
type: "raster",
71+
//连接图层来源
72+
source: "dark",
73+
//图层最小缩放级数
74+
minzoom: 0,
75+
//图层最大缩放级数
76+
maxzoom: 22,
77+
},
78+
],
79+
},
80+
zoom: 7.5,
81+
center: [116.39, 40.20]
82+
});
83+
84+
//注册地图加载事件
85+
var { protocol, ip, port } = window.webclient;
86+
map.on("load", function () {
87+
map.addLayer({
88+
id: "wms-layer",
89+
type: "raster",
90+
source: {
91+
type: "raster",
92+
tiles: [
93+
`http://219.142.81.85/arcgis/services/10wanZH/MapServer/WMSServer?` +
94+
"service=WMS" +
95+
"&request=GetMap" +
96+
"&layers=" +
97+
"0,1,2,3,5,7,9,11" +
98+
"&styles=" +
99+
"&format=image/png" +
100+
"&transparent=true" +
101+
"&version=1.3.0" +
102+
"&height=512" +
103+
"&width=512" +
104+
"&crs=EPSG:4326" +
105+
"&bbox={bbox}" +
106+
"&reversebbox=true" // 部分arcgis需要转置bbox的顺序
107+
],
108+
tileSize: 512,
109+
},
110+
paint: {},
111+
});
112+
});
113+
}
114+
</script>
115+
</head>
116+
117+
<body onload="init()">
118+
<div id="map"></div>
119+
</body>
120+
121+
</html>

‎website/public/static/demo/mapboxgl/example/vue/control/measure.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
<div>周长：{{ perimeter }}</div>
8080
</div>
8181
</mapbox-marker>
82-
</mapbox-base-draw>
82+
</mapbox-base-measure>
8383
</mapbox-map>
8484
</div>
8585
<script>

‎website/public/static/demo/mapboxgl/example/vue/raster/document.htm‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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>Vue-测量</title>
7+
<!--引入第三方的jquery脚本库-->
8+
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9+
<style type="text/css">
10+
#main {
11+
margin: 0 0;
12+
width: 100%;
13+
height: 100vh;
14+
}
15+
#toolbar-wrapper {
16+
position: absolute;
17+
z-index: 9999;
18+
display: inline-flex;
19+
overflow-x: hidden;
20+
overflow-y: visible;
21+
top: 20px;
22+
left: 20px;
23+
}
24+
.toolbar-item {
25+
background: #ffffff;
26+
border: 1px dashed #666666;
27+
text-align: center;
28+
font-size: 20px;
29+
line-height: 20px;
30+
height: fit-content;
31+
padding: 6px 16px;
32+
cursor: pointer;
33+
}
34+
#map {
35+
height: 100vh;
36+
width: 100%;
37+
}
38+
.label {
39+
color: #3bb2d0;
40+
font-size: 16px;
41+
font-weight: bold;
42+
}
43+
</style>
44+
</head>
45+
46+
<body>
47+
<div id="app">
48+
<mapbox-map
49+
id="map"
50+
v-bind:access-token="accessToken"
51+
v-bind:map-style="mapStyle"
52+
v-bind:zoom="mapZoom"
53+
v-bind:center="outerCenter"
54+
v-bind:crs="mapCrs"
55+
v-on:load="handleMapLoad"
56+
>
57+
<mapbox-ogc-wmts-layer
58+
v-bind:layer="layerWmts"
59+
v-bind:layer-id="layerWmtsId"
60+
v-bind:source-id="sourceWmtsId"
61+
v-bind:url="wmtsurl"
62+
>
63+
</mapbox-ogc-wmts-layer>
64+
<mapbox-igs-doc-layer
65+
v-bind:layer="layerRaster"
66+
v-bind:layer-id="layerRasterId"
67+
v-bind:source="sourceRaster"
68+
v-bind:source-id="sourceRasterId"
69+
v-bind:url="url"
70+
>
71+
</mapbox-igs-doc-layer>
72+
</mapbox-map>
73+
</div>
74+
<script>
75+
new Vue({
76+
el: '#app',
77+
data() {
78+
return {
79+
mapStyle: {
80+
//设置版本号，一定要设置
81+
version: 8,
82+
//添加来源
83+
sources: {},
84+
//设置加载并显示来源的图层信息
85+
layers: [],
86+
}, // 地图样式
87+
mapZoom: 8, // 地图初始化级数
88+
outerCenter: [116.39, 40.20], // 地图显示中心
89+
mapCrs: 'EPSG:4326',
90+
91+
layerWmts: {},
92+
layerWmtsId: 'ogcwmts_layerId',
93+
sourceWmtsId: 'ogcwmts_sourceId',
94+
wmtsurl: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
95+
96+
layerRaster: {},
97+
layerRasterId: 'raster_layerId',
98+
sourceRasterId: 'raster_sourceId',
99+
url:'http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市'
100+
};
101+
},
102+
methods: {
103+
enableMeasure() {
104+
const component = this.$refs.measureref;
105+
if (component) {
106+
component.enableMeasure();
107+
}
108+
},
109+
handleMapLoad(payload) {
110+
this.map = payload.map;
111+
}
112+
}
113+
});
114+
</script>
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)