在人口密度可视化的demo
中，我们使用geoJson格式存储这种数据，决定放在后台控制，由请求而来，但碍于接口的开发尚未完成，所以都是演示数据。河南省的数据有意去除，为后来的数据加载填充做铺垫。

中国人口密度可视化项目 预览地址： http://guess.platonic.xyz

webGIS开发，是基于Pc浏览器的网页应用程序，兼容移动端网页的跨平台Web应用程序

在参选框架时，Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。是快速上手并进行开发的很好的工具框架。其api的大类分为以下几个方面：

​ 默认情况下(创建地图实例时我们没有传递任何选项),所有的鼠标及触控交互操作都是可用的,并且包含缩放和属性控制.

　　注意到调用setView方法也会返回地图对象--大多数leaflet方法运行时也一样(不返回一个明确的值时),这使得类似jQuery的方法链十分方便.

　　接下来我们添加一个基本图块到我们的地图上,这样的话它就是一个Mapbox Street的基本图层,创建一个基本图层通常三个方面

1. 包含为图层图像设置[URL模板]

    //在mapbox地图接口   
    mapbox_url:'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',

注册mapbox官网，拿到token后，就能够免费试用。不过免费版有五万次的限制。

1. 属性文本
2. 图层的最大缩放等级。

<link rel="stylesheet" href="./lib/leaflet/leaflet.css">

<script src="./lib/leaflet/leaflet.js"></script>

const mymap = L.map("mapDiv", {
    crs: L.CRS.EPSG3857,
    zoomControl: true,
    minZoom: 1,
    attributionControl: false,
    zoomAnimation: true //缩放是否带动画
}).setView([34.76, 113.65], 5);
let Baselayer = L.tileLayer(urlTemplate.mapbox_url, {
    maxZoom: 18,
    id: 'mapbox.streets',
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
}).addTo(mymap);

在地图的开发中，熟悉文档的过程就是加深对基本要素的理解。

点（Point）
结构： x, y 和 x, y, z
特殊：多点（Multi Point）

线（Line、Polyline）
结构：一串连续的x, y数组（或 x, y, z）
特殊：按顺序连接点，具有方向

面（Polygon）
结构：一串闭合的x, y数组（或x, y, z ）
特殊：闭合（首尾相接），有方向，可能多串（环、洞）

点符号：Point Marker
特征：样式（Style）、大小（Size）、颜色（Color）
样式：抽象符号（圆点、三角形、方块等），图标，闪烁点

线符号（Line Symbol）
特征：样式（Style）、宽度（Width）、颜色（Color）
样式：平滑线、点、破折线等；动画线

面符号（Fill Symbol）
特征：样式（Style）、边线（Outline）、颜色（Color）
样式：纯色填充、渐变色填充、图片填充

当然，在本例中为了渲染图层数据，使用了中国各个省份的地图数据，以geoJson格式存储。以北京市为例,为了在地图上渲染功能，除了存储其必要的经纬信息用来描绘地理信息外，还要增加所要显示的字段。

{
            "type": "Feature",
            "properties": {
                "density":1322.74,
                "adcode": 110000,
                "name": "北京市",
                "center": [116.405285, 39.904989],
                "centroid": [116.41989, 40.189913],
                "childrenNum": 16,
                "level": "province",
                "subFeatureIndex": 0,
                "acroutes": [100000],
                "parent": {
                    "adcode": 100000
                }
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [[117.210024, 40.082262],
                            [117.105315, 40.074479],
                            [117.105315, 40.074479],
                            [117.102851, 40.073563],
                            [117.102235, 40.073105],
                            [117.102235, 40.073105],
                            [117.102851, 40.073563],
                            [116.999989, 40.030053],
                            [116.927924, 40.054788],
                            [116.783794, 40.035093],
                            [116.757925, 39.968176],
                            [116.786874, 39.886963],
                            [116.926076, 39.835524]
                                
                                                ]
                    ]
                ]
            }
        }

coordinates字段的经纬必需事无巨细。画图的精准度由此决定。
以下为leaflet的api开发概览。在后续的学习中可以持续查阅。