cdr软件_怎么让百度搜出自己_长沙网站优化_百度竞价sem

1.前言

现在我们有这样的一个需求，将mapbox在本地部署，网上也有不少讲mapbox本地部署的教程，但是在我看来，很多都没有讲到点上，因为都是在讲字体库和图标库怎么在本地加载。试想一下，如果我要加载的底图不是矢量切片，就不用那些字体库和图标库了，那我为什么还要费那个劲去折腾呢？因此本文我们来梳理一下vue3环境下mapbox本地部署。非常灵活，加不加载字体库和图标库，都可自己设置，同样，也不需要token，更不需要去替换node_modules里mapbox的某个文件，因为根本就用不到mapbox的资源，实现真正的离线部署。

2.安装mapbox

npm install mapbox-gl

3.vue3创建map组件

在vue3环境搭建完毕之后，我们只需要新建一个map组件即可。并设置好div容器的样式

<template><div ref="mapContainer" class="map-container"></div>
</template>
<script setup></script><style scoped>
.map-container {flex: 1;height: 100%;width: 100%;margin: 0;padding: 0;
}
</style>

4.完善map组件

我们现在要初始化map，但是我不想一初始化就去加载mapbox默认图层，因此在初始化map时，把layers和sources全部置为空。

import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css';
let mapContainer = ref();
let map = new mapboxgl.Map({container: mapContainer.value,center: [106.741891, 34.054211],zoom: 3,style: {"version": 8,layers: [],sources: {},},
});

OK，现在map初始化好了。我们要加载我们自己的图层，或者天地图的图层，这里我们就以天地图图层为例。

map.on('load', function () {map.addSource('tianDiTu', {type: 'raster',tiles: ['http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的token'],tileSize: 256});// 添加天地图的 layermap.addLayer({id: 'tianDiTu-layer',type: 'raster',source: 'tianDiTu'});
});

看下效果
在这里插入图片描述
再看一下NetWork，全程没有任何请求mapbox的资源

恭喜，现在你已经实现了mapbox的本地部署了。关于图层你换成自己的就可以了。但如果你还是想使用mapbox提供的样式，那么你可以这么设置，接着往下看。

5.mapbox图标和字体本地化

这个其实非常简单，你只需要把mapbox的字体（glyphs）和图标（sprite）下载下来，放在项目中保证可以访问就可以了。如果找不到，可以去这里下载：mapbox资源下载
我将资源放到了项目的static文件夹下：
在这里插入图片描述
我们在浏览器里访问一下，看看能不能访问的到，确保访问OK。

我们在浏览器里访问一下，看看能不能访问的到，确保访问OK。现在重新初始化一下map

let baseUrl = 'http://localhost:5173/src/static/mapbox1.13.3';
let map = new mapboxgl.Map({container: mapContainer.value,center: [106.741891, 34.054211],zoom: 3,style: {"version": 8,"sprite": baseUrl + "/sprites/sprite","glyphs": baseUrl + "/fonts/{fontstack}/{range}.pbf",layers: [],sources: {},},
});

如果你这样配置了还去mapbox加载资源的话，你可以加一个transformRequest选项，处理一下访问路径，这种写法是我在官网找到的，目前还没看到有哪个讲离线部署的博文讲到这个函数，作者也算是首创了吧。
在这里插入图片描述

let baseUrl = 'http://localhost:5173/src/static/mapbox1.13.3';
let map = new mapboxgl.Map({container: mapContainer.value,center: [106.741891, 34.054211],zoom: 3,style: {"version": 8,"sprite": baseUrl + "/sprites/sprite","glyphs": baseUrl + "/fonts/{fontstack}/{range}.pbf",layers: [],sources: {},},transformRequest: (url, resourceType) => {if (resourceType === 'Glyphs') {url = url.split("?")[0].replace("https://api.mapbox.com/fonts/v1/mapbox", baseUrl + "/fonts")} else if (resourceType === 'SpriteJSON' || resourceType === 'SpriteImage') {url = url.split("?")[0].replace("https://api.mapbox.com/styles/v1/mapbox/streets-v12", baseUrl + "/sprites")}return { url: url };}
});

接下来就还是天地图图层的加载，或者矢量切片图层的加载，矢量切片可以使用GeoServer来切，比较简单，这里就不再赘述了。

6.完整代码

6.1 vue版本

<template><div ref="mapContainer" class="map-container"></div>
</template>
<script setup>
import mapboxgl from 'mapbox-gl'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import 'mapbox-gl/dist/mapbox-gl.css';
let mapContainer = ref();let baseUrl = 'http://localhost:5173/src/static/mapbox1.13.3';
onMounted(() => {let map = new mapboxgl.Map({container: mapContainer.value,center: [106.741891, 34.054211],zoom: 3,style: {"version": 8,// "sprite": baseUrl + "/sprites/sprite",// "glyphs": baseUrl + "/fonts/{fontstack}/{range}.pbf",layers: [],sources: {},},});map.on('load', function () {map.addSource('tianDiTu', {type: 'raster',tiles: ['http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的token'],tileSize: 256});// 添加天地图的 layermap.addLayer({id: 'tianDiTu-layer',type: 'raster',source: 'tianDiTu'});});});</script><style scoped>
.map-container {flex: 1;height: 100%;width: 100%;margin: 0;padding: 0;
}
</style>

6.2 原生js版本

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../static/mapbox1.13.3/mapbox-gl.js"></script><link rel="stylesheet" href="../static/mapbox1.13.3/mapbox-gl.css" /><style>html,body {padding: 0;margin: 0;height: 100%;overflow: hidden;}#map {height: 100%;z-index: 0;}</style>
</head><body><div id='map'></div><script>let url = 'http://localhost:5173/src/static/mapbox1.13.3';let map = new mapboxgl.Map({container: 'map',center: [106.741891, 34.054211],zoom: 3,style: {"version": 8,"sprite": url+"/sprites/sprite","glyphs": url+"/fonts/{fontstack}/{range}.pbf","sources": {"tdt-tiles": {//矢量类型'type': 'raster','tileSize': 256,"tiles": [//天地图"http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的token",]}},layers: [{id: 'layer-tiles',type: 'raster',source: 'tdt-tiles'}]}});</script>
</body></html>

7.总结

本文详细的梳理了mapbox的本地化部署，并且讲解了mapbox中天地图图层的加载，以及矢量切片图层加载时的资源访问问题，通过transformRequest函数可以灵活的解决访问资源的问题。最后本文给出了mapbox离线环境搭建的vue版本和原生js版本，希望对读者有所帮助，回见~