gis信息可视化之一Leaflet组件介绍

二维地理信息可视化是展示平面世界的基础，本文将将介绍开源界中的轻量级可视化基础框架Leaflet，介绍其主要功能以及如何使用，最后给出一个简单演示实例。

一、Leaflet是什么？

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

以上信息简单归纳是三点：1 leaflet是对手机端地图展示友好的开源的轻量级javascript库。2 leaflet的跨终端支持良好，扩展性强 3 简单易上手，代码开源。

二、Leaflet 框架组成

三、简单展示

提前准备的资源:如果是在线地图，需要按照在线地图规范进行引用，也可以自己下载谷歌等影像底图加载，leaflet.js

<!DOCTYPE html>
<html>
<head>
	<title>墨卡托投影</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
	<link rel="stylesheet" href="/2d/leaflet/leaflet.css" />
    <script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 600px;"></div>
<script>
	var mymap = L.map('mapid').setView([29.052934, 104.0625], 5);

	L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {
		maxZoom: 16,
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		id: 'mapbox/streets-v11',
		crs:L.CRS.EPSG3857,
		tileSize: 512,
		zoomOffset: -1
	}).addTo(mymap);

	L.marker([22.024546, 110.654297]).addTo(mymap)
		.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

	L.circle([29.649869, 120.146484], 99000, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.5
	}).addTo(mymap).bindPopup("我是一个圆.");

	L.polygon([
		[32.916485, 101.601563],
		[30.562261, 105.556641],
		[34.524661, 108.149414]
	]).addTo(mymap).bindPopup("我是一个多边形.");

	var popup = L.popup();

	function onMapClick(e) {
		popup.setLatLng(e.latlng)
			.setContent("当前坐标为:" + e.latlng.toString())
			.openOn(mymap);
	}

	mymap.on('click', onMapClick);

</script>

</body>
</html>

四、总结

本文简单介绍了如何使用leaflet进行gis信息展示，默认采用墨卡托投影方式，同时简要介绍了leaflet的主要api，希望对您有帮助。

gis信息可视化之一Leaflet组件介绍

Guess you like