麻辣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

麻辣GIS-Sailor

作者:

GIS爱好者,学GIS,更爱玩GIS。

声明

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

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

手机阅读
微信打赏
支付宝打赏
手机阅读
麻辣GIS微信打赏
请小编吃包辣条
麻辣GIS支付宝打赏
请小编吃支雪糕
没有上文

已有 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数据啊

留言板(小编看到第一时间回复)