Mapbox添加model图层

贴个群号

WebGIS学习交流群461555818,欢迎大家

效果图在这里插入图片描述

源码

经常关注mapbox的朋友会发现,3.0版本之后,mapbox的api里更新了一个model图层
在这里插入图片描述
但是呢,却没有提供model有关的api,让我们摸不着头脑,到底该如何去用这个类型的图层,当然现在大家版本可能还都停留在2.15,3.0大版本依然存在一些问题并不稳定,很多朋友还没有用到这个,今天就探索一下,该如何去使用这个图层。
首先我们找不到官网的例子,但是呢,新版本的mapbox的底图里面会自带了很多东西,比如一些建筑、一些特殊的建筑,有心人发现了也存在一些树木。这些看起来可能都和model有关,那么我们可以打印一下全部图层查看一下。使用map.getStyle()可以看到所有图层,大家可以发现3.0版本后的mapbox,打印出来的东西和之前的不一样,这个今天就不说了。
在这里插入图片描述
然后现在底图里面的内容都在imports里面,在里面我们可以找到type类型是model的图层,会发现tree,也就是树木图层确实是使用这个model的,然后我们仔细观察他的图层配置,会发现他的数据源来自于矢量切片,看api里写的其实如果是geojson源的话那么也是可以的。那我们就很容易想到,矢量切片的话,那是不是意味着其实就是一个点,然后这个点使用一个树木的三维模型来代替,渲染出来的。然后查看官网api,里面有一个很重要的就是model-id,很明显这个就是用来指定我们的model-id的,然后我们又本能的想到,这个是不是就和line-pattern一样,需要注册一个树木的模型,然后再用这个来指定一下id就可以了。

然后答案就呼之欲出了,现在的重点就是,如何注册一个model??

搜索官网。。没有。使用和底图中tree一样的model-id可行吗?然后我试了下也不行,但是他很明显是有的啊,于是我们查看源码,发现了…
在这里插入图片描述
可恶! 你的源代码里面明明这些api都齐全了,为什么不暴露出来给用户使用呢!!
然后我们使用addModel方法添加了一下图层,就完美解决了。

不过事情到这里还没有结束,我发现一旦把模型的高度拉高到超越视角,那么旋转地图,模型就会满天飞~ 可能是这些api尚存在bug吧,官方没有推出来。就这样。
源代码里面还有这样一种注册模型的写法,可能是废弃写法。
在这里插入图片描述

### 回答1: Mapbox是一种用于构建交互式地图和应用程序的地图平台,支持加载gltf(即gltf格式的3D模型)来增强地图的可视化效果。 要在Mapbox中加载gltf模型,需要几个步骤。首先,需要在Mapbox Studio中创建地图样式,并添加图层以显示地图。接下来,通过使用Mapbox的JavaScript API来加载gltf模型。 Mapbox JavaScript API提供了一个名为“3D模型层”的功能,可用于加载3D模型。通过使用该功能,可以在地图上显示小车、飞机等3D模型,构建虚拟现实体验的地图。要加载gltf模型,需要使用Turf模块来将经纬度转换为3D坐标,然后在地图上添加3D模型层。 在加载3D模型的过程中,还可以通过Mapbox的API来控制模型的旋转、缩放、颜色等属性。此外,还可以在加载gltf模型时添加动画效果,使3D模型在地图上动态显示。 总之,Mapbox支持加载gltf模型以增强地图的可视化效果,这需要使用Mapbox Studio创建地图样式,并使用Mapbox JavaScript API来加载3D模型层。通过加载gltf模型,可以构建更具交互性和虚拟现实体验的地图。 ### 回答2: Mapbox是一款流行的地图开发工具包,它允许用户使用自己的数据创建交互式地图。而GLTF是一种用于交换3D模型的文件格式,可以保存3D模型的几何、材质、动画和场景信息。在Mapbox中,可以通过使用GLTF文件来将3D模型集成到自己的地图中。 要加载GLTF文件到Mapbox,需要使用Mapbox的GLTF插件。该插件可以将GLTF格式的3D模型加载到Mapbox地图上,并将其渲染为网格。使用该插件,用户只需为3D模型上传其GLTF文件,并指定其位置(使用经纬度坐标)和尺寸即可。 为了确保高效的加载和渲染,Mapbox的GLTF插件还支持将3D模型拆分成多个小部件。这有助于提高应用程序的性能,因为它使只有在3D模型被需要时才会被加载的小部件。同时,Mapbox的GLTF插件还允许用户自定义3D模型的纹理和效果,以便在渲染过程中进行加工。 综上所述,加载GLTF文件到Mapbox非常简单。只需上传GLTF文件并使用Mapbox的GLTF插件即可将3D模型显示在自己的地图中。 ### 回答3: Mapbox是一种地图处理工具,可以与gltf(.glTF格式)一起使用,以在地图上添加3D对象。 在Mapbox Studio中,需要导入gltf文件,并在图层地图-studio中将其添加图层。然后可以使用Mapbox GL JS API在Web应用程序中加载。在代码中使用Mapbox GL JS库`mapbox-gl`,将图层添加到地图上,并将gltf加载到图层上。使用Mapbox GL JS的addLayer方法在地图上创建新的图层对象,然后使用图层的setSourceData方法设置gltf数据源。最后调用地图实例的addLayer方法将图层添加到地图上。 例如,以下代码段可以将gltf文件转换为data URI,然后使用mapbox gl js将其添加到地图上: ``` fetch('mymodel.gltf') .then(function (response) { return response.arrayBuffer(); }) .then(function (arrayBuffer) { // Use the `load` method exposed by `gltfjsx` to convert the `.gltf` array buffer to JSX const jsx = gltfjsx.load(arrayBuffer); // Serialize the JSX to a data URI containing the serialized gltf JSON const dataURI = `data:model/gltf+json;base64,${ btoa(JSON.stringify(jsx)) // Convert the serialized JSON to base64 }`; // Add the layer to the map map.addLayer({ id: 'myModelLayer', type: 'custom', renderingMode: '3d', // IMPORTANT: Use 3D rendering mode for custom layers onAdd(map, gl) { // Create a new THREE.Scene, THREE.PerspectiveCamera, and THREE.WebGLRenderer and add to `gl.domElement` const renderer = new THREE.WebGLRenderer({ alpha: true, canvas: map.getCanvas() }); renderer.autoClear = false; // IMPORTANT: Disable autoClear for best performance const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, map.getCanvas().width / map.getCanvas().height, 1, 1000); camera.position.set(10, 10, 10); camera.lookAt(new THREE.Vector3()); // load gltf model gltfLoader.load(dataURI, gltf => { // Add the model's scene graph as a child of THREE.Scene scene.add(gltf.scene); }); // bind to render function map.on('render', () => { renderer.state.reset(); // Resets the GL state to defaults, for best performance renderer.render(scene, camera); // Render the scene using the THREE.WebGLRenderer map.triggerRepaint(); // Trigger a repaint of the map }); } }); }); ``` 在这个例子中,我们通过从服务器上获取.gltf文件,使用`gltfjsx`库来把数据转换成JSX, 然后进行序列化并将它转换成数据URI。接下来,我们使用Mapbox GL JS 的` addLayer`方法将gltf作为一个自定义图层添加到地图。 总之,在Mapbox中加载gltf需要使用Mapbox Studio中的图层地图工具,将gltf添加图层并使用Mapbox GL JS API在Web应用程序中加载。通过JavaScript代码,地图上的图层可以关联3D模型的数据源,并将其显示在地图上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值