ShiningDan的博客

leaflet 入门

发表于 | 分类于 | | 阅读次数

leaflet是领先的开源JavaScript库为移动设备设计的互动地图，下面介绍的是我的 leaflet 学习笔记

开始使用 Leaflet

GeoJSON 介绍

GeoJSON是一种地理数据的描述格式。GeoJSON可以描述的对象包括：几何体，要素和要素集

这里几何体(Geometry)的类型有我们熟悉的点(Point),线(LineString),面(Polygon), 多点(MultiPoint),多线(MultiLineString),多面( MultiPolygon)和几何体集合(GeometryCollection)。

要素(Feature)包含了几何体信息以及附加的一些属性信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
   "type": "FeatureCollection",
   "features": [{
       "type": "Feature",
       "geometry": {
           "type": "Point",
           "coordinates": [102.0, 0.5]
       },
       "properties": {
           "prop0": "value0"
       }
   }, {
       "type": "Feature",
       "geometry": {
           "type": "LineString",
           "coordinates": [
               [102.0, 0.0],
               [103.0, 1.0],
               [104.0, 0.0],
               [105.0, 1.0]
           ]
       },
       "properties": {
           "prop0": "value0",
           "prop1": 0.0
       }
   }, {
       "type": "Feature",
       "geometry": {
           "type": "Polygon",
           "coordinates": [
               [
                   [100.0, 0.0],
                   [101.0, 0.0],
                   [101.0, 1.0],
                   [100.0, 1.0],
                   [100.0, 0.0]
               ]
           ]
       },
       "properties": {
           "prop0": "value0",
           "prop1": {
               "this": "that"
           }
       }
   }]
}

Using GeoJSON with Leaflet

Using GeoJSON with Leaflet

介绍的是如何在 Leaflet 中添加 GeoJSON 部分，以及如何对 GeoJSON 部分绘制的地图进行部分定制化。

绘制带有交互的等值线地图

Interactive Choropleth Map

这个是一个官网的教程，介绍如何对地图进行功能拓展，绘制带有交互性质的等值线地图。