mapbox-gl.js 本地化部署

最新推荐文章于 2025-03-17 00:00:00 发布

smander

最新推荐文章于 2025-03-17 00:00:00 发布

阅读量2.4k

点赞数 1

文章标签： javascript 开发语言前端

本文链接：https://blog.youkuaiyun.com/smander/article/details/122448661

版权

离线编译源码

从 github 上下载 mapbox-gl-js 源码

下载地址：

https://codeload.github.com/mapbox/mapbox-gl-js/zip/refs/heads/main

下载后解压，假定目录是：D:\FIndexDB\mapbox\mapbox-gl-js-main

在该目录下打开终端，执行下面命令，安装必要的依赖：

D:\mapbox\mapbox-gl-js-main> yarn install

等待命令行执行完毕后打开文件D:\mapbox\mapbox-gl-js-main\src\ui\map.js 文件，找到下面这个函数，然后注释掉。

修改前：

修改后：

执行下面编译命令

D:\mapbox\mapbox-gl-js-main> yarn build-prod

等待执行完毕，进入dist 目录把脚本考出来使用即可。

到此Mapbox-gl-js 离线编译完成。

直接修改JS

MapBox在内网使用，只需修改mapbox-gl.js文件中“this._requestManager._customAccessToken,(e=>{if(e&&(false))”，框架就不会验证token，可内网部署。

内网部署

新建一个目录 mpboxPrj，该目录作为项目根目录，结构如下：

其中 mapbox-gl.js,mapbox-gl.js.map 是上面本地去掉token验证后编译的文件。

其中 glyphs和sprite文件夹下的内容是离线字体和图标。
Nginx 配置该路径，作为个http服务，也可以用tomcat 来配置。

根据官网例子新建一个html 文件，命名one.html 文件，打开浏览器输入：

http://localhost:8080/one.html

One.html 源码如下，注意加粗部分已经本地化了：

<!DOCTYPE html>

<html>

<head>

<title>hello world</title>

<link href="mapbox/mapbox-gl.css" rel="stylesheet">

<script src="mapbox/mapbox-gl.js"></script>

<style>

body {

margin: 0;

padding: 0;

}

#map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

</style>

</head>

<body>

// token 已经注释掉了

//mapboxgl.accessToken = 'pk.eyJ1Ijoic21hbmRlciIsImEiOiJja3Boc';

var map = new mapboxgl.Map({

container: 'map',

style: {

"version": 8,

"name": "Mapbox Streets",

"sprite": "http://127.0.0.1:8080/resources/sprite/sprite",

"glyphs": "http://127.0.0.1:8080/resources/glyphs/{fontstack}/{range}.pbf",

"sources": {

"osm-tiles": {

"type": "raster",

'tiles': [

"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"

'tileSize': 256

}

"layers": [{

"id": "123",

"type": "raster",

"source": "osm-tiles",

"source-layer": "osmtiles"

}]

center: [-96, 37.8],

zoom: 3

});

map.on('load', function() {

map.addLayer({

"id": "points",

"type": "symbol",

"source": {

"type": "geojson",

"data": {

"type": "FeatureCollection",

"features": [{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [-77.03238901390978, 38.913188059745586]

"properties": {

"title": "北京规划院",

"icon": "monument"

}

{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [-122.414, 37.776]

"properties": {

"title": "北京城垣",

"icon": "harbor"

}

]

}

"layout": {

"icon-image": "{icon}-15",

"text-field": "{title}",

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

"text-offset": [0, 0.6],

"text-anchor": "top"

}

});

</script>

</body>

</html>