leaflet：入门基础（三）之加载数据

前言

    上一篇 leaflet：入门基础（二）  讲了如何加载底图

    这一篇将讲解如何加载自己已有的数据（未更完

 

1：加载Geojson数据

    需要的数据：一个geojson数据（可以是点/线/面

    注：如果手上有shp数据，可以通过https://mapshaper.org/转换得到geojson数据（使用说明[链接]）

var map = new L.Map('map', {
            center: new L.LatLng(39.86,116.45),
            zoom: 10
            });

var baseLayers = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(map);

var geoJSON = { # 填入此处 };

var layerGeo = L.geoJSON(geoJSON, {}).addTo(map);

    如果对数据渲染样式有要求也可以进行修改

var myStyle = {
            "color": "green",
            "weight": 3,
            "opacity": 0.5,

        };

var layerGeo = L.geoJSON( geoJSON, { style:myStyle }).addTo(map);

数据来源： http://datav.aliyun.com/tools/atlas/#&lat=30.733573157600023&lng=103.74938964843748&zoom=9 

 

2：加载矢量切片

    链接：矢量切片(Vector tile)

    LeaFlet加载矢量切片

    GeoServer发布矢量切片及其调用方式(mapbox/leaflet)

    Leaflet 加载Mapbox studio pbf格式矢量切片（一）