v1.0.0 Now Available

Generate PDF from HTML
with Ease & Precision

A lightweight, high-resolution JavaScript library that converts your HTML into editable, printable PDF documents. No backend required.

Lightweight No heavy dependencies
High-Res Vector quality output
Client-Side Secure & Fast

Why Choose DomPDF.js?

Built for developers who need reliable PDF generation in the browser.

Vector Graphics

Generates true PDF text and vectors, not just screenshots. Text remains selectable and searchable.

CSS Support

Excellent support for CSS styling, including Flexbox, Grid, and custom fonts.

Multi-Page Handling

Automatic page breaking and intelligent content flow management for long documents.

Performance

Optimized rendering engine ensures fast generation even for complex layouts.

Interactive Demo

Try different PDF generation examples

dompdf.js/preview/article
Urban Morphology Research

Barcelona Urban Spatial Evolution Research

Comparative Research on Urban Morphology Based on Multi-Scenario Analysis

1 Research Background and Objectives

Barcelona, as one of the most representative Mediterranean cities in Europe, provides rich case material for urban planning research due to its unique urban form and spatial structure. Since the construction of the Eixample district planned by Ildefons Cerdà in the 19th century, Barcelona's urban development model has attracted much attention. This study aims to explore the spatial morphological changes of the same city under different development paths through multi-scenario analysis methods.

Research Objectives

The core objective of this study is: to generate comparable urban spatial images by controlling variables such as perspective, scale, and lighting, to reveal the profound impact of different development strategies on urban morphology, and to provide visual reference bases for urban planning decision-making.

This study sets up the following main scenarios for comparative analysis:

Classification Framework of Research Scenarios
Scenario Category Specific Scenario Core Features
Baseline Scenario Current Pattern Cerdà Grid Planning, Traditional Mediterranean Urban Form
Density Scenario High-Density Development High-rise Towers, Compact Form, Vertical Growth
Low-Density Development Suburban Sprawl, Single-family Houses, Horizontal Expansion
Transport Structure Scenario Transit-Oriented Concentrated Development along Rail Corridors
Auto-Oriented Wide Roads, Extensive Parking Facilities
Multi-Modal Integration Seamless Connection of Multiple Transport Modes
Policy-Oriented Scenario Green Infrastructure Ecological Corridors, Green Roofs, Sustainable Development
Historical Heritage Conservation Maintaining Traditional Scale, Protecting Urban Fabric
Economic Development Oriented Central Business District, Iconic Towers
Social Equity Oriented Mixed-Income Communities, Affordable Housing

2 Research Methodology

2.1 Scenario Design Framework

This study adopts the Scenario Planning method to explore the impact of different decision choices on urban spatial morphology by constructing multiple possible future development paths. The scenario design is based on the following principles:

  • Internal Consistency: Logical relationships within each scenario remain coherent
  • Contrast Significance: Sufficient differences exist between different scenarios
  • Realistic Possibility: Scenarios are based on existing urban development models
  • Planning Relevance: Scenarios are closely related to contemporary urban planning practices

2.2 Image Generation Specifications

To ensure the comparability of images from different scenarios, this study adopts uniform image generation specifications:

Image Generation Technical Parameters
Parameter Standard Value Description
Perspective 45-degree Isometric View Balancing observation of building facades and plan layout
Scale 10×10 Blocks Approx. 1.5×1.5 km, displaying urban fabric
Lighting Conditions Golden Hour (Sunrise/Sunset) Soft warm lighting, long shadows
Resolution 2K (2048×1536) High-definition detail display
Image Ratio 4:3 Suitable for horizontal urban landscape display
Style Photorealistic Visualization suitable for academic analysis

3 Baseline Scenario: Status Quo Analysis

Barcelona's urban morphology is characterized by the Eixample district planned by Cerdà. Approved in 1859, the plan features a unique octagonal block (manzanas) layout, with each block measuring 113.3m x 113.3m and containing an inner courtyard. The street grid follows a 45-degree diagonal layout, forming the famous chamfered corners.

Baseline Scenario of Barcelona Eixample District
Figure 1: Baseline Scenario of Barcelona Eixample District (View: Northeast, approx. 1.5km x 1.5km)

