1 <!DOCTYPE html>
2 <html lang="zh-CN">
3
4 <head>
5 <meta charset="UTF-8">
6 <link rel="shortcut icon" href="#" />
7 <title>MapBoxGL加載天地圖及加載控件</title>
8 <!--引入mapboxgl庫-->
9 <script src='./lib/js/mapbox-gl.js'></script>
10 <!--引入mapboxgl原生樣式表-->
11 <link href='./lib/css/MapBox_GL.css' rel='stylesheet' />
12 <link href="./lib/css/style.css" rel="stylesheet" />
13 </head>
14 <body>
15 <div id='map'></div>
16 <script>
17 //天地圖（各個區域的token可以在網上查到）
18 var vecUrl = "http://t0.tianditu.com/vec_w/wmts?tk=e90d56e5a09d1767899ad45846b0cefd";
19 var cvaUrl = "http://t0.tianditu.com/cva_w/wmts?tk=e90d56e5a09d1767899ad45846b0cefd";
20 //使用嚴格模式
21 "use strict";
22 //實例化source對象
23 var tdtVec = {
24 //類型為柵格瓦片
25 "type": "raster",
26 'tiles': [
27 //請求地址
28 vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
29 ],
30 //分辨率
31 'tileSize': 256
32 };
33 var tdtCva = {
34 "type": "raster",
35 'tiles': [
36 cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
37 ],
38 'tileSize': 256
39 };
40 //實例化Map地圖對象
41 var map = new mapboxgl.Map({
42 //地圖容器div的id
43 container: 'map',
44 style: {
45 //設置版本號，一定要設置
46 "version": 8,
47 //添加來源
48 "sources": {
49 "tdtVec": tdtVec,
50 "tdtCva": tdtCva
51 },
52 "layers": [
53 {
54 //圖層id，要保證唯一性
55 "id": "tdtVec",
56 //圖層類型
57 "type": "raster",
58 //數據源
59 "source": "tdtVec",
60 //圖層最小縮放級數
61 "minzoom": 0,
62 //圖層最大縮放級數
63 "maxzoom": 17
64 },
65 {
66 "id": "tdtCva",
67 "type": "raster",
68 "source": "tdtCva",
69 "minzoom": 0,
70 "maxzoom": 17
71 }
72 ],
73 },
74 //地圖中心點
75 center: [113.679943564,22.559617265],
76 //地圖當前縮放級數
77 zoom: 8
78 });
79 //實例化導航控件
80 var nav = new mapboxgl.NavigationControl(
81 {
82 //是否顯示指南針，默認為true
83 "showCompass": true,
84 //是否顯示縮放按鈕，默認為true
85 "showZoom":true
86 }
87 );
88 //添加導航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四種，默認為'top-right'
89 map.addControl(nav, 'top-left');
90 </script>
91 </body>
92 </html>
- 效果圖
