准备条件

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. DLL文件修复

    当你在Windows计算机中安装非操作系统的软件时,往往会覆盖或改写系统共享文件, 如动态链接库(.dll文件)和可执行文件(.exe文件). * 对于Windows系统来说,当用户操作不当(如非正常 ...

  2. SpringBoot+Mybatis+PageHelper简化分页实现

    前言 经过一段时间的测试和修改PageHelper插件逐渐走到了让我觉得靠谱的时候,它功能的就是简化分页的实现,让分页不需要麻烦的多写很多重复的代码. 已经加入我的github模版中:https:// ...

  3. Mysql group by,order by,dinstict优化

    1.order by优化 2.group by优化 3.Dinstinct 优化 1.order by优化 实现方式: 1. 根据索引字段排序,利用索引取出的数据已经是排好序的,直接返回给客户端: 2 ...

  4. Linux下安装MySQL数据库(压缩包方式安装)

    1.这里我将Mysql安装在/usr/local/mysql目录里面,也可以安装在其他地方; mkdir /usr/local/mysql 2.下载MySQL压缩包 wget http://dev.M ...

  5. 【Unity3D】Unity3D开发《我的世界》之五、创建无限地形（视频）

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_05.html 一.导入Unity3D自带的第一人称角色控制器 直接导入就行,我们用 ...

  6. canvas API总结

    从简单的基本图形,到复杂炫酷的动画,通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D,能够使用丰富的API来进行图形绘制.这篇文章将会总结在之前的canva ...

  7. php 递归无线级别分类

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <?ph ...

  8. freemarker报错之十二

    1.错误描述 六月 04, 2014 10:31:47 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  9. Flex中的DataGrid报错（一）

    1.错误描述    此行的多个标记:    -holeNum    -1105: 赋值的目标必须是引用值. 2.错误原因    detailWindow.holeNum.toString() = &q ...

  10. JDBC连接池(三)DBCP连接池

    JDBC连接池(三)DBCP连接池 在前面的随笔中提到 了  1.JDBC自定义连接池  2. C3P0连接池 今天将介绍DBCP连接池 第一步要导入jar包   (注意:mysql和mysql 驱动 ...