准备条件

https://openlayers.org/en/v4.6.5/build/ol.js

https://cdn.polyfill.io/v2/polyfill.min.js

DEMO

<!DOCTYPE html>

<html>

<head>

<title>Mapbox Vector Tiles</title>

<link rel="stylesheet"

    href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">

<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->

<script

    src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

<script

    src="https://openlayers.org/en/v4.6.5/examples/resources/mapbox-streets-v6-style.js"></script>

<style>

.map {

    background: #f8f4f0;

}

</style>

</head>

<body>

    <div id="map" class="map"></div>

    <script>

        var key = 'Your Mapbox access token from http://mapbox.com/ here';

        var map = new ol.Map(

                {

                    interactions : ol.interaction.defaults().extend(

                            [ new ol.interaction.DragRotateAndZoom() ]),

                    layers : [ new ol.layer.VectorTile(

                            {

                                declutter : true,

                                source : new ol.source.VectorTile(

                                        {

                                            attributions : '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> '

                                                    + '© <a href="https://www.openstreetmap.org/copyright">'

                                                    + 'OpenStreetMap contributors</a>',

                                            format : new ol.format.MVT(),

                                            url : 'https://osm2vectortiles-0.tileserver.com/v2/{z}/{x}/{y}.pbf'

                                        }),

                                style : createMapboxStreetsV6Style(

                                        ol.style.Style, ol.style.Fill,

                                        ol.style.Stroke, ol.style.Icon,

                                        ol.style.Text)

                            }) ],

                    target : 'map',

                    view : new ol.View({

                        center : [ 0, 0 ],

                        zoom : 2

                    })

                });

    </script>

</body>

</html>

效果

注意点

openlayers渲染mapbox vector tile并不像leaflet整合mapbox-gl那样（采用的mapbox-gl渲染引擎），而是采用openlayers自己的引擎

openlayers渲染mapbox gl的vector tile的更多相关文章

  1. leaflet渲染mapbox gl的矢量数据

    准备条件 1.mapbox-gl.js mapbox-gl.css 2.leaflet-mapbox-gl.js https://github.com/mapbox/mapbox-gl-leaflet ...

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

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

  3. 使用GeoServer+OpenLayers发布和调用WMTS、Vector Tile矢量切片服务 | Publishing and Calling WMTS, Vector Tile Service Using GeoServer + OpenLayers

    Web GIS系列: 1.搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3 2.使用GeoServer+QGIS发布WMTS服务 3.使 ...

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

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

  5. 矢量切片(Vector tile)

    说明:本月的主要工作都是围绕制作矢量切片这一个核心问题进行的,所以2月的主题就以这个问题为主,目前分支出来的一些内容主要包括了TMS(Tile map service),OpenLayers3中的Pr ...

  6. 矢量切片（Vector tile）番外一：Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  7. 【GISER && Painter】矢量切片(Vector tile)

    说明:本月的主要工作都是围绕制作矢量切片这一个核心问题进行的,所以2月的主题就以这个问题为主,目前分支出来的一些内容主要包括了TMS(Tile map service),OpenLayers3中的Pr ...

  8. 【GISER && Painter】矢量切片（Vector tile）番外一：Proj4js

    说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...

  9. Vector Tile

    Mapbox Vector Tile Specification A specification for encoding tiled vector data. <?XML:NAMESPACE ...

随机推荐

  1. FZU 2234

    题目为中文,题意略. 这个题目我开始用贪心做bfs两次,这样做是错的,因为两次局部的最优解并不能得出全局的最优解,以下面样例说明: 3 0   10   -1 10   10   10 1   0  ...

  2. flask中jinjia2模板引擎详解3

    接上文 模板继承 Jinji2中的模板继承是jinjia2比较强大的功能之一. 模板继承可以定义一个父级公共的模板,把同一类的模板框架定义出来共享. 这样做一方面可以提取共享代码,减少代码冗余和重复的 ...

  3. postman模拟HttpPost请求的方法

    开始想装postman的Google浏览器插件的,但是发现应用商店无法搜索,下载的拖进扩展也装不上... 于是找到了这个绿色版的Postman桌面程序!有需要的可以下载,点击下载:http://dow ...

  4. 304和浏览器http缓存

    浏览器虽然发现了本地有该资源的缓存,但是不确定是否是最新的,于是想服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304. 浏览器缓存分为强缓存和协商缓存. 1.浏览器请求某资源,通过he ...

  5. 从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程

    一.构造函数的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 事件CEvent的使用 .

    CEvent类的一个对象,表示一个"事件"--一个允许一个事件发生时线程通知另一个线程的同步对象.在一个线程需要了解何时执行任务时,事件是十分有用的.例如,拷贝数据到数据文档时,线 ...

  7. javascript parseint

  8. 错误代码： 1054 Unknown column 'course' in 'field list'

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:SELECT stu_name, course, score FROM t_ ...

  9. 双硬盘RAID 0全攻略

    . RAID53 RAID7即高效数据传送磁盘结构,是RAID3和带区结构的统一,因此它速度比较快,也有容错功能.但价格十分高,不易于实现. 为什么需要磁盘阵列        如何增加磁盘的存取(ac ...

  10. JavaWeb中jdbcproperties配置文件

    开发中使用properties配置文件,方便后期维护. 文件位置: 任意,建议src下 文件名称:任意,扩展名为properties 文件内容:一行一组数据,格式“key=value” key 命名自 ...