As seen in Figure 1, typical features of the traditional Eixample district include: uniform building heights of 6-8 stories, a regular grid street system, wide tree-lined central avenues (such as Passeig de Gràcia), and the unique urban landscape formed by building chamfers. This form took shape in the late 19th and early 20th centuries and remains Barcelona's most iconic urban landscape.

Figure 2 shows the typical features of traditional residential areas: 5-7 story apartment buildings, narrow streets, small squares, and mixed-use ground floor spaces. Figure 3 presents the modern development of the coastal area, including the port area reconstructed after the 1992 Olympics, demonstrating the fusion of traditional and modern architectural languages.

Key Indicators of Baseline Scenario
  • Building Density: Approx. 150-200 units/hectare
  • Average Building Height: 20-25m (6-8 stories)
  • Road Network Density: Approx. 18km/km²
  • Green Space Ratio: Approx. 10-15%
  • Land Use Mix: High (Ground floor commercial + Upper floor residential)

4 Density Scenario Analysis

Urban density is one of the core variables affecting urban morphology. This section explores the profound impact of density changes on urban spatial structure through two extreme scenarios: high density and low density.

4.1 High-Density Development Scenario

The high-density development scenario assumes Barcelona adopts a Hong Kong or Manhattan-style development strategy, accommodating population growth through vertical growth rather than horizontal expansion. Under this model, urban building heights increase significantly, and land use efficiency improves substantially.

High-Density Development Scenario 1
Figure 4: High-Density Development Scenario 1: High-rise Tower Clusters (View: Northeast)

Figure 4 shows the typical form of the high-density scenario: 15-20 story residential towers arranged closely, creating a distinct "urban canyon" effect. Spacing between buildings is minimized, significantly affecting street-level sunlight. While this form improves land use efficiency, it also brings challenges in ventilation, lighting, and psychological comfort.

Figure 5 demonstrates the morphological features of a mixed-use high-rise zone: vertical functional zoning with ground floor commercial podiums, mid-level office spaces, and upper-level residential units. Figure 6 presents an extreme high-density scenario where 25-30 story super high-rise buildings form a "sky city," connected by aerial walkways.

4.2 Low-Density Development Scenario

The low-density development scenario assumes Barcelona adopts an American suburban development model, characterized by single-family houses and car-based travel. Under this model, the city expands horizontally, building density decreases significantly, and green space increases markedly.

Low-Density Development Scenario 1
Figure 7: Low-Density Development Scenario 1: Suburban Single-Family Residential Area (View: Northeast)

Figure 7 shows the typical low-density suburban form: 2-3 story single-family houses, each with a private garden and swimming pool. Streets are wide, and the road network uses cul-de-sac designs, prioritizing residential privacy over connectivity. This model has extremely high land consumption rates and low infrastructure service efficiency.

Figure 8 shows a Garden City-style low-density development: 3-4 story townhouses arranged around neighborhood parks, emphasizing community sense and green space. Figure 9 presents the transitional zone features of the urban fringe, with residential clusters scattered among farmland and natural terrain.

4.3 Density Comparative Analysis

Comparison of Key Indicators for Different Density Scenarios
Indicator Baseline Scenario High-Density Scenario Low-Density Scenario
Avg. Building Height 20-25m 60-80m 8-12m
Building Density 150-200 units/ha 500-800 units/ha 20-50 units/ha
Population Density 350-450 persons/ha 1200-2000 persons/ha 50-120 persons/ha
Land Use Efficiency Medium Very High Very Low
Green Space Ratio 10-15% 5-8% 40-60%
Transport Mode Walk + Bus Metro + Walk Car Dominant

5 Transport Structure Scenario Analysis

The transport system is the skeleton shaping urban morphology. Different transport technology choices and investment strategies lead to vastly different urban spatial structures. This section analyzes three transport structure scenarios: Transit-Oriented Development, Auto-Oriented Development, and Multi-Modal Integration.

5.1 Transit-Oriented Development

Transit-Oriented Development (TOD) is a compact development model centered on public transport. This model emphasizes high-intensity, mixed-use development around rail transit stations, achieving sustainable urban growth by reducing reliance on private cars.

