准备条件

1、mapbox-gl.js mapbox-gl.css

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

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一样控制glMap

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

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的矢量数据的更多相关文章

  1. openlayers渲染mapbox gl的vector tile

    准备条件 https://openlayers.org/en/v4.6.5/build/ol.js https://cdn.polyfill.io/v2/polyfill.min.js DEMO &l ...

  2. mapbox.gl源码解析——基本架构与数据渲染流程

    加载地图 Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图.WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交互以 ...

  3. 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们 ...

  4. mapbox.gl文字标注算法基本介绍

    Well-placed labels can be the difference between a sloppy map and a beautiful one. Labels need to cl ...

  5. 开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门

    1.简介 mapbox是一家非常牛的公司,比如像特斯拉.DJI大疆创新.孤独星球.Airbnb.GitHub.Cisco.Snap.飞猪.Keep.Bosch这些在国内外各自领域中响当当的企业都是它的 ...

  6. leaflet地图库

    an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...

  7. Cocos2dx开发之运行与渲染流程分析

    学习Cocos2dx,我们都知道程序是由 AppDelegate 的方法 applicationDidFinishLaunching 开始,在其中做些必要的初始化,并创建运行第一个 CCScene 即 ...

  8. Flutter资源

    目录 文章 一开始 HOWTO文档 网站/博客 高级 视频 组件 演示 UI 材料设计 图片 地图 图表 导航 验证 文字和富文本 分析.流量统计 自动构建 风格样式 媒体 音频 视频 语音 存储 获 ...

  9. iOS 资源大全

    这是个精心编排的列表,它包含了优秀的 iOS 框架.库.教程.XCode 插件.组件等等. 这个列表分为以下几个部分:框架( Frameworks ).组件( Components ).测试( Tes ...

随机推荐

  1. HDU - 2181 dfs [kuangbin带你飞]专题二

    保存每个节点的下一个节点一直往下面走就行了,不能重复经过某个点,当经过的点达到20个而且当前节点的下一个节点是起点就打印答案. AC代码 #include<cstdio> #include ...

  2. clearstatcache

    clearstatcache clearstatcache — 清除文件状态缓存 void clearstatcache ([ bool $clear_realpath_cache = false [ ...

  3. 基于Python的Flask的开发实战（第一节Flask安装）

    1.安装python虚拟环境 easy_install virtualenv easy_install pip cd /home/admin virtualenv flask-website sour ...

  4. Luogu P2888 [USACO07NOV]牛栏Cow Hurdles

    题目描述 Farmer John wants the cows to prepare for the county jumping competition, so Bessie and the gan ...

  5. Phpstrom操作Git从服务器端克隆代码到本地

    1.第一步点开Git 2.添加项目的路径 第一个框是你所在的项目路径,后缀名是.git,这里我用的是HTTPS的方式(还有一种是SSH) 第二是你要克隆到所在目录,我的是在Apache下面的htdoc ...

  6. REALTEK 刷机方法 法

    REALTEK 是通用板最多的IC 方案之一,什么常说的2025 2270 2023 2033 2525 2545 2660 2280 2662 2670 2672 2674  2661  2668 ...

  7. java中的mvc和三层结构究竟是什么关系

    一件事,要知其然往往很简单,要知其所以然通常不是那么容易,就如最近重新巩固spring的过程中,就觉得还有许多问题其实并不是十分明了. 屈指一算,手头上做过的正式项目也有了四五六七个了,不管用的数据库 ...

  8. AVS、MPEG-2、H264标准文档

    联合信源对AVS解码源码和相应的AVS码流.AVS码流太大,可以从http://cosoft.org.cn/projects/avsdec下载.解压avsdec_source.zip后,用VC6编译a ...

  9. PCI、CPCI、CPCIE 区别、特点

    PCI.CPCI.CPCIE 区别.特点 CPCI总线 •PCI总线作为处理器系统的局部总线,主要目的是为了连接外部设备,而不是作为处理器的系统总线连接Cache和主存储器 •(1) PCI总线空间与 ...

  10. JLINK（SEGGER）灯不亮 USB不识别固件修复、clone修改

    今天调SMT32插拔几下,JLINK竟然挂掉了网上找了这个教程,搞了半天才搞好,驱动没装好!WIN7系统,自动安装的驱动是GPS.COM10,郁闷,错误来的.应该是:atm6124.sys.要手动选择 ...