MapBox GL加載天地圖以及加載導航控件

時間 2019-11-30
標籤 mapbox 加載地圖以及導航控件简体版
原文原文鏈接
加載天地圖
 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>
效果圖
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。