Skip to content

Commit 5030c26

Browse files
CQ-blissCQ-bliss
committed
添加codemirror部分插件，添加在leaflet与openlayers引擎下添加常见示例页面以及嵌入示例的相关html页面，在material-kit.css中修改标题头color以及material-dashboard.css中dropdown-menu的color，以及demo页面与gallery页面关于菜单栏中一级与二级目录关于hash冲突
1 parent de92ee2 commit 5030c26

84 files changed

Lines changed: 7496 additions & 326 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎demo/leaflet/iframe_html/01_mapLayer.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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="../../../libs/zondyclient/include-leaflet-local.js"></script>
7+
<style>
8+
body{
9+
height:700px;
10+
}
11+
</style>
12+
<script>
13+
"use strict";
14+
15+
/**显示地图
16+
*/
17+
function init() {
18+
//地图容器
19+
var map = L.map('leaf_map', {
20+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
21+
crs: L.CRS.EPSG4326,
22+
//显示中心
23+
center: [0, -90],
24+
//最小显示等级
25+
minZoom: 1,
26+
//最大显示等级
27+
maxZoom: 10,
28+
//当前显示等级
29+
zoom: 3,
30+
//不显示放大缩小按钮
31+
zoomControl:false,
32+
//限制显示地理范围
33+
maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
34+
});
35+
36+
//显示OSM地图
37+
var layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
38+
//最小显示等级
39+
minZoom: 1,
40+
//最大显示等级
41+
maxZoom: 15,
42+
//设置地图不连续显示
43+
noWrap: true
44+
}).addTo(map);
45+
46+
}
47+
</script>
48+
</head>
49+
<body onload="init()">
50+
<div id="leaf_map" style="width:100%;height:100%"></div>
51+
</body>
52+
</html>

‎demo/leaflet/iframe_html/02_layerControl.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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="../../../libs/zondyclient/include-leaflet-local.js"></script>
7+
<style>
8+
body {
9+
height: 700px;
10+
}
11+
</style>
12+
<script>
13+
"use strict";
14+
15+
/**显示地图
16+
*/
17+
function init() {
18+
//地图容器
19+
var map = L.map('leaf_map', {
20+
//参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
21+
crs: L.CRS.EPSG4326,
22+
//显示中心
23+
center: [45, -90],
24+
//最小显示等级
25+
minZoom: 1,
26+
//最大显示等级
27+
maxZoom: 5,
28+
//当前显示等级
29+
zoom: 2,
30+
//限制显示地理范围
31+
//maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
32+
});
33+
//矢量+注记
34+
var layer = L.tileLayer('http://t0.tianditu.com/DataServer?T=ter_c&x={x}&y={y}&l={z}', { tileSize: 256, layer: 'ter', noWrap: true });
35+
//矢量图层
36+
var layer1 = L.tileLayer('http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}', { tileSize: 256, layer: 'vec', minZoom: 1, maxZoom: 15, noWrap: true });
37+
//矢量注记图层
38+
var layer2 = L.tileLayer('http://t0.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}', { tileSize: 256, layer: 'cva', minZoom: 1, maxZoom: 15, noWrap: true });
39+
//影像图层
40+
var layer3 = L.tileLayer('http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}', { tileSize: 256, layer: 'img', minZoom: 1, maxZoom: 15, noWrap: true });
41+
//影像注记
42+
var layer4 = L.tileLayer('http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}', { tileSize: 256, layer: 'cia', minZoom: 1, maxZoom: 15, noWrap: true });
43+
//图层组
44+
var LayerG = L.layerGroup([layer1, layer2]);
45+
//添加图层组
46+
LayerG.addTo(map);
47+
var vec = {
48+
"矢量+注记": LayerG,
49+
}
50+
var img = {
51+
"矢量图层": layer,
52+
"影像图层": layer3,
53+
"影像注记": layer4
54+
}
55+
//图层控制显示控件
56+
L.control.layers(vec, img).addTo(map);
57+
58+
}
59+
</script>
60+
</head>
61+
<body onload="init()">
62+
<div id="leaf_map" style="width:100%;height:100%"></div>
63+
</body>
64+
</html>