Transit-Oriented Development Scenario
Figure 10: Transit-Oriented Development Scenario (View: Northeast)

Figure 10 shows typical TOD features: development density follows a gradient along rail transit lines, with station core areas featuring 8-12 story high-density buildings, gradually decreasing to 4-6 stories outwards. Street design prioritizes walking and cycling, with dedicated bus corridors. This "string of pearls" development form ensures public transport ridership while providing a suitable walking environment.

5.2 Auto-Oriented Development

Auto-Oriented Development (AOD) is a typical model of North American urban development in the second half of the 20th century. This model relies on private cars as the main means of transport, with the urban road system prioritizing vehicle traffic needs.

Auto-Oriented Development Scenario
Figure 11: Auto-Oriented Development Scenario (View: East)

Figure 11 displays significant AOD features: wide multi-lane arterials, large interchanges, strip commercial developments, and extensive surface parking lots. Buildings are set back far from the road line, street interfaces are discontinuous, and the walking environment is poor. This model has low land use efficiency, and tax revenue per unit of land is far lower than the TOD model.

5.3 Multi-Modal Transport System

The Multi-Modal Transport System scenario attempts to balance public transport and car traffic, providing diverse transport choices for different travel needs. This model emphasizes seamless connection and integrated optimization of various transport modes.

Multi-Modal Transport System Scenario
Figure 12: Multi-Modal Transport System Scenario (View: Southeast)

Figure 12 shows the morphological features of a multi-modal transport hub area: medium-to-high density mixed-use development (6-10 stories), integrating metro, bus, bicycle, and walking modes. Street design balances vehicle traffic and pedestrian experience, featuring shared streets (woonerf) and bus priority corridors. This model maintains relatively high development intensity while offering diverse travel options.

Comparison of Features for Different Transport Structure Scenarios
Feature Dimension Transit-Oriented Auto-Oriented Multi-Modal Integration
Development Density High (Station Core) Low Med-High Density
Street Width Narrow (Priority Walking) Wide (Multi-lane) Moderate
Parking Supply Restricted Ample Moderate
Land Use Mix Highly Mixed Single Function Zoning Moderately Mixed
Mode Share Transit 60%+ Car 70%+ Relatively Balanced
Energy Consumption Low High Medium

6 Policy-Oriented Scenario Analysis

Urban planning policies have a decisive influence on urban morphology. This section analyzes urban development scenarios under four different policy orientations: Green Infrastructure, Historical Heritage Conservation, Economic Development, and Social Equity.

6.1 Green Infrastructure Policy

Green Infrastructure Policy places ecosystems and green spaces as the core framework of urban development, emphasizing natural solutions to urban environmental challenges. The urban form under this policy orientation is characterized by abundant green spaces and sustainable infrastructure.

Green Infrastructure Policy Scenario
Figure 13: Green Infrastructure Policy Scenario (View: Northeast)

Figure 13 shows typical features of the Green Infrastructure scenario: extensive green roofs and vertical greening, ecological corridors connecting the city with nature, large central parks and neighborhood green spaces, and Sustainable Urban Drainage Systems (SUDS). Building heights are controlled at 5-8 stories to ensure sufficient sunlight and ventilation. This form significantly improves urban microclimate and biodiversity but may limit development intensity to some extent.

6.2 Historical Heritage Conservation Policy

Historical Heritage Conservation Policy emphasizes protecting the city's historical fabric and cultural values, continuing traditional urban forms and spatial qualities in new developments. The urban form under this policy orientation is characterized by strict height controls and architectural style management.

Historical Heritage Conservation Policy Scenario
Figure 14: Historical Heritage Conservation Policy Scenario (View: East)

Figure 14 demonstrates the morphological features of the heritage conservation scenario: preserved historical buildings are reused through adaptive reuse, new buildings strictly follow traditional scales and materials, maintaining historical street patterns and square spaces. Skyline controls protect historical view corridors, and new developments adopt modest design languages. This model protects the city's cultural identity but may limit the flexibility of modern development.

6.3 Economic Development Policy

Economic Development Policy prioritizes urban competitiveness enhancement and economic growth, attracting investment and talent by building modern business facilities. The urban form under this policy orientation is characterized by iconic high-rise buildings and modern commercial facilities.

