Leaflet系列:加载GeoJSON数据

简介: Leaflet如何加载GeoJSON数据

Leaflet是适用于桌面端和移动端交互地图的开源JavaScript类库。JS库的大小经过压缩后有38k左右,拥有开发者需要的全部地图功能。

Leaflet保持着简单、性能和实用性的设计思想。可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮、易用和文档清晰的API,有一个简单、易读的源代码

Leaflet可以通过加载GeoJSON数据,批量加载点、线、面数据,并转化为相应的特征对象,实现数据显示,弹出数据信息管理。

下边通过一个GeoJSON加载点数据,显示为图标进行说明:

//循环遍历每一个feature,绑定弹出气泡和提示信息

function onEachFeature(feature, layer) {

        if(feature.properties && feature.properties.name) {

            layer.bindTooltip(feature.properties.name);

            layer.bindPopup(feature.properties.address);

        }

    }

//设置图标样式

var baseballIcon = L.icon({

    iconUrl: 'img/leaflet/school_icon.png',

    iconSize: [24, 27],

    iconAnchor: [12, 27],

    popupAnchor: [0, -28],

    tooltipAnchor: [0, -20]

    });

//加载json数据

    $.getJSON('sampledata/ta_school_point.json', function(data) {

//通过geojson创建图层

    schoollayer =

    L.geoJSON(data, {

        onEachFeature: onEachFeature,

           //循环设置图标样式

        pointToLayer: function(feature, latlng) {

        return L.marker(latlng, {

            icon: baseballIcon

            });

            }

            });

          //添加到地图,并定位

        schoollayer.addTo(map);

        map.fitBounds(schoollayer.getBounds());

       });

image.png

相关文章
|
4月前
|
JSON 定位技术 API
谷歌地图接口Google Maps APIs中地图样式设计配置调整与JSON或URL导出
谷歌地图接口Google Maps APIs中地图样式设计配置调整与JSON或URL导出
|
5月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
49 0
|
5月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为数组)
ECharts折线图渲染json格式数据(格式为数组)
44 0
|
5月前
|
前端开发
ajax+json实现echarts多个统计图显示
ajax+json实现echarts多个统计图显示
22 0
|
5月前
|
JSON 数据格式
ECharts加载json数据解决方案
ECharts加载json数据解决方案
38 0
|
5月前
VsCode预览Geojson数据
VsCode预览Geojson数据
|
6月前
262Echarts - 3D 路径图(Flights on Geo3D)
262Echarts - 3D 路径图(Flights on Geo3D)
23 0
|
6月前
|
JSON JavaScript 前端开发
13jqGrid - 加载JSON数据
13jqGrid - 加载JSON数据
27 0
|
9月前
|
JavaScript 数据可视化 定位技术
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
Echarts实战案例代码(11):利用geojson数据地图map组件生成js本地版直接访问的解决方案
274 0
|
9月前
|
SQL JSON 前端开发
漏刻有时API接口实战开发系列(8):ajax获取本地json实现echarts不同数据图表渲染的解决方案
漏刻有时API接口实战开发系列(8):ajax获取本地json实现echarts不同数据图表渲染的解决方案
65 0