zoukankan      html  css  js  c++  java
  • MapBox GL加载天地图以及加载导航控件

    • 加载天地图
     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>
    • 效果图
  • 相关阅读:
    还在使用golang 的map 做Json编码么?
    Golang 性能测试(2) 性能分析
    golang 性能测试 (1) 基准性能测试
    消息队列 NSQ 源码学习笔记 (五)
    消息队列 NSQ 源码学习笔记 (四)
    消息队列 NSQ 源码学习笔记 (三)
    消息队列 NSQ 源码学习笔记 (二)
    消息队列 NSQ 源码学习笔记 (一)
    你不知道的空格
    Supervisor 使用和进阶4 (Event 的使用)
  • 原文地址:https://www.cnblogs.com/webgis-ling/p/11942886.html
Copyright © 2011-2022 走看看