mapbox-gl.js本地化

最新推荐文章于 2024-06-11 00:21:13 发布

zhaoyuhui1994

最新推荐文章于 2024-06-11 00:21:13 发布

阅读量9.1k

点赞数 1

分类专栏： mapbox 前端文章标签： mapbox mapbox-gl.js

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

mapbox

3 篇文章 0 订阅

订阅专栏

mapbox-gl官网地址：https://www.mapbox.com/mapbox-gl-js/api/

介绍

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

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

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

本地化

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

第一步，先贴全部代码~~

<!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文件夹下。然后把代码里的请求地址改为：

http://localhost:8080/mapboxTest/sprite

第三步，本地化字体。

用的是 https://github.com/mapbox/node-fontnik

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

npm install

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

然后写一个testYH.js文件在文件夹fontnik里，

内容如下（来自猿基地）：

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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。。

之后运行： node testYH.js

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

之后，在html里加上：

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

和

 "text-font": ["YaHei"],

就可以啦！！！

zhaoyuhui1994

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
mapbox-gl.js本地化

mapbox-gl官网地址：https://www.mapbox.com/mapbox-gl-js/api/介绍mapbox-gl.js是mapbox用于web端地图可视化的api。使用的时候首先要注册个账户，然后获得一个 accessToken。之后在官网例子里可以发现，地图和图标、字体等等的显示都需要这个accessToken，那势必联网。因为项目环境不允许上网，所以需要将...
复制链接

扫一扫