mapbox初步使用

.何以歌

已于 2023-03-23 10:07:33 修改

阅读量1.8k

点赞数

分类专栏：笔记文章标签： html css html5

于 2021-09-28 12:08:08 首次发布

本文链接：https://blog.csdn.net/qq_45954781/article/details/120526575

版权

本文介绍了Mapbox的基本使用，包括如何在HTML中集成Mapbox地图服务，利用CSS进行样式定制，以及HTML5的相关应用。通过学习，读者可以掌握Mapbox在网页开发中的基础操作。

摘要由CSDN通过智能技术生成

mapbox初步使用

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>改变一个地图的样式</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js"></script>
  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css'
    type='text/css' />
  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'>
  </script>
  <link rel='stylesheet'
    href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css'
    type='text/css' />
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/turf.min.js"></script>

  <style>
    body {
     
      margin: 0;
      padding: 0;
    }

    #map {
     
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .geocoder {
     
      position: absolute;
      z-index: 1;
      width: 50%;
      left: 50%;
      margin-left: -25%;
      top: 20px;
    }

    .mapboxgl-ctrl-geocoder {
     
      min-width: 100%;
    }

    .marker {
     
      background-image: url('./img/water.png');
      background-size: cover;
      width: 30px;
      height: 36px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <style>
    #menu {
     
      position: absolute;
      background: #fff;
      padding: 10px;
      font-family: 'Open Sans', sans-serif;
    }

    #sourse {
     
      position: absolute;
      bottom: 200px;
      background: #fff;
      padding: 10px;
      font-family: 'Open Sans', sans-serif;
    }
  </style>

  <style>
    .measure-result {
     
      background-color: white;
      border-radius: 3px;
      height: 16px;
      line-height: 16px;
      padding: 0 3px;
      font-size: 12px;
      box-shadow: 0 0 0 1px #ccc;
    }

    .close {
     
      cursor: pointer;
      width: 14px;
      height: 14px;
      line-height: 16px;
      text-align: center;
      padding: 0;
    }
  </style>

  <div id='map'></div>
  <div id="geocoder" class="geocoder"></div>
  <div id='menu'>
    <input id='streets-v11' type='radio' name='rtoggle' value='streets'>
    <label for='streets'>街道</label>
    <input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
    <label for='satellite'>卫星</label>
    <input id='3d' type='radio' name='rtoggle' value='3d' checked='checked'>
    <label for='3d'>3D</label>
  </div>

  <div id="sourse">
    <input type="checkbox" name="" id="Water"> 水源
    <input type="checkbox" name="" id="Area"> 区域
    <input type="checkbox" name="" id="Section"> 切片
    <input type="button" name="" value="测距" onclick="measureLength()">
    <input type="button" name="" value="测面" onclick="measureArea()">
  </div>
  <script>
    mapboxgl.accessToken = '申请你的key';
    // 创建地图
    var map = new mapboxgl.Map({
     
      container: 'map',
      // style: 'mapbox://styles/mapbox/satellite-v9',
      zoom: 13,
      center: [122.027913, 37.428458],
      pitch: 85, // pitch in degrees
      bearing: 25, // bearing in degrees
      style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y',

    });

    // 添加选择地图控件
    var layerList = document.getElementB