mapbox加载全球3D建筑

这篇具有很好参考价值的文章主要介绍了mapbox加载全球3D建筑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本案例使用Mapbox GL JavaScript库进行加载全球3D建筑。

1. 引入 CDN 链接

<!-- 1.引入CDN链接 -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
  rel="stylesheet"
/>

2. 创建地图

我们创建了一个Mapbox GL JS地图实例,设置了地图的容器、默认的地图风格、中心点坐标、地图级别、地图俯仰角、地球旋转角度以及启用抗锯齿功能。

const map = new mapboxgl.Map({
  container: "map", //地图容器
  style: "mapbox://styles/mapbox/light-v11", //地图样式
  center: [-74.0066, 40.7135], //地图中心
  zoom: 15.5, //缩放级别
  pitch: 45, //地图俯仰角
  bearing: -17.6, //地图旋转角度
  antialias: true, //启用抗锯齿功能
});

3. 监听地图加载完成事件

3.1. 获取地图的样式中的图层

const layers = map.getStyle().layers;

3.2. 查找图层

查找图层中类型为symbol并且有text-field属性的图层。

// 3.2 查找图层
const labelLayerId = layers.find(
  (layer) => layer.type === "symbol" && layer.layout["text-field"]
).id;

3.3. 添加三维建筑图层

将三维建筑数据层添加到地图中,并应用一些样式来表现数据。

  • 首先,代码定义了一个图层对象,包括所需的属性,如 ID、数据源、图层名称、过滤器、类型和最小缩放级别。
  • 接着,为图层对象定义了一个 paint 属性,用于定义图层的样式。这里的样式包括填充颜色的透明度(opacity)、三维建筑的高度和基线。
  • 使用 "interpolate" 表达式来平滑地过渡效果,当用户缩放地图时,三维建筑的高度和基线会随着地图的放大而增加。
  • 最后,将图层对象添加到地图中,并指定标签层labelLayerId
// 3.3 添加三维建筑图层
map.addLayer(
  {
    id: "add-3d-buildings",
    source: "composite",
    "source-layer": "building",
    filter: ["==", "extrude", "true"],
    type: "fill-extrusion",
    minzoom: 15,
    paint: {
      "fill-extrusion-color": "#aaa",

      // Use an 'interpolate' expression to
      // add a smooth transition effect to
      // the buildings as the user zooms in.
      // 图层高度
      "fill-extrusion-height": [
        "interpolate",
        ["linear"],
        ["zoom"],
        1,
        0,
        8,
        ["get", "height"],
      ],
      // 离地高度
      "fill-extrusion-base": [
        "interpolate",
        ["linear"],
        ["zoom"],
        1,
        0,
        8,
        ["get", "min_height"],
      ],
      "fill-extrusion-opacity": 0.9,
    },
  },
  labelLayerId
);

4. 演示效果

mapbox加载全球3D建筑,mapbox,3d,swift,开发语言,arcgis,webgl文章来源地址https://www.toymoban.com/news/detail-843068.html

5. 代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 1.引入CDN链接 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <title>加载全球3D建筑</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      // 2.创建地图
      window.onload = () => {
        // 注册token
        mapboxgl.accessToken =
          "pk.eyJ1IjoiY2hlbmdjaGFvODg2NiIsImEiOiJjbGhzcWowMHUwYTNyM2VwNXZhaXhjd3Q4In0.FEh2q7sEW88Z1B5GcK_TDg";
        // 初始化地图对象
        const map = new mapboxgl.Map({
          container: "map", //地图容器
          style: "mapbox://styles/mapbox/light-v11", //地图样式
          center: [-74.0066, 40.7135], //地图中心
          zoom: 15.5, //缩放级别
          pitch: 45, //地图俯仰角
          bearing: -17.6, //地图旋转角度
          antialias: true, //启用抗锯齿功能
        });

        // 3.监听地图加载完成事件
        map.on("style.load", () => {
          // Insert the layer beneath any symbol layer.

          // 3.1 获取地图的样式中的图层
          const layers = map.getStyle().layers;
          // 3.2 查找图层
          //   查找图层中类型为symbol并且有text-field属性的图层
          const labelLayerId = layers.find(
            (layer) => layer.type === "symbol" && layer.layout["text-field"]
          ).id;

          // The 'building' layer in the Mapbox Streets
          // vector tileset contains building height data
          // from OpenStreetMap.

          // 3.3 添加三维建筑图层
          map.addLayer(
            {
              id: "add-3d-buildings",
              source: "composite",
              "source-layer": "building",
              filter: ["==", "extrude", "true"],
              type: "fill-extrusion",
              minzoom: 15,
              paint: {
                "fill-extrusion-color": "#aaa",

                // Use an 'interpolate' expression to
                // add a smooth transition effect to
                // the buildings as the user zooms in.
                // 图层高度
                "fill-extrusion-height": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  1,
                  0,
                  8,
                  ["get", "height"],
                ],
                // 离地高度
                "fill-extrusion-base": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  1,
                  0,
                  8,
                  ["get", "min_height"],
                ],
                "fill-extrusion-opacity": 0.9,
              },
            },
            labelLayerId
          );
        });
      };
    </script>
  </body>
