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屬性

效果圖