准备条件

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. cmd命令报4048错误

    解决方法: win10系统:快捷键win+x,找到命令提示符(管理员),打开再下载相应的依赖包. win7/8:打开开始,输入命令提示符,找到管理员权限的命令提示符,打开再下载相应的依赖包. 提示:如 ...

  2. NOIP2017记

    Day-1~Day0 帮忙布置考场,打印座位表耗掉了不少XFZ的白纸(被瞪了一眼),围着三四楼跑了不知道多少圈贴座位表,跑到绝望...... 然后试了一下机,性能还可以,但是大佬用的机的cpu都不是很 ...

  3. Spring 代理对象,cglib,jdk的问题思考,AOP 配置注解拦截 的一些问题.为什么不要注解在接口,以及抽象方法.

    可以被继承 首先注解在类上是可以被继承的 在注解上用@Inherited /** * Created by laizhenwei on 17:49 2017-10-14 */ @Target({Ele ...

  4. WinSock WSAEventSelect 模型总结

    前言 本文配套代码:https://github.com/TTGuoying/WSAEventSelect-model 由于篇幅原因,本文假设你已经熟悉了利用Socket进行TCP/IP编程的基本原理 ...

  5. WEB 小案例 -- 网上书城（二）

    寒假结束了,自己的颓废时间同样结束了,早该继续写博客了,尽管我的格式以及内容由于各种原因老被卡,但必须坚持写下去!!! 上次我们对于本案例的数据库部分进行了阐述,这次主要接着上次的内容分享本案例的翻页 ...

  6. Android应用Home键后Launcher重复启动问题

    通过系统方式(系统安装器)安装应用,点击"打开"按钮,进入应用主界面,按home键后,点击应用图标进入,应用会出现重新启动.当完全退出应用后,再通过启动图标进入应用,便不会出现重复 ...

  7. 安装sphinx和coreseek

    sphinx简介 Sphinx是由俄罗斯人Andrew Aksyonoff开发的一个全文检索引擎.意图为其他应用提供高速.低空间占用.高结果 相关度的全文搜索功能.Sphinx可以非常容易的与SQL数 ...

  8. VxWorks 基本启动方式

    VxWorks 基本启动方式     按VxWorks内核的下载形式,VxWorks启动总体上分为两种方式:下载型和ROM 型.     @下载型启动方式:bootrom+VxWorks.此时boot ...

  9. HTML5中的输入框

    HTML5中的输入框 1.双引号 <input type="text"/> 2.单引号 <input type='text'/> 3.无引号 <inp ...

  10. Docker 小记 — Compose & Swarm

    前言 任何相对完整的应用服务都不可能是由单一的程序来完成支持,计划使用 Docker 来部署的服务更是如此.大型服务需要进行拆分,形成微服务集群方能增强其稳定性和可维护性.本篇随笔将对 Docker ...