可视化大屏

本项目为开源项目，可拉取代码阅读学习，欢迎互相交流与指正！

🌍开源地址：https://gitee.com/baweari/atmospheric-environment-monitoring-system

项目结构：

xxxxxxxxxx
appCity/
├── .vscode/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   ├── layout/
│   │   │   ├── box_title_icon.png
│   │   │   ├── chart_box_bg.png
│   │   │   ├── chart_center_box_bg.png
│   │   │   ├── container_bg.png
│   │   │   └── header.png
│   │   ├── base.css
│   │   └── main.css
│   ├── pages/
│   │   ├── components/
│   │   │   ├── Bottom1.vue   //设备性能评估区域
│   │   │   ├── Bottom2.vue   //数据分布分析区域
│   │   │   ├── Bottom3.vue   //设备健康度区域
│   │   │   ├── Bottom4.vue   //数据转化漏斗区域
│   │   │   ├── Left1.vue     //实时温度曲线区域
│   │   │   ├── Left2.vue     //设备状态分布区域
│   │   │   ├── Map.vue       //中间地图区域
│   │   │   ├── Right1.vue    //能耗趋势分析区域
│   │   │   ├── Right2.vue    //设备使用率对比区域
│   │   │   └── Title.vue     //智慧城市大气环境检测系统
│   │   ├── index.vue
│   │   └── router/
│   │       └── index.js
│   ├── App.vue
│   └── main.js
└── index.html

集成的三方服务：

1.高德地图 API：

使用前请提前申请高德地图 API Key 🌍高德开放平台：https://lbs.amap.com/

x
const loadMap = () => {
    AMapLoader.load({
        key: "", //申请好的Web端开发者key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            //JS API 加载完成后获取AMap对象
            // 创建地图 
            const map = new AMap.Map(mapBox.value, {
                // viewMode: '2D', //默认使用 2D 模式
                // zoom: 11, //地图级别
                // center: [116.397428, 39.90923], //地图中心点
                // mapStyle: "amap://styles/normal", //设置地图的显示样式

                pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', //地图模式
                mapStyle: "amap://styles/darkblue", //设置地图的显示样式
                rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                zoom: 17, //初始化地图层级
                rotation: -15, //初始地图顺时针旋转的角度
                zooms: [2, 20], //地图显示的缩放级别范围
                center: [116.38,40.09] //初始地图中心经纬度
            });
            const position = new AMap.LngLat(116.38,40.09); //Marker 经纬度
            const marker = new AMap.Marker({
                position: position,
                offset: new AMap.Pixel(5, 10), //以 icon 的 [center bottom] 为原点
            });
            map.add(marker);

        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });
}

2.阿里巴巴 AntV 组件库