leaflet.js 简单使用

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

//初始化 地图
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("Hello world!
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);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！