Skip to content

Commit 716ac5d

Browse files
author
潘卓然Y7000P
committed
【站点】【新增】【新增ArcGIS-跨域/MapserverTile替代方案】
1 parent 5dab76e commit 716ac5d

9 files changed

Lines changed: 210 additions & 30 deletions

File tree

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -887,6 +887,14 @@
887887
"icon": "wmts.png",
888888
"update": "最后更新时间：2020-11-27"
889889
},
890+
{
891+
"name": "WMTS-深圳",
892+
"file": "wmts-arcgis",
893+
"diffcult": "2",
894+
"detail": "",
895+
"icon": "wmts-arcgis.png",
896+
"update": "最后更新时间：2020-11-27"
897+
},
890898
{
891899
"name": "WMS转置BBox",
892900
"file": "reversebbox",

‎website/public/static/demo/mapboxgl/example/vue/raster/wmts-arcgis.htm‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
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-igs-tdt-layer
58+
v-bind:layer="layer"
59+
v-bind:layer-id="layerId"
60+
v-bind:source-id="sourceId"
61+
v-bind:baseURL="baseURL"
62+
v-bind:token="token"
63+
>
64+
</mapbox-igs-tdt-layer>
65+
<mapbox-ogc-wmts-layer
66+
v-bind:layer="layerWmts"
67+
v-bind:layer-id="layerWmtsId"
68+
v-bind:source-id="sourceWmtsId"
69+
v-bind:url="wmtsurl"
70+
v-bind:zoom-offset="offset"
71+
>
72+
</mapbox-ogc-wmts-layer>
73+
</mapbox-map>
74+
</div>
75+
<script>
76+
new Vue({
77+
el: '#app',
78+
data() {
79+
return {
80+
accessToken: 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA', // 使用mapbox样式需要的秘钥
81+
mapStyle: {
82+
//设置版本号，一定要设置
83+
version: 8,
84+
//添加来源
85+
sources: {},
86+
//设置加载并显示来源的图层信息
87+
layers: [],
88+
}, // 地图样式
89+
mapZoom: 4, // 地图初始化级数
90+
outerCenter: [116.39, 40.20], // 地图显示中心
91+
mapCrs: 'EPSG:4326',
92+
93+
layerId: 'igsLayer_layerId',
94+
sourceId: 'igsLayer_sourceId',
95+
layer: {}, // 图层配置信息
96+
baseURL: 'http://t2.tianditu.gov.cn/vec_c/wmts', // 请求基地址
97+
token: '2ddaabf906d4b5418aed0078e1657029', // 请求天地图的key值
98+
99+
layerWmts: {},
100+
layerWmtsId: 'ogcwmts_layerId',
101+
sourceWmtsId: 'ogcwmts_sourceId',
102+
wmtsurl: 'http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/tile/{z}/{y}/{x}',
103+
offset: -1, //这里一定不能去掉
104+
};
105+
},
106+
methods: {
107+
enableMeasure() {
108+
const component = this.$refs.measureref;
109+
if (component) {
110+
component.enableMeasure();
111+
}
112+
},
113+
handleMapLoad(payload) {
114+
this.map = payload.map;
115+
}
116+
}
117+
});
118+
</script>
119+
</body>
120+
</html>

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

Lines changed: 18 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -47,28 +47,15 @@
4747
<div id="app">
4848
<mapbox-map
4949
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"
50+
:access-token="accessToken"
51+
:map-style="mapStyle"
52+
:zoom="mapZoom"
53+
:center="outerCenter"
54+
:crs="mapCrs"
5555
v-on:load="handleMapLoad"
5656
>
57-
<mapbox-igs-tdt-layer
58-
v-bind:layer="layer"
59-
v-bind:layer-id="layerId"
60-
v-bind:source-id="sourceId"
61-
v-bind:baseURL="baseURL"
62-
v-bind:token="token"
63-
>
64-
</mapbox-igs-tdt-layer>
65-
<mapbox-ogc-wmts-layer
66-
v-bind:layer="layerWmts"
67-
v-bind:layer-id="layerWmtsId"
68-
v-bind:source-id="sourceWmtsId"
69-
v-bind:url="wmtsurl"
70-
>
71-
</mapbox-ogc-wmts-layer>
57+
<mapbox-ogc-wmts-layer :layer="layerTdt" :layer-id="layerTdtId" :source-id="sourceTdtId" :url="tdturl"> </mapbox-ogc-wmts-layer>
58+
<mapbox-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl"> </mapbox-ogc-wmts-layer>
7259
</mapbox-map>
7360
</div>
7461
<script>
@@ -83,22 +70,23 @@
8370
//添加来源
8471
sources: {},
8572
//设置加载并显示来源的图层信息
86-
layers: [],
73+
layers: []
8774
}, // 地图样式
88-
mapZoom: 3, // 地图初始化级数
89-
outerCenter: [116.39, 40.20], // 地图显示中心
90-
mapCrs: 'EPSG:4326',
75+
mapZoom: 1, // 地图初始化级数
76+
outerCenter: [116.39, 40.2], // 地图显示中心
77+
mapCrs: 'EPSG:3857',
9178

92-
layerId: 'igsLayer_layerId',
93-
sourceId: 'igsLayer_sourceId',
94-
layer: {}, // 图层配置信息
95-
baseURL: 'http://t2.tianditu.gov.cn/vec_c/wmts', // 请求基地址
96-
token: '2ddaabf906d4b5418aed0078e1657029', // 请求天地图的key值
79+
layerTdtId: 'igsLayer_layerId',
80+
sourceTdtId: 'igsLayer_sourceId',
81+
layerTdt: {}, // 图层配置信息
82+
tdturl: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=2ddaabf906d4b5418aed0078e1657029',
9783

