WebGIS实战开源项目：智慧机场三维可视化（学习笔记）

本文链接：https://blog.csdn.net/weixin_57468559/article/details/142973163

From：新中地

1.简介

智慧机场解决方案，基于数字化大平台，融合AI、大数据、IoT、视频云、云计算等技术，围绕机场“运控、安防、服务”三大业务领域，构建“出行一张脸”及“运行一张图”两大场景化解决方案。

https://gitee.com/iGaoWei/big-data-viewhttps://github.com/antvis/L7 BigDataView: 100+套大数据可视化炫酷大屏Html5模板；包含行业：社区、物业、政务、交通、金融银行等，全网最新、最多，最全、最酷、最炫大数据可视化模板。陆续更新中https://gitee.com/iGaoWei/big-data-view GitHub - antvis/L7: 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine. - antvis/L7https://github.com/antvis/L7 L7 - AntVL7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视化能力。L7 的目标是提供一套地理空间数据可视化框架，易用易扩展，支持海量数据的高性能和 3D 高质量渲染，安全可靠的地理空间数据可视化解决方案。https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html

L7 是由蚂蚁金服 Antv 数据可视化团队推出的基于 webGL的开源大规模地理空问数据可化视分析开发框架。
L7中的L代表 Location ，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
L7 能够满足常见的地图图表，B1系统的可视化分析、以及 GIS，交通，电力，国土农业，城市等领域的空间信息管理，分析等应用系统开发需求。

核心特性

数据驱动可视化展示

数据驱动，灵活数据映射，从数到形，支持丰富的地图可视化类型，更好洞察数据。、

2D，3D 一体化的海量数据高性能渲染

海量空间数据实时，可交互，动态渲染

简单灵活的数据接入

支持 CSV，JSON，GeoJSON 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。

多地图底图支持，支持离线内网部署

屏蔽不同底图之间的差异，用户只需要关注数据层表达，交互，高德地图国内合法合规的地理底图，Mapbox满足国际化业务需求。

支持丰富的图表类型
点图层：气泡图散点图符号地图 3D 柱状地图
线图层：路径地图弧线（支持 2D 弧线、3D 弧线以及大圆航线）等值线
面图层：填充图
热力图：经典热力图

2.简单使用L7

快速上手 · 语雀

快速上手 | AntV L7 地理空间数据可视化引擎

2.1 安装cdn

<script src="https://unpkg.com/@antv/l7'></script>

2.2 初始化地图

按住鼠标右键上下拖动地图，或者ctrl+ 左键

    <!--2、设置L7地图的挂载点-->
    <div id="map">
    </div>
<script>
    /*3、实例化场景*/
    const scene = new L7.Scene({
    /*通过id将实例化的场景挂载到对应的DOM元素之上*/
        id: "map",
        map: new L7.GaodeMap({
            style: "dark",
            center:[114.30,30.50],
            zoom: 14,
            pitch: 0, // 0-90 地图俯仰角
        })
    })
</script>

2.3 Scene参数解释及控件

Scene 属性配置项
Scene基础的地图类,提供地图创建，图层创建，管理等功能

L7 侧重于地理数据的可视化表达
地图层需要依赖第三方地图，第三方地图通过 Scene的 map 属性统一创建

  const scene = new L7.Scene({
        id: "map", // 设置实例场景的挂载点
        map: new L7.GaodeMap({ // map 地图配置项
            style: "dark", // 地图样式 dark|light |normal|blank
            center:[114.30,30.50], // 设置中心点
            zoom: 14, // 放大级别
            minZoom: 14, // 地图最小缩放等级 0~22
            maxZoom: 14, // 地图最大缩放等级 0~22
            pitch: 0, // 俯仰角
        }),
        logoVisible: false, // 控制logo的显示和隐藏
    })

// 需求添加自定义的logo控件
scene.on("loaded",()&#