ESMap 城市三維地圖在車輛管控的應用 - 智慧城市數字孿生

智慧城市數字孿生簡介

上篇文章 介紹了 ESMap 城市三維地圖在氣象數據監測中的應用，本文將介紹城市三維地圖在城市車輛管控的應用。經過三維可視化的方式對城市進行管理，打造智慧城市生態鏈。

智慧城市數字孿生地圖初始化

地圖初始化代碼與上個案例相似：

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 提供了不一樣的主題，不一樣的主題獲得的地圖效果不盡相同。同時能夠經過配置不一樣的初始化參數開啓或者關閉某個特效，從而實現想要的炫酷效果，詳細開發文檔見 ESMap 城市三維地圖開發文檔。

添加車輛管控範圍

爲了能對某個區域的車輛進行統計，在該區域不一樣出入口加入攝像頭，同時在地圖中添加區域特效，展現該區域包括的範圍。

首先獲取該區域的地圖座標集合：

let extentList = [
  // 當前樣式的圍牆組
  {
    id: 'a',
    points: [
      { x: 12681901.013572564, y: 2574538.7276001484 },
      { x: 12682486.238720132, y: 2574393.8242202685 },
      { x: 12682540.885770502, y: 2574281.5394862825 },
      { x: 12682461.872337544, y: 2574005.945539009 },
      { x: 12682268.93947279, y: 2573493.5381797934 },
      { x: 12682041.862700343, y: 2573648.686792482 },
      { x: 12681772.688637828, y: 2573865.4757515583 }
    ]
  }
];

而後使用 ESMap 的 EffectMarker 在地圖中添加區域圍牆特效。

this.extentWall1 = new esmap.ESEffectTool.EffectMarker(esmap.ESMarkerType.EXTENT_WALL, {
  height: 25, // 離地板高度
  color: '#006666',
  wallHeight: 100, // 圍牆高度
  extentList: extentList, // 圍牆點集
  isShine: true, // 是否發光（須要開啓開啓全屏特效）
  // scrollImgUrl: 'image/wall_warning.png', // 滾動貼圖
  scrollClockWise: true, // 是否順時針滾動
  groundColor: '#00FFFF',
  seeThrough: false // 是否穿透物體顯示
});
this.effectLayerWall.addMarker(this.extentWall1);

區域圍牆效果以下：

添加完區域圍牆後，再經過攝像頭返回的數據，統計出車輛的出入狀況、詳細信息，最後使用圖表展現獲取到的數據，就可以實時對城市的車輛進行管控了。

數據展現

爲了展現實時統計車輛進出狀況，這裏使用 Echarts 的折線圖和儀表盤，下面是車輛進出統計折線圖的代碼：

// 折線圖
this.myChart_2 = echarts.init(document.querySelector('.line'))
this.option_2 = {
  color: ['#6666FF', '#00f2f1'],
  tooltip: {
    // 經過座標軸來觸發
    trigger: 'axis',
    confine: true,
    enterable: true, //鼠標是否能夠移動到tooltip區域內
  },
  legend: {
    // 距離容器10%
    right: '10%',
    // 修飾圖例文字的顏色
    textStyle: {
      color: '#4c9bfd',
    },
  },
  grid: {
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    // 去除刻度
    axisTick: {
      show: false,
    },
    // 修飾刻度標籤的顏色
    axisLabel: {
      color: '#ffffff',
    },
    // 去除x座標軸的顏色
    axisLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    name: '千次',
    nameTextStyle: {
      color: '#ffffff',
    },
    axisTick: {
      show: false,
    },
    // 修飾刻度標籤的顏色
    axisLabel: {
      color: '#ffffff',
    },
    // 修改y軸分割線的顏色
    splitLine: {
      lineStyle: {
        color: '#012f4a',
      },
    },
  },
  series: [
    {
      name: '停車車次',
      type: 'line',
      stack: '總量',
      // 是否讓線條圓滑顯示
      smooth: true,
      data: this.lineChartData[0].data[0],
    },
    {
      name: '進入車次',
      type: 'line',
      stack: '總量',
      smooth: true,
      data: this.lineChartData[0].data[1],
    },
  ],
}
this.option_2 && this.myChart_2.setOption(this.option_2)

車輛進出統計（展現該年、季度、月、周的停車車次和進入車次）效果展現：

因爲車輛實時統計儀表盤部分代碼相似，這裏就不貼出代碼部分，直接展現實現效果。

當日車輛實時統計儀表盤：

同時使用定時器實時滾動進出車輛的詳細信息，效果展現以下所示：

實現效果

最終城市車輛管控效果展現以下所示：

總結

以上就是 ESMap 城市三維地圖在城市車輛管控的實際應用。固然，除了氣象數據監測和車輛管控，城市三維地圖在智慧城市中還有更多實用的案例。想要了解更多有關 ESMap 城市三維地圖的案例，歡迎前往 ESMap 資源廣場。