Tangram：优秀的地图渲染引擎

亲爱的秀粉们，好久没给大家送上地图开发类的技术文章了，今天，我秀中国高级研发工程师明光就为大家带来了一篇关于地图渲染引擎的技术文章，干货满满，希望能对地图开发的同学们有所帮助！

Tangram：优秀的地图渲染引擎

Tangram是一个灵活的映射引擎，专门用于从矢量图块实时渲染2D和3D地图。建立在OpenStreetMap数据的基础上，Tangram提供了对地图制作过程几乎所有方面的可选控制，包括制图，照明和几何定制。

地图样式，数据过滤器，标签，甚至显卡代码可以在人类可读和可写的纯文本场景文件中定义，API允许直接交互式控制风格。改变颜色只是开始。每个Tangram地图都是一个3D场景，所以你也可以修改灯光和相机。

Tangram旨在使用矢量数据源，如Mapzen的免费矢量瓦片服务，这是一个平铺的托管版本的OpenStreetMap数据库。除了点和线之外，这些数据源包含元数据，Tangram可以用它来实时过滤数据并更改绘图样式。

所有这些效果都可以通过OpenGL来实现。您可以编写显卡程序，称为着色器，甚至是JavaScript，以增加交互性，混合数据源，并控制地图的设计。

Tangram有两种不错的插件：Tangram JS是用于基于浏览器的映射的Leaflet插件，而Tangram ES是用于原生移动和嵌入式设备的C ++库。

在网页中使用Tangram的最简单方法是Mapzen.js，它是Mapzen的JavaScript SDK。Mapzen.js结合了各种Mapzen服务的Web支持，包括Tangram，Mapzen Search和Mapzen Basemap样式。

Tangram地图使用YAML场景文件中的自定义样式语法进行风格化。该文件描述了控制地图的每个方面（包括数据源，要素图层，灯光，相机，纹理等）的对象层次结构。

这是一个简单的YAML :

sources:

mapzen:

type: TopoJSON

url: https://tile.mapzen.com/mapzen/vector/v1/all///.topojson

layers:

earth:

data: { source: mapzen }

draw:

polygons:

order: 0

color: darkgreen

water:

data: { source: mapzen }

draw:

polygons:

order: 1

color: lightblue

roads:

data: { source: mapzen }

draw:

lines:

order: 2

color: white

width: 1.5px

该sources元素处于Tangram 场景文件所需的顶级元素。它声明sources块的开始。它只需要一种参数：源名称。可以声明任何数量的源名称。

下面是一个简单的数据源例子：

sources:

# Mapzen tiles in TopoJSON format

mapzen-topojson:

type: TopoJSON

url: https://tile.mapzen.com/mapzen/vector/v1/all///.topojson

# Mapzen tiles in GeoJSON format

mapzen-geojson:

type: GeoJSON

url: https://tile.mapzen.com/mapzen/vector/v1/all///.json

# Mapzen tiles in Mapbox Vector Tile format

mapzen-mvt:

type: MVT

url: https://tile.mapzen.com/mapzen/vector/v1/all///.mvt

# Mapzen terrain tiles

mapzen-terrain:

type: Raster

url: https://tile.mapzen.com/mapzen/terrain/v1/normal///.png

快速应用

Tangram-JS是一个专门用于Leaflet maps的JavaScript库。

该Tangram的最新版本可以被包括在与你的网页script标签：

然后，Tangram可以实例化为Leaflet ，通过选项对象传递（至少）场景URL ：

var map = L.map();

var layer = Tangram.leafletLayer({

scene: 'scene.yaml'});

通过调用layer.remove()leafletLayer ，可以将Tangram映射解除实例化，所有相关资源都将被分配。

scene.yaml：

cameras:

camera1:

type: perspective

lights:

light1:

type: directional

direction: [0, 1, -.5]

diffuse: .3

ambient: 1

sources:

mapzen:

type: TopoJSON

url: https://tile.mapzen.com/mapzen/vector/v1/all///.topojson

url_params:

api_key: mapzen-tDHBHDp

max_zoom: 16

layers:

earth:

data: { source: mapzen }

draw:

polygons:

order: function() { return feature.sort_rank; }

color: '#ddeeee'

landuse:

data: { source: mapzen }

draw:

polygons:

order: function() { return feature.sort_rank; }

color: '#aaffaa'

water:

data: { source: mapzen }

draw:

polygons:

order: function() { return feature.sort_rank; }

color: '#88bbee'

roads:

data: { source: mapzen }

filter:

not: { kind: [path, rail, ferry] }

draw:

lines:

order: function() { return feature.sort_rank; }

color: gray

width: 8

cap: round

highway:

filter:

kind: highway

draw:

lines:

order: function() { return feature.sort_rank; }

color: '#cc6666'

width: 12

outline:

color: grey

width: 1.5

minor_road:

filter:

kind: minor_road

draw:

lines:

order: function() { return feature.sort_rank; }

color: lightgrey

width: 5

buildings:

data: { source: mapzen }

draw:

polygons:

order: function() { return feature.sort_rank; }

color: |

function () {

var h = feature.height || 20;

h = Math.min((h + 50)/ 255, .8); // max brightness: .8

h = Math.max(h, .4); // min brightness: .4

return [h, h, h];

}

3d-buildings:

filter: { $zoom: { min: 15 } }

draw:

polygons:

extrude: function () { return feature.height > 20 || $zoom >= 16; }

为了让大家更全面地了解我秀中国的地图开发成果与能力，我们策划的地图开发科普文章系列，2018年将继续从技术、产品、数据和应用等多个维度进行全面、系统的介绍和阐述。欢迎秀粉们持续关注与支持！