mapbox-gl.js本地化

時間 2019-12-07

標籤 mapbox gl.js 本地化欄目 JavaScript 简体版

原文原文鏈接

介紹

mapbox-gl.js是mapbox用於web端地圖可視化的api。使用的時候首先要註冊個帳戶，而後得到一個 accessToken。css

以後在官網例子裏能夠發現，地圖和圖標、字體等等的顯示都須要這個accessToken，那勢必聯網。html

由於項目環境不容許上網，因此須要將其本地化，即把須要accessToken的請求所有本地化到本身的服務上來。java

首先根據大神猿基地的文章：Mapbox GL JS本地化實踐來一步步進行本地化。下面重點講一下我在本地化出現的問題與解決辦法~~node

[html] view plain copypython

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sprite": "http://localhost:8080/mapboxTest/sprite",
"glyphs": "http://localhost:8080/mapboxTest/mapbox本地化/font/{fontstack}/{range}.pbf",
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
],
'tileSize': 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "osm-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
center: [114.28321838378906,30.54302215576172],
zoom: 12
});
//添加要素
map.on('load', function () {
map.addSource("points", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [114.28321838378906,30.54302215576172]
},
"properties": {
"title": "test1",
"icon": "monument"
}
}]
}
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["YaHei"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
</script>
</body>
</html>

大神已經說得很清楚了，在此不贅述。就是把請求到的sprite.png sprite.png sprite2x.png 放到tomcat的sprite文件夾下。而後把代碼裏的請求地址改成：[html] view plain copygit

首先，安裝ubuntu虛擬機，以後安裝python2.7與node.js v6.x，而後在node-fontnik文件夾下運行web

npm install

以後在文件夾里加上你要轉換的字體，如微軟雅黑的tff文件npm

而後寫一個testYH.js文件在文件夾fontnik裏，

內容以下（來自猿基地）：

[javascript] view plain copy

<span style="font-size:14px;">var fontnik = require('.');
var fs = require('fs');
var path = require('path');
var convert = function(fileName, outputDir) {
var font = fs.readFileSync(path.resolve(__dirname + "/" + fileName));
output2pbf(font, 0, 255, outputDir);
}
function output2pbf(font, start, end, outputDir) {
if (start > 65535) {
console.log("done!");
return;
}
fontnik.range({font: font, start: start, end: end}, function(err, res) {
var outputFilePath = path.resolve(__dirname + "/" + outputDir + start + "-" + end + ".pbf");
fs.writeFile(outputFilePath, res, function(err){
if(err) {
console.error(err);
} else {
output2pbf(font, end+1, end+1+255, outputDir);
}
});
});
}
convert("./fonts/YaHei/MSYaHei.ttf", "./Microsoft YaHei/");
做者：猿基地
連接：http://www.jianshu.com/p/23634e54487e
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處</span><span style="font-size: 16px;">。</span>