mapbox-gl.js本地化

最新推荐文章于 2024-04-25 11:21:11 发布

weixin_33991418

最新推荐文章于 2024-04-25 11:21:11 发布

阅读量361

点赞数

文章标签： python java javascript ViewUI

原文链接：https://my.oschina.net/u/1266171/blog/1545994

版权

mapbox-gl.js是mapbox用于web端地图可视化的api。使用的时候首先要注册个账户，然后获得一个 accessToken。

之后在官网例子里可以发现，地图和图标、字体等等的显示都需要这个accessToken，那势必联网。

因为项目环境不允许上网，所以需要将其本地化，即把需要accessToken的请求全部本地化到自己的服务上来。

首先根据大神猿基地的文章：Mapbox GL JS本地化实践来一步步进行本地化。下面重点讲一下我在本地化出现的问题与解决办法~~

[html] view plain copy

<!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 copy

首先，安装ubuntu虚拟机，之后安装python2.7与node.js v6.x，然后在node-fontnik文件夹下运行

npm install

之后在文件夹里加上你要转换的字体，如微软雅黑的tff文件

然后写一个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>