准备条件

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. Qt 信号如何自动连接槽函数?

    on_objectName_signal [static] void QMetaObject::connectSlotsByName(QObject *object) void on_<obje ...

  2. python>oop

    oop即Object Oriented programming,面向对象编程 何为编程:特定的语法+数据结构+算法 编程范式就是从经验中总结的套路: 面向过程编程 适用于简单的脚本,一次任务是极好的, ...

  3. webpack入门宝典

    前提摘要 本文是经过二天自己学习总结出来的一些心得,本文是在最新版的webpack4x的基础上进行配置的(听说webpack4x比以往改变都很大有些插件可能有问题).如果你以前没怎么接触过Webpac ...

  4. 使用poi和jfreechart生成excel图表图片

    最近项目在频繁的操作excel,里边涉及到很多和图表有关的东西.有时候需要使用java操作excel自带的图标,比较复杂的我们都是使用excel模板的形式实现. 除此之外,也有一些功能只需要生成对应的 ...

  5. Android项目中的各个模块框架设计

    作为Android开发,现对项目开发中的各个模块搭建,梳理如下: Android UI框架,开发人员需要达到专家级 网络框架 浏览框架 图片加载框架 图片裁剪压缩工具类 客户端并发框架 线程池设计 ( ...

  6. linux命令--ldconfig和ldd用法

    一.ldconfig ldconfig是一个动态链接库管理命令,为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfig. ldconfig 命令的用途,主要是在默认搜寻目录(/ ...

  7. Flex中的FusionCharts 四图监听

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  8. 芝麻HTTP：TensorFlow基础入门

    本篇内容基于 Python3 TensorFlow 1.4 版本. 本节内容 本节通过最简单的示例 -- 平面拟合来说明 TensorFlow 的基本用法. 构造数据 TensorFlow 的引入方式 ...

  9. hdu5904 LCIS

    这题惩罚我这种经常不管常数的懒人 直接 1e6 TLE 如果1e5对数组枚举过 诶其实很想吐槽些伤心事,但是还是不想在博客上吐口水 不管今年比赛结果如何 请享受比赛 #include<bits/ ...

  10. sql数据库设置自定义消息

    第一步 EXEC sp_addmessage   @msgnum =   50005 ,   @severity =   10 ,   @msgtext =   '更新失败'        ,  @l ...