Economic Development Policy Scenario
Figure 15: Economic Development Policy Scenario (View: Southeast)

Figure 15 shows typical features of the economic development scenario: a concentrated Central Business District (CBD) with 20-30 story iconic skyscrapers, modern convention centers, five-star hotels, high-end shopping malls, and international corporate headquarters. Buildings adopt contemporary architectural languages, emphasizing visual impact and brand recognition. This model enhances the city's international image and tax base but may lead to social spatial segregation and gentrification.

6.4 Social Equity Policy

Social Equity Policy emphasizes inclusive development and equal opportunity, promoting social integration through mixed-income communities and affordable housing policies. The urban form under this policy orientation is characterized by diverse housing types and comprehensive public service facilities.

Social Equity Policy Scenario
Figure 16: Social Equity Policy Scenario (View: North)

Figure 16 demonstrates the morphological features of the social equity scenario: a mixed layout of 4-10 story diverse building types, including social housing, cooperative housing, and market-rate apartments. Public spaces and community facilities (schools, libraries, health centers) are evenly distributed, ensuring all residents have equal access to public services. This model promotes social integration but may compromise on market efficiency.

Comprehensive Evaluation of Different Policy-Oriented Scenarios
Evaluation Dimension Green Infrastructure Heritage Conservation Economic Development Social Equity
Environmental Sustainability
Economic Vitality
Social Cohesion
Cultural Value
Implementation Feasibility

7 Comprehensive Comparison and Conclusion

Through visual analysis of different development scenarios in Barcelona, this study reveals the profound impact of urban planning decisions on urban morphology. The following provides a comprehensive comparison of different scenarios from multiple dimensions.

Baseline Scenario
Baseline Scenario
High-Density Scenario
High-Density Scenario
Low-Density Scenario
Low-Density Scenario
TOD Scenario
TOD Scenario

As seen from the above comparison, the differences in urban morphology caused by different development strategies are extremely significant. High-density development achieves very high land efficiency through vertical growth but may sacrifice living environment quality; low-density development provides comfortable living conditions but consumes massive land resources; the TOD model achieves a better balance between efficiency and livability.

Main Research Findings
  1. Density is a decisive factor in morphology: Differences in building density directly lead to fundamental changes in urban spatial structure, presenting a continuous spectrum from vertical growth to horizontal expansion.
  2. Transport systems shape the urban skeleton: Transit-oriented and auto-oriented development models have essential differences in spatial morphology, with the TOD model being more suitable for compact urban development.
  3. Policy orientation affects spatial quality: While green infrastructure and heritage conservation policies may limit development intensity, they significantly enhance the cultural and environmental value of urban spaces.
  4. Mixed strategies are more resilient: Single extreme strategies often have obvious defects, while moderately mixing multiple strategies can achieve better comprehensive results.

8 Research Limitations and Outlook

8.1 Research Limitations

This study has the following limitations:

  • Idealization of image generation: AI-generated urban images may be overly idealized and fail to fully reflect complex constraints in reality.
  • Limitation of static perspectives: Single-perspective images struggle to fully display the three-dimensional features and temporal changes of urban space.
  • Lack of quantitative analysis: This study focuses on qualitative visual analysis and lacks precise quantitative indicator calculations.
  • Simplification of socio-economic factors: Scenario designs do not sufficiently consider the complexity of socio-economic processes.

8.2 Future Research Directions

Based on the findings of this study, future research can deepen in the following directions:

  • Construction of multi-dimensional evaluation systems: Establish a comprehensive evaluation system for urban morphology including environmental, economic, social, and cultural dimensions.
  • Dynamic evolution simulation: Simulate the dynamic evolution process of urban morphology under different scenarios based on Cellular Automata or Agent-Based Models.
  • Public participation mechanisms: Explore using visualization technologies to promote public participation and feedback on planning schemes.
  • Empirical verification research: Select typical case cities for empirical comparative research to verify the applicability of scenario analysis.

Through systematic scenario design and visual presentation, this study provides a direct reference for understanding the spatial consequences of urban development decisions. It is hoped that this work can provide useful insights for urban planning practice and academic research.