</html>

到了这里,关于mapbox加载全球3D建筑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web端3D开发工具包HOOPS,助力建筑服务商6个月打造差异化云端产品!

    我们公司的主要业务是为建筑行业的客户提供集成解决方案和服务,近年来,随着建筑行业对碳排放量的测试和管理越来越重视,建筑行业的客户也对碳排放计算工具的要求更高,他们不再满足仅在本地平台部署该工具,还希望能在云端部署,实现在建筑工地连网即用、多地

    2024年01月18日
    浏览(61)
  • 案例分享 | 3D开发工具HOOPS加速「全球知名矿业软件」可视化创新与突破!

    近日,某全球知名的三维矿业软件公司(以下简称“客户”)与慧都科技携手合作,慧都将联合数字化合作伙伴Tech Soft 3D-HOOPS,为客户注入3D渲染及可视化核心动力,赋能客户产品实现在地质勘探、地质模型可视化等方向的创新与突破,构建强劲的产品竞争力,为矿业发展提

    2024年02月03日
    浏览(50)
  • html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图

    echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap 如果不需要底图样式,可把Scene的style设置为blank 直接上代码了,vue的就不说了,项目是html的 mapbox依赖 L7依赖 body元素 实现

    2024年02月14日
    浏览(52)
  • BlenderGIS插件 城市建筑3D模型自动生成 教程

    目录 一、下载Blender和BlenderGIS 二、解决 No imaging library...报错 三、生成城市3D模型  四、导出模型 本文所需文件可在如下链接下载,或者直接按照博文下载步骤下载  https://download.csdn.net/download/ChaoChao66666/87071901?spm=1001.2014.3001.5501   打开blender官网来下载对应版本的blender(Dow

    2024年02月02日
    浏览(53)
  • 三维GIS开发:利用Cesium加载 M3D 地质体模型(附代码)

    实现步骤 Step 1.  引用开发库 : 本示例引用 local 本地【include-cesium-local.js】开发库,完成此步骤后才可调用三维 WebGL 的功能; Step 2.  创建布局 : 创建 id=\\\'GlobeView\\\' 的 div 作为三维视图的容器,并设置其样式; Step 3.  构造三维场景控件 : 实例化 Cesium.WebSceneControl 对象,完成

    2024年02月10日
    浏览(46)
  • AMRT 3D 数字孪生引擎(轻量化图形引擎、GIS/BIM/3D融合引擎):智慧城市、智慧工厂、智慧建筑、智慧校园。。。

    1、提供强大完整的工具链 AMRT3D包含开发引擎、资源管理、场景编辑、UI搭建、项目预览和发布等项目开发所需的全套功能,并整合了动画路径、精准测量、动态天气、视角切换和动画特效等工具。 2、轻量化技术应用与个性化定制 AMRT3D适用于快速开发数字孪生3D可视化项目、

    2024年04月22日
    浏览(110)
  • 利用ArcGISPro/GeoScenePro从激光雷达数据中提取 3D 建筑物

            在本课程中,您将从激光雷达数据中提取信息。 激光雷达(激光探测及测距)是一项遥感技术,它利用激光对地球表面进行密集采样,以产生高精度的 x, y, z 点测量。 这些点的集合称为点云。         要从激光雷达数据中提取 3D 建筑物形状,您首先需要对点

    2024年04月26日
    浏览(47)
  • vue html 百度地图3D楼 建筑物上颜色 修改颜色

    先看效果图: 引入GL版 JS部分: 用mapvgl.ShapeLayer给3D楼上颜色,实际上就是创建一个3D物体 覆盖原来的物体 coordinates参数为多边形物体的经纬度,比如: 这个建筑, 6个经纬度 按顺序 链接成一个图形,再设置图形的高度 就完成了

    2024年02月16日
    浏览(44)
  • Open3D 实现建筑物点云立面和平面分割提取

    Open3D 实现建筑物点云立面和平面分割提取 点云数据在现实场景中广泛应用,例如建筑物三维重建、智能交通等领域。然而,点云数据量庞大且噪声较多,因此需要对其进行处理和分析。Open3D 是一款开源的跨平台点云处理库,在点云数据预处理、三维重建和可视化等方面有着

    2024年02月07日
    浏览(56)
  • 【unity实战】使用unity制作一个类似Rust的3D生存建造建筑系统(附项目源码)

    配置 配置 效果 https://gitcode.net/unity1/3dbuildsystem 赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的 点赞评论和关注 ,以便我第一时间收到反馈,你的每一次 支持 都是我不断创作的最大动力。当然如果你发现了文章中 存在错误 或者有 更好的解决方法 ,也欢

    2024年02月19日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包