在mapbox-gl过程中，当现有的图层无法所需要的效果的时候，可以尝试使用自定义图层去实现新的效果展示。

而要用mapbox-gl 实现自定图层，可以先了解官方对CustomLayerAPI的说明：
https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface

基于说明和案例我们可以了解到CustomLayer上可以以 webgl 的方式实现，也能够以 html5 canvas 形式去实现，官方分别提供了两个示例：
canvas渲染方式:
https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/
webgl渲染方式：
https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/

所以作为webgl常用框架的three.js也是可以作为CustomLayer的实现方式之一，下面便是通过结合three.js在mapbox gl 地图中添加圆柱体自定义图层。

// 当前圆柱体地理位置，及展示在three.js所需参数
var modelOrigin = [126.62085557479679, 45.744408841143745];
var modelAltitude = 0;
var modelRotate = [Math.PI / 2, 0, 0];
var modelScale = 5.41843220338983e-8;
let modelTransform = {
    translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
    translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
    translateZ: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
    rotateX: modelRotate[0],
    rotateY: modelRotate[1],
    rotateZ: modelRotate[2],
    scale: modelScale
var customLayer = {
    id: '3dmodel',
    type: 'custom',
    renderingMode: '3d',
    onAdd: function (map, gl) {
        // 添加圆柱体形状
        let cylinder = new THREE.CylinderGeometry( 5, 5, 20, 32 );
        // 添加材质
        this.materials = new THREE.MeshBasicMaterial({
            color: '#fdff6e',
            side: THREE.DoubleSide,
        });
        this.cylinderMesh = new THREE.Mesh(cylinder, this.materials);
        // 创建
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 创建场景
        this.scene = new THREE.Scene();
        // 创建光线
		var directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(0, -50, 100).normalize();
        this.scene.add(directionalLight);
        // gltf加载器
        this.scene.add(this.cylinderMesh);
        // s获取Mapbox GL JS map canvas到three.js中
        this.map = map;
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.map.getCanvas(),
            context: gl,
        });
        this.renderer.autoClear = false;
    render: function (gl, matrix) {
        // 矩阵坐标转换
        var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
        var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
        var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);
        var m = new THREE.Matrix4().fromArray(matrix);
        var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
            .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
            .multiply(rotationX)
            .multiply(rotationY)
            .multiply(rotationZ);
        this.camera.projectionMatrix.elements = matrix;
        this.camera.projectionMatrix = m.multiply(l);
        this.renderer.state.reset();
        this.renderer.render(this.scene, this.camera);
        this.map.triggerRepaint();
map.on('load', function (params) {
	map.addLayer(customLayer);
当然诸如three.js能实现的其他的三维效果，也可以在mapbox gl通过自定义图层添加到地图中。
				
mapbox-gl+Three.js如何实现三维专题图引言引入JS先加载地图我们需要准备一些地图JSON数据初始化数据和地图、THREE对象使用Three构建的3D对象创建mapbox图层把3D对象图层添加进mapbox图层发布并下载
大家好！我是amm！
最近在研究前端 three.js 和 webGL 技术，采用三维地图展示数据，我分享一下研究成果！
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020101614385567.jpg?x-oss-pro
				
Mapbox 故事叙述开源项目教程
 storytellingStorytelling with maps template项目地址:https://gitcode.com/gh_mirrors/st/storytelling 
Mapbox Storytelling 是一个基于Mapbox平台的开源项目，旨在为开发者和内容创作者提供强大的工具，使他们能够通过地图和交互式故事讲述的方式来...
 使用Mapbox GL JS自定义图层的3D Tiles实现
有关有效的演示，请参见 。
 这是查看器作为自定义层的概念验证实现。 WebGL渲染是使用实现的。 仅支持Web Mercator（EPSG：3857）切片集，因为这是投影mapbox所使用的。 明确不支持以地球为中心的固定地球的图块集。 使用使用带有EPSG：3857几何形状的PostGIS数据库生成用于测试的。
 这绝不是3D Tile规范的完整实现。 当前支持以下功能：
 基于几何误差的图块加载
替代和精炼
仅支持Box边界体积
瓷砖类型：
 批处理3D模型（b3dm）
 点云（PNTS）：基本实施
目前不支持以下功能：
 EPSG以外的任何坐标系：3857
 区域和球体边界体积
查看器请求量
实例化3D模型（i3dm）切片
复合（cmpt）瓷砖
在Web服务器上的
1、先初始化地图
    initMap() {
      mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA'
      this.map = new mapboxgl.Map({
new mapboxgl.Map()
mapboxgl.accessToken = accessTokenMap;
self.map = new mapboxgl.Map({
  container: this.$refs.basicMapbox,
  style: sysStyle,
  center: sysAreaCenter, // 设置地图
				
在mapbox-gl的开发中，除了默认的地图动态效果，可以通过两种方式增加地图中的显示效果，一是修改mapboxg-gl的源代码，另外就是通过加载自定义图层（CustomLayer）的方式，CustomLayer上可以以webgl的方式实现，也能够以html5 canvas形式去实现。
下边简单的以代码形式展示地图上的–动态闪光圆环效果：
//定义着色器代码
```javascript
const vertexSource =		
`uniform mat4 u_matrix;
				
在mapbox-gl过程中，当现有的图层效果不能满足实现效果时，可以使用自定义图层，关于CustomLayer  API的官方说明：
https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface
mapbox-gl开发：deck.gl轨迹图效果，deck.gl叠加在mapbox-gl上的图层也是通过CustomLayer实现的。
CustomLayer上可以以webgl的方式实现，也能够以html5 canvas形式去实现
				
近期公司准备用mapboxgl弄在线制图系统..由于对矢量图层的大量渲染及加载等选型mapboxgl。
官网API地址：https://docs.mapbox.com/mapbox-gl-js/api/
大致了解API及示例程序之后，为了尽快熟悉想实现哪些效果，建议在Mapbox Studio里面自己自行配置想要的效果，然后在项目分享下导出json文件查看其属性再进行本地代码运行加载。
Mapbox Studio新建地址：https://studio.mapbox.com/
本地离线化
                    CSDN-Ada助手: 
                    恭喜您写了第9篇博客！标题看起来很有意思，我非常期待阅读关于如何在内网搭建npm私服的内容。您的博客一直给我们带来很多有用的技术知识，真的很感谢您的持续创作。
在下一步的创作中，我想提个建议。或许您可以分享一些关于私服的高级配置和优化技巧，这样我们可以更好地理解如何在内网环境中进行npm包的管理。当然，这只是一个建议，希望对您的创作有所启发。再次感谢您的分享，期待您更多的精彩文章！