‎demo/leaflet/iframe_html/03_mapLocation.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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 include="jquery" src="../../../libs/zondyclient/include-lib-local.js"></script>
7+
<script src="../../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<!--引入当前页面样式表-->
9+
<link href="../../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
10+
11+
<style>
12+
body {
13+
height: 700px;
14+
}
15+
</style>
16+
<script type="text/javascript">
17+
//使用严格模式
18+
"use strict";
19+
//定义地图
20+
var map;
21+
/**初始化地图显示
22+
*/
23+
function init() {
24+
//地图容器
25+
map = L.map('leaf_map', {
26+
//参考坐标系
27+
crs: L.CRS.EPSG3857,
28+
//显示中心
29+
center: [0, 0],
30+
//最小显示等级
31+
minZoom: 0,
32+
//最大显示等级
33+
maxZoom: 8,
34+
//当前显示等级
35+
zoom: 4
36+
});
37+
//加载瓦片图层数据（OSM）
38+
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { noWrap: true }).addTo(map);
39+
}
40+
41+
/**平移地图
42+
*/
43+
function mapMove() {
44+
//获取文本框中输入的X坐标和Y坐标
45+
var X = document.getElementById("Xposition").value;
46+
var Y = document.getElementById("Yposition").value;
47+
//判断坐标值是否输入
48+
if (X != "" && Y != "") {
49+
if (!isNaN(X) && !isNaN(Y)) {
50+
//字符串转数字
51+
var pntX = parseInt(X);
52+
var pntY = parseInt(Y);
53+
} else {
54+
alert('请输入数字！');
55+
return;
56+
}
57+
} else {
58+
alert('请输入内容！');
59+
return;
60+
}
61+
//注意leaflet是用纬经度来表示位置
62+
var coordinate = [pntY, pntX];
63+
//平移视图位置，并设置显示级数
64+
map.setView(coordinate, map.getZoom());
65+
}
66+
67+
/**复位地图
68+
*/
69+
function restore() {
70+
//将地图恢复至初始位置状态
71+
map.setView([0, 0], 4);
72+
}
73+
</script>
74+
</head>
75+
<body onload="init()">
76+
<div class="ToolLib">
77+
<span class="style1">
78+
<label>
79+
<strong>X坐标:</strong>
80+
</label>
81+
</span>
82+
<input id="Xposition" type="text" value="114" />
83+
&nbsp; &nbsp;
84+
<span class="style2">
85+
<label>
86+
<strong>Y坐标:</strong>
87+
</label>
88+
</span>
89+
<input id="Yposition" type="text" value="30" />
90+
<input type="button" class="ButtonLib" id="moveto" value="平移" onclick="mapMove()" />
91+
<input type="button" class="ButtonLib" id="restore" value="复位" onclick="restore()" />
92+
</div>
93+
<div id="leaf_map" style="width: 100%; height: 95%;position: absolute">
94+
</div>
95+
</body>