9884
layerWmts: {},
9985
layerWmtsId: 'ogcwmts_layerId',
10086
sourceWmtsId: 'ogcwmts_sourceId',
101-
wmtsurl: 'http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752'
87+
88+
wmtsurl:
89+
'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/?layer=Demographics_USA_Population_Density&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}'
10290
};
10391
},
10492
methods: {

‎website/public/static/demo/mapboxgl/gallery/vue/raster/wmts-arcgis.png‎

256 KB
Loading

‎website/public/static/demo/mapboxgl/markdown/vue/raster/mapserver-tile.png‎

2.5 KB
Loading

‎website/public/static/demo/mapboxgl/markdown/vue/raster/offset.png‎

61.8 KB
Loading

‎website/public/static/demo/mapboxgl/markdown/vue/raster/wmts-arcgis.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# 原因
2+
3+
旁边不是有一个例子专门讲解wmts吗? 为什么要再讲一次? 多此一举?
4+
5+
`还不是我们公司的深圳项目的特殊情况特殊处理， 下面是怎么处理这类情况:`
6+
7+
1. 传统的标准的geoserver 官方的测试用例的wmts是正确的
8+
1. [OGC-WMTS测试ARCGIS-WMTS](https://services.arcgisonline.com/arcgis/rest/services/USA_Topo_Maps/MapServer/WMTS/1.0.0/WMTSCapabilities.xml)
9+
2. 官方的测试用例是放开的了OGC-WMTS的跨域问题的，为了测试放开了跨域限制
10+
3. 按照WMTS-KVP的方式 打开该链接
11+
1. ``` sh
12+
https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/?layer=Demographics_USA_Population_Density&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=5&TileCol=9&TileRow=12
13+
```
14+
3. 预览图片如下 ![wmts-no-cors](wmts-no-cors.png)
15+
16+
2. 深圳信息中心的OGC-WMTS的做了跨域限制，只有在特定白名单的网址访问才能成功访问,`不要再问为什么报什么404 cors 400的问题了，都是一个本质原因`
17+
1. [深圳-WMTS测试ARCGIS-WMTS](http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/WMTS/1.0.0/WMTSCapabilities.xml) [深圳内网才能真正看到-用左边的网测在公网测试是一样的](http://suplicmap.pnr.sz/tilemap_1/rest/services/SZMAP/SZMAP_BASEMAP_ZW2K/MapServer/WMTS/1.0.0/WMTSCapabilities.xml)
18+
2. 内网沟通-跨域限制
19+
3. 按照WMTS-KVP的方式 打开该链接
20+
``` sh
21+
http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/WMTS/?layer=10wanZH&style=default&tilematrixset=default&Service=WMTS&
22+
```
23+
1. Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=3&TileCol=2&TileRow=1
24+
2. 发现无法预览图片如下 ![wmts-no-cors](wmts-cors.png)
25+
26+
27+
> 难道你去和深圳信息中心的沟通让人家放开吗? 想想都不现实， 怎么处理呢?
28+
29+
`核心处理方式： 用ArcServer自身的 MapServer/tile/{z}/{y}/{x}`的方式替代WMTS
30+
31+
``` js
32+
let url = 'http://219.142.81.85/arcgis/rest/services/10wanZH/`MapServer/tile/{z}/{y}/{x}?blankTile=false'
33+
http://219.142.81.85/arcgis/rest/services/10wanZH/`MapServer/tile`/5/10/46?blankTile=false
34+
```
35+
36+
1. 按照MapServer/tile 打开该链接
37+
1. http://219.142.81.85/arcgis/rest/services/10wanZH/`MapServer/tile`/5/10/46?blankTile=false
38+
2. 预览如下所示 ![mapserver-tile](mapserver-tile.png)
39+
40+
41+
2. 特别注意，使用了 Mapserver/tile的方式替代KVP后，由于不同版本的arcgis的4326的初始级不同 可能为0 可能为1，因此需要针对不同版本设置不同的zoom-offset / zoomOffset, `深圳信息中心`使用的是`10.6.1`，因此此处应该是 offset为-1
42+
1. 代码如下
43+
``` js
44+
<mapbox-ogc-wmts-layer
45+
v-bind:layer="layerWmts"
46+
v-bind:layer-id="layerWmtsId"
47+
v-bind:source-id="sourceWmtsId"
48+
v-bind:url="wmtsurl"
49+
v-bind:zoom-offset="offset"
50+
>
51+
</mapbox-ogc-wmts-layer>
52+
new Vue({
53+
el: '#app',
54+
data() {
55+
return {
56+
layerWmts: {},
57+
layerWmtsId: 'ogcwmts_layerId',
58+
sourceWmtsId: 'ogcwmts_sourceId',
59+
wmtsurl: 'http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/tile/{z}/{y}/{x}',
60+
offset: -1, //这里一定不能去掉
61+
};
62+
}
63+
}
64+
```

‎website/public/static/demo/mapboxgl/markdown/vue/raster/wmts-cors.png‎

4.19 KB
Loading

‎website/public/static/demo/mapboxgl/markdown/vue/raster/wmts-no-cors.png‎

26.7 KB
Loading

0 commit comments

Comments
 (0)