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>

以后运行： node mutest.js

就能够获得转换后的一堆pdf文件，把它们放在tomcat里的文件夹“YaHei”下面

以后，在html里加上：

[html] view plain copy

"glyphs": "http://localhost:8080/mapboxTest/mapbox本地化/font/{fontstack}/{range}.pbf",

和
[html] view plain copy

就能够啦！！！