Leaflet笔记(1)最简单的入门程序——显示地图

本文目录
  • 正文

本文实现Leaflet的最基本的功能,在web中加载地图。实现步骤如下:

1.引入Leaflet文件

<head>中加入如下代码:

<link rel="stylesheet" href="./static/css/leaflet.css">
<script src="./static/js/leaflet.js"></script>

2.创建地图显示div

<body>中加入如下代码:

<div id="map-container"></div>

需要给这个div外加一个样式

<style>
  #map-container {
    width: 600px;
    height: 400px;
  }
</style>

3.显示地图

<script>中加入如下代码:

var m = L.map('map-container').setView([36.52,120.31], 7);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(m);

4.浏览器打开

效果如图:

说明

上述加载的是Mapobx的图层,关于MapBox的内容会在后文中继续介绍。

所有代码

leafletjs/note-1.html at master · sailor103/leafletjs

没有上文

如您有疑问,可在文末留言,或到QQ群提问。

本站QQ群:291616564 麻辣GIS

微信公众号:malagis,扫描右边二维码直接关注。

微信捐助麻辣GIS 支付宝捐助麻辣GIS

如果本文对您有所帮助,欢迎对我们团队进行打赏捐助,让我们在传播3S的路上可以走得更远。


作者:,GIS爱好者。
分享本文,请您带上本文链接

已有 3 条评论

  1. 黑夜无痕free
    1#
    黑夜无痕free  · 2017-08-23 09:49

    为什么浏览器中显示不了地图?

      1. Sailor
        Sailor  · 2017-08-23 10:04

        F12一下看看有没有报错?

          1. 黑夜无痕free
            黑夜无痕free  · 2017-08-23 11:02

            解决啦 谢谢啦

发表评论