mapbox、three.js添加自定义3d模型

最新推荐文章于 2025-02-20 14:38:10 发布

封小荷

最新推荐文章于 2025-02-20 14:38:10 发布

阅读量4.6k

点赞数 2

文章标签： mapbox vue 自定义3d模型

本文链接：https://blog.youkuaiyun.com/qq_41186500/article/details/103522675

版权

本文介绍如何在Mapbox地图中添加自定义3D模型，通过Vue实现。首先展示渲染地图的效果，然后详细说明初始化地图的步骤，并强调在添加3D模型时遇到的问题，即必须将地图重新加载样式才能成功显示模型。同时提供了官方3D模型添加的链接，提醒读者加载可能较慢，需要耐心等待。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，先看效果图
在这里插入图片描述

1、先初始化地图
我前面有完整的渲染地图的文章：https://blog.youkuaiyun.com/qq_41186500/article/details/103509936

    initMap() {
   
      mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA'
      this.map = new mapboxgl.Map({
   
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [118.78, 32.04],
        zoom: 10,
        container: 'mapbox'  // 盛放地图的容器id
      })
    },

2、添加自定义模型（正方体）

    initModel() {
   
      var map1 = this.map
      var modelOrigin = [118.78, 32.04]  // 添加模型的地理位置
      var modelAltitude = 0
      var modelRotate = [Math.PI / 2, 0, 0]
      var modelScale = 5.41843220338983e-8
        // transformation parameters to position, rotate and scale the 3D model onto the map
        var modelTransform = {
   
          translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin , modelAltitude).x,
          translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin , modelAltitude

最低0.47元/天解锁文章