leaflet.js 官网:https://leafletjs.com/index.html
一个插件:https://github.com/mapbox/mapbox-gl-leaflet
一个对比:OpenLayers/leaflet/Mapbox/AGS等GIS前端总结概述 ziling123
mapbox-gl.js 与 leaflet.js的主要区别
mapbox-gl使用浏览器的WebGL技术,因此它需要足够现代的浏览器并使用更多的客户端计算能力。
优点是它可以原生处理矢量图块并以您喜欢的任何方式渲染(旋转,倾斜,自定义样式等)
Leaflet使用普通格式DOM操作,旨在支持IE8之类的旧浏览器。对于这种旧的浏览器来说,它非常有效,并且由于这种轻量级的计算空间,它还对移动设备友好。
优点是,它使您可以包含基本地图而没有太多开销。
Leaflet可能涵盖了大多数基本用法,可能还包含一些插件。缺点是它主要支持栅格图块,因此必须在服务器端进行渲染(mapbox提供此类服务)。
简单用一下 leaflet.js
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<style>
#mapDiv { height: 1000px; }
</style>
<!-- 创建一个 地图的div id 必须有 但是自定义 -->
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
//初始化 地图
var leafletMap = L.map('mapDiv').setView([41, 123], 5);
//将图层加载到地图上,并设置最大的聚焦还有map样式
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png128?access_token=pk.eyJ1IjoiYWdhbmxpYW5nIiwiYSI6ImNrYndkZ2dqdzBldzQycmxna3RrZ3ZrMDIifQ.mMruQKqeJPDcqpV7HEFSLA', {
maxZoom: 18,
//id: 'mapbox.mapbox-streets-v8',
id:'mapbox.satellite',
//style:'mapbox://styles/mapbox/streets-v11'
}).addTo(leafletMap);
//增加一个marker ,地图上的标记,并绑定了一个popup,默认打开
L.marker([41, 123]).addTo(leafletMap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
//增加一个圈,设置圆心、半径、样式
L.circle([41, 123], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(leafletMap).bindPopup("I am a circle.");
//增加多边形
L.polygon([
[41, 123],
[39, 121],
[41, 126]
]).addTo(leafletMap).bindPopup("I am a polygon.");
//为点击地图的事件 增加popup
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(leafletMap);
}
leafletMap.on('click', onMapClick);