准备条件

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. basler 相机拍照简单类综合Emgu.CV---得到图档

    在网上找了半天都是下载要钱,自己试做了,经测试能ok,一起分享吧.给初学的人一点鼓励. using System;using System.Collections.Generic;using Syst ...

  2. CodeForces-749A

    要求组成n的素数最多,根据n的奇偶讨论:如果n是偶数,直接打印n/2个数字'2'就可以了:如果n是基数,则先打印一个'3',再打印(n-3)/2个数字'2'就可以了. AC代码: #include&l ...

  3. 关于xlrd处理合并单元格

    先埋个雷, 最近在做通过excel读取接口测试用例~ 流程等都是自己制定的,打算做完了之后放到GitHub上去哈哈哈. 正式进入正题~ 在写这个框架的时候,遇到了一个问题,就是同一个接口,需要为他准备 ...

  4. ubuntu14.04 安装redis 2.8.9

    ubuntu14.04安装前准备工作,为了保证安装顺利,请先执行apt-get update 然后安装make 和gcc(已安装的可忽略) apt-get install make apt-get i ...

  5. React是什么，为什么要使用它？

    React是Facrbook内部的一个JavaScript类库,已于1年开源,可用于创建Web用户交互界面.它引入了一种新的方式来处理浏览器DOM.那些需要手动更新DOM.费力地记录每一个状态的日子一 ...

  6. Redis Cluster的搭建与部署，实现redis的分布式方案

    前言 上篇Redis Sentinel安装与部署,实现redis的高可用实现了redis的高可用,针对的主要是master宕机的情况,我们发现所有节点的数据都是一样的,那么一旦数据量过大,redi也会 ...

  7. vue项目中对axios的二次封装

    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...

  8. 【转载】Ubuntu环境下安装QT（转）

    Ubuntu 安装 Qt 开发环境 简单实现是本文要介绍的内容,内容很短,取其精华,详细介绍Qt 类库的说明,先来看内容. 一.Ubuntu下安装Qt $ sudo apt-get install q ...

  9. 基于Jenkins+Git+Gradle的Android持续集成

    本文参考了: http://my.oschina.net/uboluo/blog/157483 http://java.dzone.com/articles/automating-continuous ...

  10. 【转载】使用SDL播放YUV图像数据（转）

    SDL提供了针对YUV格式数据的直接写屏操作.废话不多说,直接上代码吧/** * file showyuv.c * author: rare * date: 2009/12/06 * email: d ...