最近終于閑下來，偷偷做點(diǎn)自己的項(xiàng)目。于是向表弟勒索了支付寶賬號，開了個(gè)學(xué)生服務(wù)器。接下來搞點(diǎn)事情。去Github上轉(zhuǎn)一轉(zhuǎn)，遭遇一只叫MapBox的開源項(xiàng)目（附上GitHub地址 https://github.com/mapbox/mapbox-gl-js）。發(fā)現(xiàn)MapBox渲染的地圖效果還不錯(cuò)，但是由于是國外的服務(wù)器，數(shù)據(jù)服務(wù)完全訪問不到，于是開始了步一個(gè)構(gòu)建地圖服務(wù)的不歸路。走了很多彎路，下面直接挑干貨。
1.下載MapBox官網(wǎng)的MapBox-gl的Demo 會發(fā)現(xiàn)相應(yīng)的代碼
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
</script>
但是Mapbox的服務(wù)器訪問不了，我們只能找另外的服務(wù)了。
2.OpenStreetMap（簡稱OSM，中文是公開地圖）是一個(gè)網(wǎng)上地圖協(xié)作計(jì)劃，目標(biāo)是創(chuàng)造一個(gè)內(nèi)容自由且能讓所有人編輯的世界地圖。OSM也屬于瓦片地圖服務(wù)，支持MapBox的渲染。我們可以從OSM服務(wù)器下載相應(yīng)的瓦片。
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
],
'tileSize': 256
}
}
mapBox-gl的style支持第三方的資源 可以在style中添加“sources”屬性，type指定為“raster” 表示柵格切片數(shù)據(jù)源。由 Mapbox 托管的數(shù)據(jù)源，the "url" 值應(yīng)以 mapbox://mapid形式表示。我們選擇用osm托管的數(shù)據(jù)源。osm鏈接支持a.tile,b.tile,c.tile（具體區(qū)別和應(yīng)用可維基百科查詢）
我還在添加了geocoder插件可用于地圖地點(diǎn)的搜索mapbox-gl-geocoder鏈接
這樣我們就可以在服務(wù)器上部署一個(gè)tomcat項(xiàng)目。如下
但是osm的數(shù)據(jù)源訪問的數(shù)據(jù)有點(diǎn)慢，再搞點(diǎn)事情。
3.iServer 是基于跨平臺 GIS 內(nèi)核的云 GIS 應(yīng)用服務(wù)器，是云端一體化技術(shù)的重要組成部分。我們可以用IServer做一個(gè)緩存服務(wù)。（iServer 是收費(fèi)的但是可以試用3個(gè)月）
docker search iserver //安裝完docker后搜索iserver
docker pull supermap/iserver
docker run --name iserver1 -d -p 1521:8090 -v /home/data:/home supermap/iserver
// -p表示映射端口 前面表示宿主機(jī)的端口 后面表示容器端口
// -v表示 宿主機(jī)和容器的共享文件
// 不要問我為什么用1521ORACAL端口 因?yàn)槲彝嗽O(shè)置阿里云安全組了 手動滑稽
進(jìn)入后配置管理員賬號，進(jìn)入管理員界面
選擇rest服務(wù)
SMTiles 表示緩存圖層生成sqlite數(shù)據(jù)庫本地文件
然后進(jìn)入服務(wù)列表選擇我們剛創(chuàng)建的服務(wù)，默認(rèn)有normal，transport，humanitarian，cycle四種樣式
但是沒有想要的mapbox樣式 于是在服務(wù)中配置
我選擇了mapbox的map_outdoor樣式
http://c.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token={key}
然后修改js中的鏈接地址為 http://{ip}:1521/iserver/services/map-OSM/rest/maps/OSM/zxyTileImage.png?z={z}&x={x}&y={y}
重新部署啟動tomcat就ok了
總結(jié)：
這個(gè)地圖看看地形還是不錯(cuò)的，玩了好一會地圖，緩存文件已經(jīng)5G了。。。iserver還支持分布式切片服務(wù)，可以把切片分布式先下載到本地（= = 我的1G內(nèi)存40G磁盤9.9元包郵渣服務(wù)器還是算了吧，別吐槽我的服務(wù)器慢了）還有本來想用水經(jīng)注萬能下載器下一堆切片到服務(wù)器，但是一個(gè)中國的數(shù)據(jù)到22層級都快PB級別了還是算了吧。有能力的同學(xué)可以試試配個(gè)mongoDB試試。
（ps：markdown好強(qiáng)大，都不怎么會用。國慶到了，好好休息，大家國慶快樂。）
