ESMap 城市三維地圖在氣象數據監測的應用 - 智慧城市數字孿生

時間 2021-08-13

標籤 javascript html java echarts 大數據動畫人工智能 3d code orm 欄目 JavaScript 简体版

原文原文鏈接

智慧城市數字孿生簡介

隨着 5G、物聯網、大數據、人工智能等技術的發展與普遍應用，城市的管理模式正在由傳統的二維向三維可視化的模式過渡，智慧城市的內涵在不斷豐富，建設 3D 可視化、智能化的智慧城市是大勢所趨。做爲專業的三維地圖可視化、數字孿生解決方案的服務商，ESMap 致力於構建一站式的數字孿平生臺，基於自主研發的地圖 SDK，打造智慧城市生態鏈。
智慧城市數字孿生地圖效果展現：javascript

本文將爲讀者介紹 ESMap 城市三維地圖在智慧城市的實際應用，對深圳市的氣溫、降水等氣象數據進行實時監測，經過三維地圖的依託，動態展現深圳市的氣象數據。html

地圖初始化

var map = new esmap.ESWorldMap({
  container: document.getElementById('map-container'),
  themeID: 'W2002', //主題ID
  cids: 'esmapcitydemo',
  tileType: 'autonavi',
  token: 'escope',
  center: [12683203.6, 2574401.4],
  maximumTiles: 64,
  loadRoads: true
})

// 初始化場景特效
esmap.ESEffectTool.init({
  onlineEffectThemeId: 'E2001',
  loadRoads: true, // 是否加載特效主題的路網特效
  isSetRoomEffect: true, // 是否設置瓦片建築特效
  isShowSkybox: true, // 是否展現天空盒
  isSetModelEffect: false, // 是否設置模型特效
  isOpenScreenEffect: true, // 是否開啓全屏特效
})

// 初始化地圖瓦片
esmap.ESTileMap.init({
  scaleLevel: 16, // 地圖默認初始化縮放等級
  scaleLevelAnimate: false, // 地圖初始化後層級變化動畫, { targetLevel(目標縮放層級), duration(過渡時間) }
  openTileClick: true, // 是否開瓦片地圖點擊
  isShowWater: false // 是否應用瓦片水域特效
})

（因爲篇幅緣由，這裏僅展現了部分初始化代碼，想了解更多開發過程請前往 ESMap 在線開發）java

智慧城市數字孿生地圖效果展現：echarts

能夠看到，初始化的地圖很是炫酷。ESMap 城市三維地圖目前支持很是多種特效，路網特效、天空盒特效、水域特效等等，示例中的夕陽天空盒子正是其中的一種，若是想要在線體驗更多炫酷的地圖效果，歡迎前往 ESMap 資源廣場。大數據

地圖中加入氣象觀測點

爲了可以實時監測深圳市的氣象數據，在深圳市不一樣區域鋪設氣象觀測物理設備，實時獲取該區域的氣象數據，同時在地圖中加入對應的氣象觀測點，經過地圖快捷獲取在深圳市安置的物理設備的氣象數據。動畫

使用 ESMap 的 EffectMarker 向地圖中建立氣象觀測點。人工智能

let marker = new esmap.ESEffectTool.EffectMarker(esmap.ESMarkerType.CYLINDER_SPREAD, {
  x: 12682109.602751743,
  y: 2574070.986672658,
  height: 40, // 離地板高度
  radius: 150, // 半徑
  scanHeight: 120, // 掃描高度
  isShine: true, // 是否發光（須要開啓開啓全屏特效）
})

效果以下：3d

經過物理設備獲取到的氣象數據，而後使用圖表展現獲取到的數據，就可以實時展現深圳市的氣象數據了。code

智慧城市數字孿生數據展現

爲了展現深圳的氣溫、降水等氣象數據，這裏搭配使用 Echarts 的儀表盤、折線圖和柱狀圖，下面是氣溫、風力儀表盤的代碼：orm

// 儀表盤
let myChart_3 = echarts.init(document.querySelector('.gauge'))
let option_3 = {
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 40,
      startAngle: -30,
      endAngle: -270,
      progress: {
        show: true,
        width: 14,
      },
      radius: '60%',
      center: ['30%', '40%'],
      axisLine: {
        lineStyle: {
          width: 14,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        distance: -12,
        length: 8,
        lineStyle: {
          width: 2,
          color: '#5F9EA0',
        },
      },
      itemStyle: {
        color: '#43EDFF',
        opacity: 0.6,
        shadowColor: 'rgba(0,138,255,0.45)',
        shadowBlur: 10,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: 'rgba(114,198,233,0.8)',
        },
      },
      axisLabel: {
        show: false,
      },
      anchor: {}, // 中心圓點
      title: {
        show: false,
      },
      detail: {
        valueAnimation: true,
        fontSize: 14,
        color: '#99CCFF',
        offsetCenter: [0, -10],
      },
      data: [
        {
          value: 33.5,
        },
      ],
    },
    {
      type: 'gauge',
      min: 0,
      max: 17,
      startAngle: 150,
      endAngle: -90,
      progress: {
        show: true,
        width: 14,
      },
      radius: '60%',
      center: ['70%', '40%'],
      axisLine: {
        lineStyle: {
          width: 14,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        distance: -12,
        length: 8,
        lineStyle: {
          width: 2,
          color: '#5F9EA0',
        },
      },
      itemStyle: {
        color: '#43EDFF',
        opacity: 0.6,
        shadowColor: 'rgba(0,138,255,0.45)',
        shadowBlur: 10,
        shadowOffsetX: 2,
        shadowOffsetY: 2,
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: 'rgba(114,198,233,0.8)',
        },
      },
      axisLabel: {
        show: false,
      },
      anchor: {}, // 中心圓點
      title: {
        show: false,
      },
      detail: {
        formatter: '{value}',
        valueAnimation: true,
        fontSize: 14,
        color: '#99CCFF',
        offsetCenter: [0, -10],
      },
      data: [
        {
          value: 4,
          name: '風力等級',
        },
      ],
    },
  ],
}

氣溫、風力儀表盤效果展現：

因爲溫度折線圖，溼度柱狀圖部分代碼相似，這裏就不貼出代碼部分，直接展現實現效果。

溫度折線圖（展現整年每月的平均高溫和平均低溫）：

溼度柱狀圖 + 折線圖（展現整年每月的平均溼度和平均降雨量）：