Application of esmap urban 3D map in vehicle management and control - Digital twin of smart city

esmap 2021-08-10 14:25:56 阅读数:912

本文一共[544]字,预计阅读时长:1分钟~
application esmap urban map vehicle

Introduction to smart city digital twin

Last article It introduces ESMap Application of urban 3D map in meteorological data monitoring , This paper will introduce the application of urban 3D map in urban vehicle management and control . Manage the city through three-dimensional visualization , Build a smart city ecological chain .
image

Initialization of smart city digital twin map

The map initialization code is similar to the previous case :

var map = new esmap.ESWorldMap({
container: document.getElementById('map-container'),
themeID: 'W2002', // The theme ID
cids: 'esmapcitydemo',
tileType: 'autonavi',
token: 'escope',
center: [12683203.6, 2574401.4],
maximumTiles: 64,
loadRoads: true
})
// Initialize scene effects
esmap.ESEffectTool.init({
onlineEffectThemeId: 'E2001',
loadRoads: true, // Whether to load the road network special effects of the special effect theme
isSetRoomEffect: true, // Whether to set tile building effects
isShowSkybox: true, // Show sky box
isSetModelEffect: false, // Whether to set model effects
isOpenScreenEffect: true, // Whether to turn on full screen effects
})
// Initialize map tiles
esmap.ESTileMap.init({
scaleLevel: 16, // Map default initialization zoom level
scaleLevelAnimate: false, // Level change animation after map initialization , { targetLevel( Target zoom level ), duration( Transition time ) }
openTileClick: true, // Whether to open tile map or not, click
isShowWater: false // Whether to apply tile water effect
})

Effect display :

image

It can be seen that although the initialization code is similar to the meteorological data monitoring case , But the effect is very different . This is because ESMap Different topics are provided , Different themes get different map effects . At the same time, a special effect can be turned on or off by configuring different initialization parameters , To achieve the cool effect you want , For detailed development documents, see ESMap City 3D map development document .

Add vehicle control range

In order to make statistics on vehicles in a certain area , Add cameras at different entrances and exits in the area , At the same time, add area effects to the map , Show the extent of the area .

First, get the map coordinate set of the area :

let extentList = [
// Fence group of the current style
{
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 }
]
}
];

And then use ESMap Of EffectMarker Add an area fence to the map .

this.extentWall1 = new esmap.ESEffectTool.EffectMarker(esmap.ESMarkerType.EXTENT_WALL, {
height: 25, // Height from the floor
color: '#006666',
wallHeight: 100, // The height of the fence
extentList: extentList, // Fence point set
isShine: true, // Whether it glows ( Need to turn on full screen effects )
// scrollImgUrl: 'image/wall_warning.png', // Scroll map
scrollClockWise: true, // Whether to scroll clockwise
groundColor: '#00FFFF',
seeThrough: false // Whether to penetrate the object shows
});
this.effectLayerWall.addMarker(this.extentWall1);

The effect of area fence is as follows :

image

After adding the area fence , Then the data returned by the camera , Count the access of vehicles 、 Details , Finally, use the chart to show the obtained data , It can control the city's vehicles in real time .

Data presentation

In order to show the real-time statistics of vehicle access , Use here Echarts Line chart and instrument panel , The following is the code of the line chart of vehicle in and out statistics :

// Broken line diagram
this.myChart_2 = echarts.init(document.querySelector('.line'))
this.option_2 = {
color: ['#6666FF', '#00f2f1'],
tooltip: {
// Trigger... Through the coordinate axis
trigger: 'axis',
confine: true,
enterable: true, // Whether the mouse can move to tooltip In the area
},
legend: {
// Distance from container 10%
right: '10%',
// Color to decorate legend text
textStyle: {
color: '#4c9bfd',
},
},
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1 month ','2 month ','3 month ','4 month ','5 month ','6 month ','7 month ','8 month ','9 month ','10 month ','11 month ','12 month '],
// Remove the scale
axisTick: {
show: false,
},
// Decorate the color of the scale label
axisLabel: {
color: '#ffffff',
},
// Remove x The color of the axis
axisLine: {
show: false,
},
},
yAxis: {
type: 'value',
name: ' Thousand times ',
nameTextStyle: {
color: '#ffffff',
},
axisTick: {
show: false,
},
// Decorate the color of the scale label
axisLabel: {
color: '#ffffff',
},
// modify y The color of the axis split line
splitLine: {
lineStyle: {
color: '#012f4a',
},
},
},
series: [
{
name: ' Parking number ',
type: 'line',
stack: ' Total amount ',
// Whether to make the line smooth display
smooth: true,
data: this.lineChartData[0].data[0],
},
{
name: ' Entering train number ',
type: 'line',
stack: ' Total amount ',
smooth: true,
data: this.lineChartData[0].data[1],
},
],
}
this.option_2 && this.myChart_2.setOption(this.option_2)

Vehicle in and out statistics ( Show the year 、 quarter 、 month 、 Weekly parking number and entry number ) Effect display :

image

Due to the vehicle real-time statistics, some codes of the instrument panel are similar , The code is not posted here , Show the effect directly .

Real time vehicle statistics dashboard of the day :

image

At the same time, use the timer to scroll in and out of the vehicle in real time , The effect is shown as follows :

image

Realization effect

The final urban vehicle control effect is shown as follows :

image

summary

That's all ESMap Practical application of urban 3D map in urban vehicle management and control . Of course , In addition to meteorological data monitoring and vehicle control , There are more practical cases of urban 3D map in smart city . Want to learn more about ESMap A case of three-dimensional city map , Welcome to ESMap Resource Plaza .

版权声明:本文为[esmap]所创,转载请带上原文链接,感谢。 https://car.inotgo.com/2021/08/20210810141301859t.html