Skip to content

Commit 00e665a

Browse files
songyumengsongyumeng
committed
增加 mapboxg例子
1 parent 434139d commit 00e665a

File tree

6 files changed

+248
-1
lines changed

6 files changed

+248
-1
lines changed

‎examples/mapboxgl/01_tiledMapLayer.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'/>
5+
<title></title>
6+
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
7+
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
8+
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet'/>
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
#map {
16+
position: absolute;
17+
top: 0;
18+
bottom: 0;
19+
width: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
25+
<div id='map'></div>
26+
<script>
27+
var map = new mapboxgl.Map({
28+
container: 'map', // container id
29+
style: {
30+
"version": 8,
31+
"sources": {
32+
"raster-tiles": {
33+
"type": "raster",
34+
"tiles": ['http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
35+
"tileSize": 256
36+
}
37+
},
38+
"layers": [{
39+
"id": "simple-tiles",
40+
"type": "raster",
41+
"source": "raster-tiles",
42+
"minzoom": 0,
43+
"maxzoom": 22
44+
}]
45+
},
46+
center: [120.143, 30.236], // starting position
47+
zoom: 3 // starting zoom
48+
});
49+
map.on('load', function () {
50+
51+
map.addLayer({
52+
"id": "route",
53+
"type": "fill",
54+
"source": {
55+
"type": "geojson",
56+
"data": 'http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data/datasources/World/datasets/Countries/features/247.geojson'
57+
58+
},
59+
'layout': {},
60+
'paint': {
61+
'fill-color': '#088',
62+
'fill-opacity': 0.8
63+
}
64+
});
65+
});
66+
</script>
67+
68+
</body>
69+
</html>

‎examples/mapboxgl/config.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Leaflet 示例配置文件：包含示例的分类、名称、缩略图、文件路径
3+
*/
4+
var exampleConfig = {
5+
"iServer": {
6+
name: "iServer",
7+
content: {
8+
"map": {
9+
name: "地图",
10+
content: [
11+
{
12+
name: "3857底图",
13+
thumbnail: "mb_TileLayer.png",
14+
fileName: "01_tiledMapLayer"
15+
}
16+
]
17+
}
18+
19+
}
20+
}
21+
};

‎examples/mapboxgl/editor.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset="UTF-8">
4+
<head>
5+
<title>MapBox GL示例代码</title>
6+
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7+
<link rel="stylesheet" href="../css/common.css">
8+
<link rel="stylesheet" href="../css/sideBar.css">
9+
<link rel="stylesheet" href="../css/editor.css">
10+
<link rel="stylesheet" href="../../web/css/header.css">
11+
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
12+
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
13+
<script type="text/javascript" src="../js/ace.js"></script>
14+
<script type="text/javascript" src="./config.js"></script>
15+
<style>
16+
.container {
17+
width: 100% ;
18+
}
19+
.navbar #headerMenu > li > a {
20+
21+
font-weight: inherit;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<header class="navbar iC-header iC-theme">
27+
</header>
28+
<script>
29+
$('.iC-header').load('../../web/header.html');
30+
</script>
31+
<div class="main">
32+
<div class="content">
33+
<div id="sidebar">
34+
<ul class="menu"></ul>
35+
</div>
36+
37+
<div id="codePane" unselectable="on">
38+
<div class="contentTool">
39+
<span style="padding-left: 20px;">源代码编辑器</span>
40+
<div class="editorBtn" id="runBtn" onclick="run()"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>&nbsp;运行</div>
41+
<div class="editorBtn" id="resetBtn" onclick="refresh()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp;重置</div>
42+
</div>
43+
44+
<div id="editor">
45+
46+
</div>
47+
</div>
48+
<div id="preview">
49+
<iframe id='innerPage' name='innerPage'></iframe>
50+
</div>
51+
</div>
52+
</div>
53+
<script type="text/javascript" src="../js/sidebar.js"></script>
54+
<script type="text/javascript" src="../js/editor.js"></script>
55+
<script>
56+
57+
$(document).ready(function () {
58+
initPage();
59+
bindEvents();
60+
});
61+
function bindEvents() {
62+
$("#sidebar ul.thirdMenu a").click(function (evt) {
63+
window.location.hash = "#" + evt.target.id;
64+
initEditor();
65+
});
66+
window.addEventListener("hashchange", function () {
67+
var hash = window.location.hash;
68+
if (hash.indexOf("#") !== -1) {
69+
var id = hash.split("#")[1];
70+
selectMenu(id);
71+
}
72+
});
73+
}
74+
75+
</script>
76+
</body>
77+
</html>

‎examples/mapboxgl/examples.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
6+
<meta name="apple-mobile-web-app-capable" content="yes"/>
7+
<title>MapBox GL示范程序</title>
8+
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="../css/common.css">
10+
<link rel="stylesheet" href="../css/sideBar.css">
11+
<link rel="stylesheet" href="../css/examples.css">
12+
<link rel="stylesheet" href="../../web/css/header.css">
13+
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
14+
<script type="text/javascript" src="../js/scrollTo.min.js"></script>
15+
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
16+
<script type="text/javascript" src="./config.js"></script>
17+
<style>
18+
.container {
19+
width: 100%;
20+
}
21+
22+
.navbar #headerMenu > li > a {
23+
24+
font-weight: inherit;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<header class="navbar iC-header iC-theme">
31+
</header>
32+
<script>
33+
$('.iC-header').load('../../web/header.html');
34+
</script>
35+
<div class="main">
36+
37+
<div class="content" data-spy="scroll" data-target="#sidebar .menu">
38+
<div id="sidebar">
39+
<ul class="menu"></ul>
40+
</div>
41+
<div id="examples-container">
42+
<ul id="charts-list">
43+
44+
</ul>
45+
</div>
46+
</div>
47+
</div>
48+
<script type="text/javascript" src="../js/sidebar.js"></script>
49+
<script type="text/javascript" src="../js/example.js"></script>
50+
<script>
51+
52+
$(document).ready(function () {
53+
initPage();
54+
bindEvents()
55+
});
56+
function bindEvents() {
57+
$("#sidebar ul.menu>li").on('click', function (evt) {
58+
window.location.hash = "#" + evt.target.id;
59+
});
60+
$("#sidebar ul.secondMenu>li").on('click', function (evt) {
61+
var id = $(evt.target).parent().parent().parent().find("a.menuTitle").attr('id');
62+
id = id + "-" + evt.target.id;
63+
window.location.hash = "#" + id;
64+
evt.stopPropagation();
65+
});
66+
window.addEventListener("hashchange", function () {
67+
this.scroll();
68+
});
69+
$('.dropdown-menu li a').on('click', function () {
70+
var host = window.location.protocol + "//" + window.location.host;
71+
window.location.href = host + "/examples/" + this.text + "/examples.html";
72+
})
73+
74+
}
75+
76+
77+
</script>
78+
79+
</body>
80+
</html>

‎examples/mapboxgl/img/mb_TileLayer.png‎

85.6 KB
Loading

‎web/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<ul class="dropdown-menu nav_apis_box_li">
1414
<li>Leaflet</li>
1515
<li>OpenLayers</li>
16-
<li>WebGL</li>
16+
<li>MapBoxGL</li>
1717
</ul>
1818
</li>
1919
<li id="headerPricing"><a href="#">API</a></li>

0 commit comments

Comments
 (0)