vue3 可视化数据大屏 外籍人员管理

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

id

218

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:vue3 数据可视化大屏 外籍人员管理

动态效果

外籍人员管理

国籍分布

使用饼状图展示国籍分布

男女分布

使用进度条展示男女分布

年龄分布

使用折线图展示年龄分布

居住时长分析

使用柱状图展示居住分析

当前服务事项

使用表格展示当前服务事项

政策信息

使用列表展示政策信息

关键卡片数据

cesium3d楼栋渲染

使用cesium渲染小区楼栋，并自动轮播展示各个楼栋下的数据，可以点击对应楼栋展示对应楼栋信息。

cesium通过geoJson渲染立体楼栋

今天我们来记录如何获取geoJson以及渲染geoJson数据为楼栋。

获取geoJson数据

这里我们使用到了阿里云的边界生成器 .

我们找到我们想要的小区放大地图到最大，这样我们就可以看到楼栋的轮廓了，

我们通过多边形工具，将大楼轮廓勾勒出来，这样就可以获取到这个大楼的轮廓了，接下来我们导出geoJson数据，然后增加字段，我们手动查询这个小区各个楼栋的高度。

然后我们将获取到的楼栋高度回填到geoJson中的height,这样我们的楼栋数据就大概成型了。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": 14969,
      "properties": {
        "_draw_type": "fill",
        "name": "1座",
        "height": 46
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              113.14957777,
              22.98884755
            ],
            [
              113.14990915,
              22.9888465
            ],
            [
              113.14990857,
              22.98868735
            ],
            [
              113.14957397,
              22.98868732
            ],
            [
              113.14957299,
              22.98868911
            ],
            [
              113.14957777,
              22.98884755
            ]
          ]
        ]
      },
      "bbox": [
        113.14957299,
        22.98868732,
        113.14990915,
        22.98884755
      ]
    }
  ]
}

关键代码

<template>
  <div class="home">
    <cesiumMap></cesiumMap>
    <top title="小区外籍人员管理数据可视化" class="wow fadeInDown" data-wow-delay="0.2s"></top>
    <div class="zhezhaoLeft" ref="zhezhaoLeft">
    </div>
    <div class="zhezhaoRight" ref="zhezhaoRight"></div>
    <div class="homeMain">
      <div class="homeMainLeft">
        <div class="item1">
          <item name="国籍分布" :duration="0.5" :delay="0">
            <item1></item1>
          </item>
        </div>
        <div class="item1">
          <item name="男女分布" :duration="0.5" :delay="0.5">
            <item2></item2>
          </item>
        </div>
        <div class="item1">
          <item name="年龄分布" :duration="0.5" :delay="1">
            <item3></item3>
          </item>
        </div>
      </div>
      <div class="homeMainCenter">
        <div class="item0">
          <item7></item7>
        </div>
        <div class="item1" ref="containerRef">
        </div>
      </div>
      <div class="homeMainRight">
        <div class="item1">
          <item name="居住时长分析" :duration="0.5" :delay="0">
            <item4></item4>
          </item>
        </div>
        <div class="item1">
          <item name="当前服务事项" :duration="0.5" :delay="0.5">
            <item5></item5>
          </item>
        </div>
        <div class="item1">
          <item name="政策信息" :duration="0.5" :delay="1">
            <item6></item6>
          </item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import top from "./components/top/index.vue"
import item from "./components/item/index.vue"
import item1 from "./components/item1/index.vue"
import item2 from "./components/item2/index.vue"
import item3 from "./components/item3/index.vue"
import item4 from "./components/item4/index.vue"
import item5 from "./components/item5/index.vue"
import item6 from "./components/item6/index.vue"
import item7 from "./components/item7/index.vue"
import cesiumMap from "@/view/components/cesiumMap/index.vue"
import WOW from "wow.js"
import gsap from 'gsap'
const containerRef = ref(null)
onMounted(() => {
  const wow = new WOW({})
  wow.init()
})
</script>

更多可视化大屏实例

酷炫的可视化数据大屏案例

获取楼栋轮廓数据

cesium通过geoJson渲染立体楼栋

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

代码为vue3框架vue2写法

纯前端项目数据基于mockjs模拟实现

虚拟产品一经售出 概不退款请谅解