麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

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

没有上文

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

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

本站QQ群(一):291616564 加入QQ群

本站QQ群(二):166408035 加入QQ群

本站QQ群(三):627853279 加入QQ群

本站QQ群(四):436386604 加入QQ群

本站QQ群(五):606176554 加入QQ群

本站QQ群(六):946178380 加入QQ群

本站QQ群(七):861271808 加入QQ群

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

已有 5 条评论

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

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

      1. 麻辣GIS-Sailor
        Sailor  · 2017-08-23 10:04

        F12一下看看有没有报错?

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

            解决啦 谢谢啦

              1. 麻辣GIS-藏
                 · 2018-09-06 16:19

                怎么解决的?

                  1. 麻辣GIS-fengye
                    fengye  · 2018-10-17 10:03

                    并不能返回json数据啊

发表评论