准备条件

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. PAT1119. Pre- and Post-order Traversals

    思路:中序遍历–根结点,左子树,右子树:后序遍历–左子树,右子树,根结点. 那么在找到根结点之后就可以开始划分左右子树了.左子树的先序第一个节点是根,左子树的后序最后一个节点是根. 例如 1 2 3 ...

  2. Python+Selenium基础篇之1-环境搭建

    Python + Selenium 自动化环境搭建过程 1. 所需组建 1.1 Selenium for python 1.2 Python 1.3 Notepad++ 作为刚初学者,这里不建议使用P ...

  3. 【推荐】免费，19 款仿 Bootstrap 后台管理主题下载

    声明: 1. 本篇文章提到的仿 Bootstrap 风格的主题,是基于 jQuery 的 ASP.NET MVC 控件库的主题. 2. FineUIMvc(基础版)完全免费,可以用于商业项目. 目录 ...

  4. PCIe设备的配置空间

    关于PCI设备的配置空间网上已经有很多资料了,如下图就是PCI设备必须支持的64个字节的配置空间,范围为0x00-0x3f. 很多PCI设备仅仅支持者64字节的配置空间.PCI和PCIe配置空间的区别 ...

  5. mysql常用基础操作语法（十二）~~常用数值函数【命令行模式】

    数值函数是常用函数之一,也是学习mysql必会的,常用的有如下一些: 1.ceil:返回大于某个数的最小整数值: 2.floor:和上一个相反,返回小于某个数的最大整数值: 3.round:返回某个数 ...

  6. hi3531的hifb显示1080p60Hz

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h&g ...

  7. Java之Iterator

    Java之Iterator 1.实例源码 /** * @Title:IteratorJava.java * @Package:com.you.model * @Description:Iterator ...

  8. JavaScript遍历table

    JavaScript遍历table 1.说明      遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. ORA-00922：选项缺失或无效

    1.错误描述    ORA-00922:选项缺失或无效 2.错误原因 3.解决办法

  10. java.sql.SQLException:No suitable driver found for http://localhost:3306/school

    1.错误描述 java.sql.SQLException:No suitable driver found for http://localhost:3306/school 2.错误原因 Class. ...