准备条件

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. 试着简单易懂记录synchronized this object Class的区别,模拟ConcurrentHashMap

    修饰静态方法默认获取当前class的锁,同步方法没有释放的锁,不影响class其他非同步方法的调用,也不影响不同锁的同步方法,更不影响使用class的其他属性. package thread.base ...

  2. The Windows account sa does not exist and cannot be provisioned as a SQL Server system administrator

    今天遇到一个案例,在使用命令修改一个测试服务器(SQL Server 2014标准版)的服务器排序规则时,遇到了下面错误信息 (具体账号信息脱敏处理,随机生成一个账号密码) The Windows a ...

  3. cmder默认的命令提示符λ改成$

    新版的cmder(2016.11.3测试)单纯修改init.bat或以前的方法都试过了不行,下面是我自己找到的方法.亲测可行. cmder\vendor\clink.lua文件中第41行中{lamb} ...

  4. configure: error: xml2-config not found. Please check your libxml2 installation

    安装php时的报错 checking libxml2 install dir... nochecking for xml2-config path... configure: error: xml2- ...

  5. freemarker写select组件报错总结（六）

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

  6. java.sql.SQLException:Column Index out of range,0<1

    1.错误描述 java.sql.SQLException:Column Index out of range,0<1 2.错误原因 try { Class.forName("com.m ...

  7. Visio如何调整锁定图像大小

    在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: 可以看到其边框是显示锁定状态无法修改的,当我们在左下角修改器长宽时,也会出现不可修改的情况. ...

  8. I2C总线通讯协议

    I2C总线通讯协议 1. I2C总线简介 I2C是Inter-Integrated Circuit的简称,读作:I-squared-C.由飞利浦公司于1980年代提出,为了让主板.嵌入式系统或手机用以 ...

  9. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

  10. 《Master Bitcoin》学习笔记01

    前言 关于比特币入门,其运行原理(理解性描述),什么是挖矿,还有一些学习资料的整理,详见此博客链接 第一章讲比特币的历史,算是导入,上面的博客链接有概括. 第二章举了使用比特币交易的例子,其中介绍了一 ...