Question

Mapbox 与 L7框架

我们可以在mapbox基础上扩展 L7框架的能力，使mapbox的功能更加强大

L7是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架

点击[AntV L7 官方文档]查看使用L7提供的功能

以下是简单的L7结合mapbox的集成代码：

 <div id="map"></div>

import { Scene, Mapbox } from "@antv/l7"
import mapboxgl from "mapbox-gl";
// 首先创建mapbox地图
mapboxgl.accessToken = "pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA"
const map = new mapboxgl.Map({
    container: 'map',
    center,
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom: 16
})

// 实例化L7提供的场景
const l7Scene = new Scene({
    id: 'map',
    logoVisible: false,
    // 这里提供mapbox的地图
    map: new Mapbox({
        mapInstance: map
    })
})

按照上述代码，在mapbox地图上就可以使用L7提供的能力了。

更加详细的代码请参考源码示例中 src/L7 文件夹的代码,点击查看：[github]/ [gitee]

mapbox 与 deck.gl

deck.gl是一个webgl支持的框架，用于对大型数据集进行可视化探索性数据分析。

点击 [deck.gl文档]查看使用说明

deck.gl 可以做到与mapbox无缝衔接,集成方法可以看[@deck.gl/mapbox模块的使用文档]

也可以通过查看示例源码中的src/deckgl文件夹 查看deck.gl是如何在mapbox-gl 中使用的(每一个TS文件代表一个单独的示例),

前往[github]/ [gitee]查看源码。

mapbox 与 three.js

因为mxdraw库是基于three@0.113.2进行二次开发的(因为对源代码进行了一些修改，建议只使用three@0.113.2这个版本)。

添加的CAD图纸本质上是由three.js的物体对象构成的，所有我们也可以添加其他的three.js的物体对象。

点击 [three.js中文文档] 或者 [three.js官方文档] 查看具体API使用说明

在示例源码中的src/mxthree 文件夹中也提供了一些写好的物体对象加载到mapbox地图中的示例代码

可以通过在 [github]或者 [gitee] 查阅具体的代码实现