Leaflet学习笔记：（一）开始一个地图demo

最新推荐文章于 2023-02-28 19:00:00 发布

harmsworth2016

最新推荐文章于 2023-02-28 19:00:00 发布

阅读量374

点赞数

分类专栏：地图文章标签： leaflet教程 leaflet笔记

本文链接：https://blog.csdn.net/harmsworth2016/article/details/109952985

版权

地图专栏收录该内容

0 篇文章 0 订阅

订阅专栏

开始一个地图demo

前言
步骤
- 注册 mapbox 账号
快速开始一个 demo

前言

今天重新拿起 Leaflet 继续地图之旅。按照官网的 demo 做地图

步骤

注册 mapbox 账号

Leaflet 地图需要用到 mapbox 瓦片图，需要注册账号，添加授权 token。
在这里插入图片描述

快速开始一个 demo

quick-start
在这里插入图片描述
添加授权token

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
   <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
  <style>
    #mapid {
      width: 600px;
      height: 400px;
      position: relative;
    }
  </style>
  <title>Quick Start - Leaflet</title>
</head>
<body>
  <div id="mapid"></div>
  <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'your.mapbox.access.token'
    }).addTo(mymap);
    // 添加标记
    var marker = L.marker([51.5, -0.09]).addTo(mymap);
    // 添加圆
    var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).addTo(mymap);
    // 添加多边形
    var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(mymap);
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
    circle.bindPopup("I am a circle.");
    polygon.bindPopup("I am a polygon.");
    // 单独添加一个弹窗，弹窗是在点击地图其他地方后自动关闭
    var popup = L.popup()
    .setLatLng([51.490, -0.11])
    .setContent("I am a standalone popup.")
    .openOn(mymap);
    // 添加事件
    // function onMapClick(e) {
    //   console.warn(e);
    //   alert("You clicked the map at " + e.latlng);
    // }
    // mymap.on('click', onMapClick);
    function onMapClick(e) {
        popup.setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(mymap);
    }

    mymap.on('click', onMapClick);
  </script>
</body>
</html>

harmsworth2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Leaflet学习笔记：（一）开始一个地图demo

开始一个地图demo前言步骤注册 `mapbox` 账号快速开始一个 [demo](https://leafletjs.com/examples/quick-start/)前言今天重新拿起 Leaflet 继续地图之旅。按照官网的 demo 做地图步骤注册 mapbox 账号Leaflet 地图需要用到 mapbox 瓦片图，需要注册账号，添加授权 token。快速开始一个 demo添加授权token<!DOCTYPE html><html lang="en"&g
复制链接

扫一扫