1、mapbox-gl.js mapbox-gl.css
2、leaflet-mapbox-gl.js
https://github.com/mapbox/mapbox-gl-leaflet
<!DOCTYPE html>
<title>WebGL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
</style>
<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<!-- Mapbox GL -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css" rel='stylesheet' />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js"></script>
</head>
<div id="map"></div>
<script src="./leaflet-mapbox-gl.js"></script>
<script>
var map = L.map('map',{rotate:true,touchRotate:true}).setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
.bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
.addTo(map)
.openPopup();
var gl = L.mapboxGL({
accessToken: 'no-token',
style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json'
}).addTo(map);
map.on('contextmenu',function(e){
map.on('drag',function(e1){
console.log(e1)
</script>
</body>
</html>
设置控制mapbox gl属性
默认情况下leaflet-mapbox-gl封装了mapbox-gl的属性和事件控制，我在原来的基础上，修改了源码，通过L.glMap可以像控制mapbox-gl一样控制glMap
另外参考https://www.cnblogs.com/shitao/p/3566598.html监控leaflet事件，可以扩展事件和效果
EventData描述
click
MouseEvent
用户点击或触摸地图时触发.
dblclick
MouseEvent
用户双击或连续两次触摸地图时触发.
mousedown
MouseEvent
用户按下鼠标按键时触发.
mouseup
MouseEvent
用户按下鼠标按键时触发.
mouseover
MouseEvent
鼠标进入地图时触发.
mouseout
MouseEvent
鼠标离开地图时触发.
mousemove
MouseEvent
鼠标在地图上移动时触发.
contextmenu
MouseEvent
当用户在地图上按下鼠标右键时触发，如果有监听器在监听这个时间，则浏览器默认的情景菜单被禁用.
focus
Event
当用户在地图上进行标引、点击或移动时进行聚焦.
Event
当地图失去焦点时触发.
preclick
MouseEvent
当鼠标在地图上点击之前触发。有时会在点击鼠标时，并在已存在的点击事件开始处理之前想要某件事情发生时用得到.
Event
当地图初始化时触发。（当地图的中心点和缩放初次设置时）.
unload
Event
Fired when the map is destroyed with
remove
method.
viewreset
Event
当地图需要重绘内容时触发。（通常在地图缩放和载入时发生）这对于创建用户自定义的叠置图层非常有用.
movestart
Event
地图视图开始改变时触发。（比如用户开始拖动地图）.
Event
所有的地图视图移动时触发.
moveend
Event
当地图视图结束改变时触发。（比如用户停止拖动地图）.
dragstart
Event
用户开始拖动地图时触发.
Event
用户拖动地图时不断重复地触发.
dragend
Event
用户停止拖动时触发.
zoomstart
Event
当地图缩放即将发生时触发。（比如缩放动作开始前）.
zoomend
Event
当地图缩放时触发.
zoomlevelschange
Event
Fired when the number of zoomlevels on the map is changed due to adding or removing a layer.
resize
ResizeEvent
Fired when the map is resized.
autopanstart
Event
打开弹出窗口时地图开始自动平移时触发.
layeradd
LayerEvent
当一个新的图层添加到地图上时触发.
layerremove
LayerEvent
当一些图层从地图上移除时触发.
baselayerchange
LayerEvent
当通过
layer control
改变基础图层时触发.
overlayadd
LayerEvent
Fired when an overlay is selected through the
layer control
.
overlayremove
LayerEvent
Fired when an overlay is deselected through the
layer control
.
locationfound
LocationEvent
当地理寻址成功时触发（使用
locate
方法）
locationerror
ErrorEvent
当地理寻址错误时触发（使用
locate
方法）
popupopen
PopupEvent
当弹出框打开时触发（使用
openPopup
方法）
popupclose
PopupEvent
当弹出框关闭时触发（使用
closePopup
方法）
