概述
本文旨在從無到erverything的部署一套在線可視化的矢量地圖，當然是依賴於mapbox-gl，物理流程圖如下：
條件
js方面：
1、mapbox-gl-dev.js，參考http://www.cnblogs.com/lilei2blog/p/7827110.html
2、字體符號，參考http://www.cnblogs.com/lilei2blog/p/7827193.html
數據庫方面：
1、安裝有postgis的postgresql數據庫
2、加載存有空間地理數據的道路數據到postgresql數據庫中，並對其建立空間索引
對postgis的操作參考我的博客：http://www.cnblogs.com/lilei2blog/p/7815253.html、http://www.cnblogs.com/lilei2blog/p/7814936.html
數據服務方面：
參考我的博客http://www.cnblogs.com/lilei2blog/p/7830945.html
步驟
該步我采用從數據->后台->前台的順序來推進
1、啟動供應vector tile的服務
2、使用myeclipse建立一個java web工程new-mbg
3、拷貝編譯好的mapbox-gl的dist目錄拷貝到工程下
4、拷貝編譯好的字體文件目錄拷貝到工程下
5、可視化配置，mapbox-gl核心配置包括：
1、sources數據來源
2、sprite圖標配置
3、layers 圖層配置
4、glyphs字體配置
樣例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport'
content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='dist/mapbox-gl-dev.js'></script>
<link href='dist/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript">
var layers = [
{
"id" : "background",
"type" : "background",
"layout" : {
},
"paint" : {
"background-color" : {
"base" : 1,
"stops" : [ [ 11, "hsl(35, 32%, 91%)" ],
[ 13, "hsl(35, 12%, 89%)" ] ]
}
}
}, {
"interactive" : true,
"layout" : {
"visibility" : "visible",
"line-cap" : "round",
"line-join" : "round"
},
"type" : "line",
"source" : "composite",
"id" : "id1",
"paint" : {
"line-width" : {
"base" : 3.5,
"stops" : [ [ 5, 0.75 ], [ 18, 32 ] ]
},
"line-color" : "#00ee00"
},
"source-layer" : "link"
}, {
"id" : "road-label-medium",
"type" : "symbol",
"metadata" : {
"mapbox:group" : "1444933721429.3076"
},
"source" : "composite",
"source-layer" : "link",
"minzoom" : 12,
"layout" : {
"text-size" : {
"base" : 2,
"stops" : [ [ 11, 10 ], [ 20, 14 ] ]
},
"text-max-angle" : 30,
"symbol-spacing" : 250,
"text-font" : [ "hwxk" ],
"symbol-placement" : "line",
"text-padding" : 1,
"text-rotation-alignment" : "map",
"text-field" : "{name}",
"text-letter-spacing" : 0.01
},
"paint" : {
"text-color" : "hsl(40, 0%, 0%)",
"text-halo-color" : "hsl(0, 0%, 100%)",
"text-halo-width" : 1
}
}
]
var simple = {
"version" : 8,
"name" : "Bright",
"sources" : {
"composite" : {
"type" : "vector",
"tiles" : [ "http://localhost:8081/link/{z}/{x}/{y}"]
}
},
"sprite" : "http://localhost:8080/new-mbg/sprites/sprite",
"glyphs" : "http://localhost:8080/new-mbg/glyphs/{fontstack}/{range}.pbf",
"layers" : layers
};
</script>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container : 'map', // container id
style : simple, // stylesheet location
zoom : 13,
center : [ 116.808037, 39.9752 ]
});
</script>
</body>
</html>
工程結構圖如下：
效果
北京道路：
工程git路徑：https://github.com/lileialg/mapbox-gl-local