Skip to content

Commit de81bbc

Browse files
author
潘卓然Y7000P
committed
【站点】【修复】【修复Leaflet的OGC示例】
1 parent cb2b474 commit de81bbc

10 files changed

Lines changed: 174 additions & 142 deletions

File tree

‎website/public/static/demo/cesium/example/vue/control/link.htm‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,19 @@
3232
bottom: 0px;
3333
right: 0px;
3434
}
35+
.control {
36+
position: absolute;
37+
z-index: 9999;
38+
background: #ffffff;
39+
top: 47.2vh;
40+
left: 47.5vw;
41+
width: 5vw;
42+
height: 5vh;
43+
border-radius: 12px;
44+
}
45+
.active {
46+
background: #41b883;
47+
}
3548
</style>
3649
</head>
3750

@@ -60,7 +73,7 @@
6073
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
6174
>
6275
<cesium-raster-layer v-bind:url="url2"> </cesium-raster-layer>
63-
<cesium-link v-bind:enable="link"></cesium-link>
76+
<!-- <cesium-link v-bind:enable="link"></cesium-link> -->
6477
</cesium-web-globe>
6578
</div>
6679
<div class="item bottom-left">
@@ -73,7 +86,7 @@
7386
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
7487
>
7588
<cesium-raster-layer v-bind:url="url3"> </cesium-raster-layer>
76-
<cesium-link v-bind:enable="link"></cesium-link>
89+
<!-- <cesium-link v-bind:enable="link"></cesium-link> -->
7790
</cesium-web-globe>
7891
</div>
7992
<div class="item bottom-right">
@@ -86,17 +99,20 @@
8699
pluginPath="./static/libs/cdn/cesium/webclient-cesium-plugin.js"
87100
>
88101
<cesium-ogc-wmts-layer v-bind:url="url4" v-bind:options="wmtsoptions"></cesium-ogc-wmts-layer>
89-
<cesium-link v-bind:enable="link"></cesium-link>
102+
<!-- <cesium-link v-bind:enable="link"></cesium-link> -->
90103
</cesium-web-globe>
91104
</div>
105+
<div v-bind:class="{'control': true, active: link}" v-on:click="changeMode"></div>
92106
</div>
93107
<script>
94108
let draw = new Vue({
95109
el: '#app',
96110
data() {
97111
return {
98-
webgloberef1: 'webgloberef' + Math.random(),
99-
webgloberef2: 'webgloberef' + Math.random(),
112+
webgloberef1: 'webgloberef1',
113+
webgloberef2: 'webgloberef2',
114+
webgloberef3: 'webgloberef3',
115+
webgloberef4: 'webgloberef4',
100116
link: true,
101117
url1: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
102118
url2: 'http://mt0.google.cn/vt/lyrs=m&hl=zh-CN&x={x}&y={y}&z={z}',
@@ -111,6 +127,9 @@
111127
methods: {
112128
handleLoad(e) {
113129
console.log('地图加初始化完毕！', e);
130+
},
131+
changeMode() {
132+
this.link = !this.link;
114133
}
115134
}
116135
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1107,7 +1107,7 @@
11071107
"leaffolder": false,
11081108
"childs": [
11091109
{
1110-
"name": "栅格瓦片",
1110+
"name": "Vue-栅格",
11111111
"iconfont": "iconhand_draw",
11121112
"folder": "raster",
11131113
"leaffolder": true,
@@ -1155,7 +1155,7 @@
11551155
]
11561156
},
11571157
{
1158-
"name": "交互组件",
1158+
"name": "Vue-交互",
11591159
"iconfont": "icon_features",
11601160
"folder": "control",
11611161
"leaffolder": true,
@@ -1179,7 +1179,7 @@
11791179
]
11801180
},
11811181
{
1182-
"name": "模型组件",
1182+
"name": "Vue-模型",
11831183
"iconfont": "icon_features",
11841184
"folder": "model",
11851185
"leaffolder": true,

‎website/public/static/demo/leaflet/example/internet/osm.htm‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3-
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5-
<title>OSM地图显示</title>
6-
<script src="./static/libs/include-leaflet-local.js"></script>
7-
<script type="text/javascript">
8-
/**显示地图
9-
*/
10-
function init() {
11-
"use strict";
12-
var osmUrl='http://c.tile.openstreetmap.org/{z}/{x}/{y}.png';
13-
var Layer = L.tileLayer(osmUrl, {minZoom: 5, maxZoom: 18});
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>OSM地图显示</title>
6+
<script src="./static/libs/include-leaflet-local.js"></script>
7+
<script type="text/javascript">
8+
/**显示地图
9+
*/
10+
function init() {
11+
'use strict';
12+
var osmUrl = 'http://c.tile.openstreetmap.org/{z}/{x}/{y}.png';
13+
var Layer = L.tileLayer(osmUrl, { minZoom: 5, maxZoom: 18 });
1414

15-
//地图容器
16-
var map = L.map('leaf_map', {
17-
//显示中心
18-
center: [30.495722001885323,114.39960479736327],
19-
//最小显示等级
20-
minZoom: 0,
21-
//最大显示等级
22-
maxZoom: 15,
23-
//当前显示等级
24-
zoom: 11,
25-
//图层
26-
layers:Layer
27-
});
28-
}
29-
</script>
30-
</head>
31-
<body onload="init()">
32-
<div id="leaf_map" style="width: 100%; height:700px;">
33-
</div>
34-
</body>
15+
//地图容器
16+
var map = L.map('leaf_map', {
17+
//显示中心
18+
center: [30.495722001885323, 114.39960479736327],
19+
//最小显示等级
20+
minZoom: 0,
21+
//最大显示等级
22+
maxZoom: 15,
23+
//当前显示等级
24+
zoom: 11,
25+
//图层
26+
layers: Layer
27+
});
28+
}
29+
</script>
30+
</head>
31+
<body onload="init()">
32+
<div id="leaf_map" style="width: 100%; height: 700px"></div>
33+
</body>
3534
</html>

‎website/public/static/demo/leaflet/example/ogc/wms.htm‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,58 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>加载OGC的WMS图层</title>
6+
<script src="./static/libs/include-leaflet-local.js"></script>
7+
<script type="text/javascript">
8+
/**显示地图
9+
*/
10+
function init() {
11+
'use strict';
12+
//地图容器
13+
var map = L.map('leaf_map', {
14+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
15+
crs: L.CRS.EPSG4326,
16+
//显示中心
17+
center: [40.20, 116.39],
18+
//最小显示等级
19+
minZoom: 1,
20+
//最大显示等级
21+
maxZoom: 15,
22+
//当前显示等级
23+
zoom: 8,
24+
//限制显示地理范围
25+
maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
26+
});
27+
var { protocol, ip, port } = window.webclient;
28+
// 天地图
29+
var layer1 = new Zondy.Map.TDTLayer({
30+
//图层类型
31+
layerType: 'img',
32+
//最小显示等级
33+
minZoom: 0,
34+
//最大显示等级
35+
maxZoom: 15,
36+
//key
37+
token: '4c27d6e0e8a90715b23a989d42272fd8',
38+
//设置地图不连续显示
39+
noWrap: true
40+
}).addTo(map);
41+
//wms服务
42+
var Layer = L.tileLayer
43+
.wms(`${protocol}://${ip}:${port}/igs/rest/ogc/doc/北京市/WMSServer?`, {
44+
//图层名称
45+
layers:
46+
'北京市,绿地_1,绿地_2,绿地_3,绿地_4,水域_3,水域_2,水域_1,大学,学校,动物园,高尔夫,观光胜地,果园,住宅用地,医院,商业用地,建筑物,铁路_1,铁路_2,铁路_3,主干道,主干道,高速公路_1,高速公路_1_9-10,三级道路_链接,三级道路,二级道路_链接,二级道路,一级道路_链接,一级道路,主干道_链接,主干道,主干道,高速公路_链接,高速公路_2,高速公路_2,三级道路_链接,三级道路,二级道路_链接,二级道路,一级道路_链接,一级道路,地铁,主干道_链接,主干道,主干道,高速公路_链接,高速公路_2,高速公路_2,地铁站POI,山顶,果园poi,汽车站点POI,大学poi,学校poi,中小学POI,幼儿园POI,医院POI,口腔医院POI,派出所POI,检察院POI,银行POI,邮局POI,体育馆POI,纪念碑POI,博物馆POI,名胜古迹点,动物园poi,观光胜地poi,主题公园POI,宾馆POI,百货店POI,便利店POI,书店POI,快餐POI,咖啡馆POI,电影院POI,高尔夫poi,村庄点,市镇点,区县点,首都点',
47+
//wms版本号
48+
version: '1.1.1'
49+
})
50+
.addTo(map);
51+
}
52+
</script>
53+
</head>
354

4-
<head>
5-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6-
<title>加载OGC的WMS图层</title>
7-
<script src="./static/libs/include-leaflet-local.js"></script>
8-
<script type="text/javascript">
9-
/**显示地图
10-
*/
11-
function init() {
12-
"use strict";
13-
//地图容器
14-
var map = L.map('leaf_map', {
15-
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
16-
crs: L.CRS.EPSG4326,
17-
//显示中心
18-
center: [0, 0],
19-
//最小显示等级
20-
minZoom: 1,
21-
//最大显示等级
22-
maxZoom: 15,
23-
//当前显示等级
24-
zoom: 2,
25-
//限制显示地理范围
26-
maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
27-
});
28-
var { protocol, ip, port } = window.webclient;
29-
//wms服务
30-
var Layer = L.tileLayer.wms(`${protocol}://${ip}:${port}/igs/rest/ogc/layer/WorldJWLayer/WMSServer`, {
31-
//图层名称
32-
layers: '世界政区',
33-
//wms版本号
34-
version: '1.3.0'
35-
}).addTo(map);
36-
}
37-
</script>
38-
</head>
39-
40-
<body onload="init()">
41-
<div id="leaf_map" style="width: 100%; height:700px;">
42-
</div>
43-
</body>
44-
45-
</html>
55+
<body onload="init()">
56+
<div id="leaf_map" style="width: 100%; height: 700px"></div>
57+
</body>
58+
</html>

‎website/public/static/demo/leaflet/example/ogc/wmts.htm‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,64 @@
1-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
22
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>加载OGC的WMTS图层</title>
5+
<script src="./static/libs/include-leaflet-local.js"></script>
6+
<script type="text/javascript">
7+
/**显示地图
8+
*/
9+
function init() {
10+
'use strict';
11+
//地图容器
12+
var map = L.map('leaf_map', {
13+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
14+
crs: L.CRS.EPSG4326,
15+
//显示中心
16+
center: [40.2, 116.39],
17+
//最小显示等级
18+
minZoom: 1,
19+
//最大显示等级
20+
maxZoom: 15,
21+
//当前显示等级
22+
zoom: 8
23+
});
324

4-
<head>
5-
<title>加载OGC的WMTS图层</title>
6-
<script src="./static/libs/include-leaflet-local.js"></script>
7-
<script type="text/javascript">
8-
/**显示地图
9-
*/
10-
function init() {
11-
"use strict";
12-
var ls = '+proj=longlat+ellps=krass+lon_0=0 +a=6378245 +b=6356863.01877305+units=degree no_defs';
13-
//114.125602229914,30.4539323507469,114.500788705197,30.8291188260302
14-
var resolution = Math.max((114.500788705197 - 114.125602229914), (30.8291188260302 - 30.4539323507469)) /
15-
256;
16-
var WGS84_resolutions = [];
17-
for (var i = 0; i < 6; i++) {
18-
WGS84_resolutions.push(resolution / (Math.pow(2, i)));
19-
}
20-
21-
var m_WGS84 = Zondy.Proj.CRS("aaa", {
22-
def: ls,
23-
origin: [114.125602229914, 30.8291188260302],
24-
resolutions: WGS84_resolutions,
25-
bounds: window.L.bounds([114.125602229914, 30.4539323507469], [114.500788705197,
26-
30.8291188260302
27-
])
28-
});
29-
30-
//地图容器
31-
var map = L.map('leaf_map', {
32-
crs: m_WGS84
33-
}).setView([(30.708764095603 + 30.4539323507469) / 2, (114.500706988372 +
34-
114.125602229914) / 2], 2);
25+
var { protocol, ip, port } = window.webclient;
26+
// 天地图
27+
var layer1 = new Zondy.Map.TDTLayer({
28+
//图层类型
29+
layerType: 'img',
30+
//最小显示等级
31+
minZoom: 0,
32+
//最大显示等级
33+
maxZoom: 15,
34+
//key
35+
token: '4c27d6e0e8a90715b23a989d42272fd8',
36+
//设置地图不连续显示
37+
noWrap: true
38+
}).addTo(map);
3539

36-
var { protocol, ip, port } = window.webclient;
37-
//wmts服务
38-
var layer3 = new Zondy.Map.MapWMTSLayer({
39-
//IGServer所在ip地址
40-
ip: `${ip}`,
41-
//IGServer请求端口号
42-
port: `${port}`,
43-
tilematrixSet: "EPSG:4326_WhMapTileOld_dpi96_GB",
44-
//wmts服务名称
45-
layer: 'WhMapTileWMTS',
46-
}).addTo(map);
40+
//wmts服务
41+
var layer3 = new Zondy.Map.MapWMTSLayer({
42+
//IGServer所在ip地址
43+
ip: `${ip}`,
44+
//IGServer请求端口号
45+
port: `${port}`,
46+
tilematrixSet: 'EPSG:4326_北京市_arcgis_GB',
47+
//wmts服务名称
48+
layer: 'beijing'
49+
}).addTo(map);
4750

48-
L.circle([30.641511, 114.33982], {
49-
radius: 10,
50-
color: 'red',
51-
fillColor: '#f03',
52-
fillOpacity: 1
53-
}).addTo(map);
54-
}
55-
</script>
56-
</head>
57-
58-
<body onload="init()">
59-
<div id="leaf_map" style="width: 100%; height:700px;">
60-
</div>
61-
</body>
51+
L.circle([40.2, 116.39], {
52+
radius: 10,
53+
color: 'red',
54+
fillColor: '#f03',
55+
fillOpacity: 1
56+
}).addTo(map);
57+
}
58+
</script>
59+
</head>
6260

63-
</html>
61+
<body onload="init()">
62+
<div id="leaf_map" style="width: 100%; height: 700px"></div>
63+
</body>
64+
</html>

‎website/public/static/demo/leaflet/gallery/ogc/wms.png‎

85.6 KB
Loading

‎website/public/static/demo/leaflet/gallery/ogc/wmts.png‎

-38.2 KB
Loading

‎website/public/static/demo/mapboxgl/example/ogc/wfs.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
position: absolute;
1616
bottom: 0;
1717
width: 100%;
18-
height: 100%;
18+
height: 100vh;
1919
}
2020
</style>
2121
<script>

0 commit comments

Comments
 (0)