准备条件

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. 老男孩Python全栈开发（92天全）视频教程 自学笔记09

    day9课程内容: 乌班图(ubuntu)64位系统 和 VMware 虚拟机安装(官网收费又麻烦,在网上找资源 安装vmware: vm运行(秘钥找度娘)--文件--新建虚拟机--自定义 下一步-- ...

  2. uva10410 栈

    根据DFS和BFS重建树. BFS反映了当前节点到达根结点的距离,通过栈把当前处理的树或则子树的根结点放在栈顶,通过遍历DFS序列,判断当前元素与栈顶元素的关系,如果是子节点,就将它压入栈中成为新的栈 ...

  3. Linux的内核和权限

    1.内核包括的子系统是 : 进程管理系统 . 内存管理系统 . I/O管理系统 和文件管理系统  等四个子系统. 2.Linux系统中某个可执行文件属于root并且有setid,当一个普通用户 mik ...

  4. easywechat之微信支付--在thinkPHP5中的使用

    1. 准备工作 1.1 easywechat 安装完成 未安装移步至 -> http://www.cnblogs.com/flyphper/p/8484600.html 1.2 确定支付相关的配 ...

  5. [php] in_array 判断问题（坑）

    <?php $arr = array("Linux"); if (in_array(0, $arr)) { echo "match"; } ?> 执 ...

  6. MAC地址表配置与绑定

    MAC地址表分类 ---静态MAC地址表项由用户手工配置,表项不老化: ---黑洞MAC地址表项包括源黑洞MAC地址表项和目的黑洞MAC地址表项,用于丢弃含有特定源MAC地址或目的MAC地址的报文(例 ...

  7. 跨域问题jsonp

    不得不说的同源政策: 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指域名,协议,端口相同.当一个浏览器的两个tab页 ...

  8. 利用 xrandr 命令修改屏幕分辨率

    问题背景 电脑外接着一个 23' 的显示器,分辨率为 1920*1080. 操作系统:ubuntu 14.04 今天,通过 Setting->Displays 中选择外接屏的分辨率时,发现最大只 ...

  9. R语言︱异常值检验、离群点分析、异常值处理

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 笔者寄语:异常值处理一般分为以下几个步骤:异常 ...

  10. [php] php操作xml

    xml文件 <?xml version="1.0" encoding="ISO-8859-1"?> <root> <item id ...