leaflet渲染mapbox gl的矢量数据

准备条件

一、mapbox-gl.js mapbox-gl.csscss

二、leaflet-mapbox-gl.js https://github.com/mapbox/mapbox-gl-leaflethtml

demo

<!DOCTYPE html>
<html>
<head>
    <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>

<body>
<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同样控制glMapgit

另外参考https://www.cnblogs.com/shitao/p/3566598.html监控leaflet事件，能够扩展事件和效果github

Event	Data	描述
`click`	`MouseEvent`	用户点击或触摸地图时触发.
`dblclick`	`MouseEvent`	用户双击或连续两次触摸地图时触发.
`mousedown`	`MouseEvent`	用户按下鼠标按键时触发.
`mouseup`	`MouseEvent`	用户按下鼠标按键时触发.
`mouseover`	`MouseEvent`	鼠标进入地图时触发.
`mouseout`	`MouseEvent`	鼠标离开地图时触发.
`mousemove`	`MouseEvent`	鼠标在地图上移动时触发.
`contextmenu`	`MouseEvent`	当用户在地图上按下鼠标右键时触发，若是有监听器在监听这个时间，则浏览器默认的情景菜单被禁用.
`focus`	`Event`	当用户在地图上进行标引、点击或移动时进行聚焦.
`blur`	`Event`	当地图失去焦点时触发.
`preclick`	`MouseEvent`	当鼠标在地图上点击以前触发。有时会在点击鼠标时，并在已存在的点击事件开始处理以前想要某件事情发生时用获得.
`load`	`Event`	当地图初始化时触发。（当地图的中心点和缩放初次设置时）.
`unload`	`Event`	Fired when the map is destroyed with remove method.
`viewreset`	`Event`	当地图须要重绘内容时触发。（一般在地图缩放和载入时发生）这对于建立用户自定义的叠置图层很是有用.
`movestart`	`Event`	地图视图开始改变时触发。（好比用户开始拖动地图）.
`move`	`Event`	全部的地图视图移动时触发.
`moveend`	`Event`	当地图视图结束改变时触发。（好比用户中止拖动地图）.
`dragstart`	`Event`	用户开始拖动地图时触发.
`drag`	`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`方法）

leaflet渲染mapbox gl的矢量数据

准备条件

demo

设置控制mapbox gl属性

效果图