Leaflet开发纪实录

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

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

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

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

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

Leaflet API 0.png
Leaflet API 0.png

快速开始:在页面引入必要的cssjs文件,使用setView方法

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

  注意到调用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开发概览。在后续的学习中可以持续查阅。

leaflet的api文档概览
leaflet的api文档概览

添加新评论