preface

In December this year, The State Council issued the Outline of the Regional Integrated Development Plan for the Yangtze River Delta (hereinafter referred to as the Outline), and issued a notice, requiring all regions and departments to earnestly implement it in light of actual conditions.

The outline calls for upgrading infrastructure connectivity, building the Digital Yangtze River Delta, jointly building a new generation of information infrastructure, and jointly promoting smart applications in key areas. We will vigorously develop specialized services based on the Internet of Things, big data and artificial intelligence, and raise the level of integrated development, information-based collaboration and refined management in various fields. We will support the construction of urban brain clusters based on ARTIFICIAL intelligence and 5G Internet of Things in cities where conditions permit, focusing on urban public management, public services and public security. Urban governance and management is not only an important part of the national governance system, but also an important carrier of the global Internet governance system and an important foundation for building a community with a shared future in cyberspace.

Preview the address: www.hightopo.com/demo/city/

The function point

  • Emergency response
  • Traffic conditions
  • City roaming
  • Engineering cases

1. Emergency response

With the acceleration of urbanization, industrialization and informatization, various risks and hidden dangers emerge in an endless stream and emergencies occur frequently, which have evolved from “abnormal” occasional events to “normal” frequent events, directly threatening the safety of public life and property. In order to deal with all kinds of urban emergencies timely, effectively and properly, it is necessary to establish a unified leadership of the command system, constant and unremitting safeguard system and prevention system.

The figure above shows the response process of urban emergency rescue in the face of emergencies, mainly in the way of 2/3D linkage.

Steps: Accident location – > since the launch of the alarm facilities – > power cut off oil and gas block valves – > start – > circumstances around – > to confirm the alarm range – – > > notify the school hospital to emergency personnel – > – > traffic planning – > contingency plans ready – > emergency plan to start the trigger – > – > emergency resources site plan ready – > site launch approach – > work – > staff)

Implementation idea: First group the models, tag the corresponding primions, use HT.default.startanim () to complete the animation effect of each step, and then splice the animation to achieve the 3D animation effect shown in the figure above. As for the linkage of the 2D step display panel on the right, hT. js is used in this demo. Ht. DataModel, as the model carrying Data, manages the addition, deletion and event distribution of Data Data. The steps in the 2D panel on the right are also Data one by one. As long as we carry out data binding, at a certain point in the animation execution, we can control the transparency of the pixel through dynamic data modification and other styles to achieve 2/3D linkage. Click the accident location in the demo to jump to another indoor positioning case.

// Accident location animation main code animStep\_1() {
    let process\_01 \= this.main.g2d.dm().getDataByTag("process\_01");
    process\_01.s("opacity", 1);
    let emergencyResponseParent\_1 \= this.main.g3d
        .dm()
        .getDataByTag("emergencyResponseParent\_1"); this.setVisible(emergencyResponseParent\_1, true."children");
    let children \= this.getChildren(emergencyResponseParent\_1);
    children.forEach(i \=> {
        i.s("shape3d.transparent".true);
        i.s("shape3d.opacity", 0);
    }); this.main.anim = ht.Default.startAnim({
        duration: 2000,
        easing: t \=> { returnt; }, finishFunc: () \=> { this.animStep\_2(); }, // The function to call after the animation ends. action: (v, t) => { this.setStepPanel(process\_01, t, 4);if(t <= 0.25) {children\[0\].s("shape3d.opacity", 5 \* Ease.easeOutSine(t));
            } else if(t <= 0.375) {children\[1\].s("shape3d.opacity", 8 \* ease.easeoutsine (t-0.25)); }else if(t <= 0.5) {children\[2\].s("shape3d.opacity", 8 \* ease.easeoutsine (t-0.375)); }}}); }Copy the code

2. Traffic

First above:

In terms of application fields, smart transportation in China is mainly applied in highway traffic informatization, urban road traffic management service informatization and urban public transportation informatization. With the digital transformation, the government takes the initiative to lead the construction of smart cities, which has huge market potential in the future. This function point can more intuitively and effectively reflect the current road traffic situation, so that local governments can manage traffic more effectively and scientifically, and give play to the traffic efficiency of big cities. Conventional 2D renderings are no longer satisfied with current needs. With the development and maturity of big data, cloud computing, 5G, AI, edge computing and other technologies, 3D visualization can provide more intuitive and effective feedback information. Of course, 3D visualization requires a powerful graphics engine. This module is only a simple simulation of traffic conditions, not further expansion.

3. City roaming

Due to the rapid development of computer graphics and software and hardware technology, virtual reality technology has been paid more and more attention by people. The application of virtual reality technology has always been a hot spot in the field of computer application, and the application value of virtual reality technology has been widely recognized. 3D roaming can provide a good user interaction experience, so this demo also shows this feature.

With HT, roaming can be implemented in just a few lines of code. Ht. Shape is an extremely powerful primitive type. To draw a roaming path, use its extended subclass HT. Polyline to draw a three-dimensional space pipe, and then set the eye continuously by obtaining points along the path. The code is as follows:

// Roaming animationroamingAnim() {
    // polyline
    let polyline = this.main.g3d.dm().getDataByTag("polyline");
    this.main.anim = ht.Default.startAnim({
        duration: 15000,
        easing: t => {
            returnt; }, finishFunc: () => {}, // the function called after the animation ends. action: (v, t) => {letlength = this.main.g3d.getLineLength(polyline), offset = this.main.g3d.getLineOffset(polyline, length * v), point = offset.point, px = point.x, py = point.y, pz = point.z; this.main.g3d.setEye( px , py , pz ); this.main.g3d.setCenter(0, 0, 0); }}); }Copy the code

4. Engineering situation

This page mainly shows the engineering situation: bridge (stamp), shield operation (stamp), submarine tunnel (stamp).

This concludes the demo’s function points.

FIG. 1: On the evening of December 12, the construction site of the property development plot supporting The Lucuo intersection of Xiamen Metro Line 2 collapsed, but fortunately no casualties were caused. The accident was suspected to be caused by pipeline rupture.

Picture 2: At about 14:48 PM on March 21, a chemical plant in Xiangshui County ecological chemical Industrial Park exploded. In recent years, add chemical plant explosion, the loss of life, property caused inestimable.

A field of accidents shocking, always remind us to nip in the bud. Water is the source of human life, and with the development of cities, water pollution is becoming more and more serious, water resources supervision and management has become a big problem for urban development, water quality monitoring and flood warning is not timely is directly related to people’s livelihood. And the development of smart water can be very timely and accurate to solve the problem. These accidents would be much less likely if there were better monitoring and warning systems. I will write more articles on smart water and expand on emergency scenarios.