准备条件

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. [Note] Apache Flink 的数据流编程模型

    Apache Flink 的数据流编程模型 抽象层次 Flink 为开发流式应用和批式应用设计了不同的抽象层次 状态化的流 抽象层次的最底层是状态化的流,它通过 ProcessFunction 嵌入到 ...

  2. JVM笔记6-垃圾回收概述

    JVM进行垃圾回收时要考虑哪的问题如下: 1.如何判定对象为垃圾对象? 1.引用计数法:在对象中添加一个引用计数器,当有地方引用这个对象的时候,引用计数器的值就+1,引用失效的时候,计数器的值就-1, ...

  3. Luogu P1757 通天之分组背包

    题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品相互冲突,现在,他想知道最大 ...

  4. java 集合框架(十五)Deque

    一.概述 Deque是Queue的子接口,我们知道Queue是一种队列形式,而Deque则是双向队列,它支持从两个端点方向检索和插入元素,因此Deque既可以支持LIFO形式也可以支持LIFO形式.D ...

  5. Android开发之仿微信显示更多文字的View

    最近开发需求中要模仿微信朋友圈文章的展开收起功能,网上找了找,发现都有问题,于是乎自己在前辈的基础上进行了一定量的修改,下边将源码贴出来供大家参考:1.主Activity布局文件就不粘贴了,很简单,就 ...

  6. 解决VC6下调不出MSDN的问题！

     原文:http://www.programfan.com/blog/article.asp?id=1524http://blog.programfan.com/trackback.asp?id=15 ...

  7. JFFS2 文件系统及新特性介绍

    简介: JFFS2 是一个开放源码的项目(www.infradead.org). 它是在闪存上使用非常广泛的读/写文件系统,在嵌入式系统中被普遍的应用.这篇文章首先分析了在闪存上使用 JFFS2 的必 ...

  8. FFMPEG:压缩之H264编码（YUV420P->H264）

    720*576@25hz,550帧的yuv420p数据,编码时间13.3秒. void CTest0Dlg::OnButton5() { // TODO: Add your control notif ...

  9. C#扩展方法类库StringExtensions

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. Flex中TabNavigator隐藏和显示选项卡

    1.问题背景 遇到这样一个问题:有四个Tab选项卡,根据不同的参数隐藏和显示选项卡 2.实现实例 (1)隐藏"春季" protected function springClickH ...