‎demo/leaflet/iframe_html/04_gridLayerscontrol.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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 include="china" src="../../../libs/zondyclient/include-leaflet-local.js"></script>
7+
<!--引入当前页面样式表-->
8+
<link href="../../../css/openlayers/style.css" rel="stylesheet" type="text/css" />
9+
10+
<style>
11+
body {
12+
height: 700px;
13+
}
14+
</style>
15+
<script type="text/javascript">
16+
//使用严格模式
17+
"use strict";
18+
//定义地图
19+
var map;
20+
//定义矢量图层和影像图层
21+
var vectorLayer, imageLayer;
22+
/**初始化地图显示
23+
*/
24+
function init() {
25+
//地图容器
26+
map = L.map('leaf_map', {
27+
//参考坐标系
28+
crs: L.CRS.EPSG3857,
29+
//显示中心
30+
center: [40, 116.3],
31+
//最小显示等级
32+
minZoom: 0,
33+
//最大显示等级
34+
maxZoom: 16,
35+
//当前显示等级
36+
zoom: 12
37+
});
38+
//添加天地图矢量图层
39+
vectorLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
40+
maxZoom: 16,
41+
minZoom: 0
42+
}).addTo(map);
43+
//添加天地图影像图层
44+
imageLayer = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
45+
maxZoom: 16,
46+
minZoom: 0
47+
}).addTo(map);
48+
}
49+
50+
/**改变矢量图层的z-index
51+
*/
52+
function changeVectorLayerIndex() {
53+
//获取矢量图层的number标签
54+
var vecInput = document.getElementById('vecLayer');
55+
//设置图层的ZIndex，上层的ZIndex值比下层的要大
56+
vectorLayer.setZIndex(parseInt(vecInput.value, 10));
57+
}
58+
59+
/**改变影像图层的z-index
60+
*/
61+
function changeImageLayerIndex() {
62+
//获取影像图层的number标签
63+
var imgInput = document.getElementById('imgLayer');
64+
//设置图层的ZIndex，上层的ZIndex值比下层的要大
65+
imageLayer.setZIndex(parseInt(imgInput.value, 10));
66+
}
67+
</script>
68+
</head>
69+
<body onload="init();">
70+
<div class="ToolLib">
71+
<label for="idx1">
72+
矢量图层 Z-index：
73+
<input type="number" id="vecLayer" value="1" onchange="changeVectorLayerIndex()"/>
74+
</label>
75+
<label for="idx2">
76+
影像图层 Z-index：
77+
<input type="number" id="imgLayer" value="1" onchange="changeImageLayerIndex()"/>
78+
</label>
79+
</div>
80+
<div id="leaf_map" style="width: 100%; height: 95%;position: absolute">
81+
</div>

‎demo/leaflet/iframe_html/05_mapOperationEvent.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>图层操作事件</title>
7+
<script include="china" src="../../../libs/zondyclient/include-leaflet-local.js"></script>
8+
<!--引入当前页面样式表-->
9+
<link href="../../../css/leaflet/style.css" rel="stylesheet" type="text/css" />
10+
11+
<style>
12+
body {
13+
height: 700px;
14+
}
15+
</style>
16+
<script type="text/javascript">
17+
//使用严格模式
18+
"use strict";
19+
//定义地图
20+
var map;
21+
/**初始化地图显示
22+
*/
23+
function init() {
24+
//地图容器
25+
map = L.map('leaf_map', {
26+
//参考坐标系
27+
crs: L.CRS.EPSG3857,
28+
//显示中心
29+
center: [40, 116.3],
30+
//最小显示等级
31+
minZoom: 0,
32+
//最大显示等级
33+
maxZoom: 16,
34+
//当前显示等级
35+
zoom: 12
36+
});
37+
//添加天地图矢量图层
38+
var vectorMap = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
39+
maxZoom: 16,
40+
minZoom: 0
41+
});
42+
//添加天地图矢量注记
43+
var vectorAnnotion = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
44+
maxZoom: 16,
45+
minZoom: 0
46+
});
47+
//添加天地图影像图层
48+
var imageMap = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
49+
maxZoom: 16,
50+
minZoom: 0
51+
});
52+
//添加天地图影像注记
53+
var imageAnnotion = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
54+
maxZoom: 16,
55+
minZoom: 0
56+
});
57+
//设置图层组
58+
var vector = L.layerGroup([vectorMap, vectorAnnotion]);
59+
var image = L.layerGroup([imageMap, imageAnnotion]);
60+
var baseLayers = {
61+
"地图": vector,
62+
"影像": image
63+
}
64+
//初始时加载矢量图层组
65+
map.addLayer(vector);
66+
//添加图层组控件
67+
L.control.layers(baseLayers).addTo(map);
68+
69+
/**注册基图层改变事件，通过layers控件来触发
70+
* @param {string} type 事件类型（底图改变）
71+
* @param {function} fn 事件触发后的响应函数
72+
*/
73+
map.on('baselayerchange', function (e) {
74+
//弹框提示
75+
alert("基图层改变了！");
76+
})
77+
}
78+
</script>
79+
</head>
80+
81+
<body onload="init()">
82+
<div id="leaf_map" style="width: 100%; height: 95%;">
83+
</div>
84+
</body>
85+
86+
</html>

0 commit comments

Comments
 (0)