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

<!DOCTYPE html>
<html> 
<head lang="en"> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/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);

leaflet.js 简单使用

猜你喜欢