Mapbox加载3dtiles

标签： 无 分类： 未分类 创建时间：2022-03-03 10:04:48 更新时间：2025-01-17 10:39:22

前言

参考文章:
1.Maps Tile 相关计算 讲了地图瓦片的计算，包括墨卡托投影、地面分辨率（Ground Resolution）、地图比例尺（Map Scale）

1.deck.gl

后来在前辈那里得到了一份源码，使用的是deck.gl这个库结合了mapbox进行了3dtile的加载，这里主要使用了Tile3DLayer、MapboxLayer和CesiumIonLoader，但是存在的问题，就是同一份模型用deck.gl加载和用Cesium.js加载出来的模型的颜色不一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<template>
  <div class="mapbox">
    <div class="map" :id="mapId"></div>
  </div>
</template>

<script>
import {Tile3DLayer} from '@deck.gl/geo-layers';
import {MapboxLayer} from '@deck.gl/mapbox';
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
import mapboxgl from 'mapboxgl';

export default {
  name: 'App',
  data() {
    return {
      mapId: Math.random().toString(36).substr(2)
    };
  },
  mounted() {
    var map = new mapboxgl.Map({
      container: this.mapId,
      style: 'mapbox://styles/mapbox/dark-v10?optimize=true',
      center: [120.23962170000004, 30.233723885201944],
      zoom: 15.62,
      bearing: 0,
      pitch: 0,
      hash: true
    });
    let ION_ACCESS_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWMxMzcyYy0zZjJkLTQwODctODNlNi01MDRkZmMzMjIxOWIiLCJpZCI6OTYyMCwic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2Mjg2NjI3M30.1FNiClUyk00YH_nWfSGpiQAjR5V2OvREDq1PJ5QMjWQ";

    map.on('load', function() {
      const tile3dLayer = new MapboxLayer({
        type: Tile3DLayer,
        id: 'tile-3d-layer',
        data: 'http://localhost:8588/deck-gl/Data/tileset.json',
        loader: CesiumIonLoader,
        loadOptions:{
          tileset: {
            throttleRequests: false
          },
          'cesium-ion': { accessToken: ION_ACCESS_TOKEN }
        }
      });
      map.addLayer(tile3dLayer);
    });
  },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.mapbox {
  position: relative;
  width: 100%;
  height: 100%;

  .map {
    width: 100%;
    height: 100%;
  }

  .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
    margin: 0 10px 64px 0;
    float: right;
    box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.1);
  }
}
</style>
参考文章:
1.cesium-ion-loader
2.Mapbox使用deck.gl添加点云数据 这里的CesiumIonLoader中loadOptions，有一个参数 ‘cesium-ion’: { accessToken: ION_TOKEN }，我用自己的ION_TOKEN 不起作用，使用这里的Token倒是可以使用了。
3.Mapbox + deck.gl | Uber如何做地理信息数据可视化？（附案例源码）
4.deck.gl
5.loaders.gl
6.Mapbox加载Cesium 3dtiles的实践 使用deck.gl的Tile3DLayer
7.maptalks.mapboxgl加载 .dae 3D模型,摄像头悬浮
8.谈谈Loader.gl加载3dtile

2.NASA的TilesRenderer

参考文章:
1. Mapbox五毛特效-加载倾斜摄影 加载 3dtiles 是用的 NASA 的 TilesRenderer 这个开源库，效率比 deck.gl 要好点

3.自定义图层实现

参考文章:
1. Geodan /mapbox-3dtiles 使用自定义图层实现的mapbox加载3dtiles
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 前言
  2. 2. 1.deck.gl
  3. 3. 2.NASA的TilesRenderer
  4. 4. 3.自定义图层实现
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文