Leaflet学习教程+笔记(Mars2D)_leaflet教程

Leaflet学习(Mars2D)

一 快速开始

中文教程–小白必备

中文API文档–学会查阅文档

准备工作-引入文件

 <link rel="stylesheet" href="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.css" />
 <script src="https://cdn.bootcss.com/leaflet/1.2.0/leaflet.js"></script>
1
2

初始化页面–准备好一个容器

 <div id="mapid"></div>
  * {
      margin: 0;
      padding: 0;
    }

    #mapid {
      height: 100vh;
    }
1
2
3
4
5
6
7
8
9

创建一个地图–两种方式

var map = L.map('mapid').setView([27.550894, 121.529732], 4);   //坐标和缩放尺寸
1

第二种方式

  var map = L.map('mapid', {
    center: [27.550894, 121.529732],
    zoom: 4
  });
1
2
3
4

地图已经出来了,只是还没有皮肤.快给你的地图设置一个瓦片(底图)图层吧 !

L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}").addTo(map);
1

效果已经出来喽 接下来才是重头戏 !

二 开始入门

标注点和线

首先准备好一个地图

 var map = L.map('mapid').setView([31.124451, 113.345322], 9);
    L.tileLayer("http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}").addTo(map);
1
2

让我们标记一个点吧 !

var marker = L.marker([31.5, 113.09]).addTo(map);
1

效果太感动了!

线是由多个坐标连接起来的哟,所以是一个二维数组

	var latlngs = [
      [45.51, -122.68],
      [37.77, -122.43],
      [34.04, -118.2]
    ];
    var polyline = L.polyline(latlngs, {
      color: 'red'
    }).addTo(map);
    
    map.fitBounds(polyline.getBounds());// 缩放地图到折线所在区域
1
2
3
4
5
6
7
8
9
10

圆和多边形

接着我们加一个圆试试

 var circle = L.circle([31, 113], 4000, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);
1
2
3
4
5

啊~~~简单 !

多边形也就是这样而已

var polygon = L.polygon([
    [31.509, 113.08],
    [31, 113.06],
    [31.51, 112]
]).addTo(map);
1
2
3
4
5

so easy !

三 自定义图标标记

想要自定义标记点图片咋整捏?

var greenIcon = L.icon({ //定义了一个图标 greenIcon
      iconUrl: 'http://mars2d.cn/forleaflet/docs/images/leaf-red.png', //图片地址
      shadowUrl: 'http://mars2d.cn/forleaflet/docs/images/leaf-shadow.png', //阴影图片地址
      iconSize: [38, 95], //图片的大小
      shadowSize: [50, 64], //阴影图片大小
      iconAnchor: [22, 94], //图片对齐偏移
      shadowAnchor: [4, 62], //阴影图片对齐偏移
    });		//可以不设置阴影图片和相关属性
1
2
3
4
5
6
7
8

定义好了 ,咱来用他创建个点看看吧

 L.marker([31.5, 113.09], {icon: greenIcon}).addTo(map);  //greenIcon是刚才定义的图标相关属性
1

嘿嘿 , 有点好看唉 !

如果要频繁定义图标的话推荐使用图标类,咋整?

		var LeafIcon = L.Icon.extend({
        options: { //定义了一个图标类
        shadowUrl: 'http://mars2d.cn/forleaflet/docs/images/leaf-shadow.png',
        iconSize: [38, 95],   //注意,这里没设置图片
        shadowSize: [50, 64],
        iconAnchor: [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
      }
1
2
3
4
5
6
7
8
9

定义了类当然还不够 ! 通过new构造实例对象,给上图片 ! 好了,一个图标就定义完成了!

	var greenIcon = new LeafIcon({
      iconUrl: 'http://mars2d.cn/forleaflet/docs/images/leaf-green.png'
    });
    var redIcon = new LeafIcon({
      iconUrl: 'http://mars2d.cn/forleaflet/docs/images/leaf-red.png'
    });
    var orangeIcon = new LeafIcon({
      iconUrl: 'http://mars2d.cn/forleaflet/docs/images/leaf-orange.png'
    });
1
2
3
4
5
6
7
8
9

老规矩了,绘点,给图标,显示在地图上

	L.marker([31.5, 113.09], {		//这里格式有点问题,不碍事,往上翻创建点你们都懂的
      icon: greenIcon	
    }).addTo(map);
    L.marker([31, 113.09], {
      icon: redIcon
    }).addTo(map);
    L.marker([31.5, 112.09], {
      icon: orangeIcon
    }).addTo(map);
1
2
3
4
5
6
7
8
9