Geographic data processing

Basic Concepts of Geographic Data Processing

Geographic data processing refers to the entire process of collecting, storing, analyzing, and visualizing spatial data. In web development, ECharts, as a powerful visualization library, provides robust capabilities for geographic data processing. Geographic data typically includes latitude and longitude coordinates, administrative boundaries, terrain elevation, and other information, which can be sourced from public datasets or professional GIS systems.

Common geographic data formats include:

• GeoJSON: A JSON-based format for geospatial data exchange
• TopoJSON: An extension of GeoJSON that reduces redundancy using topological structures
• Shapefile: A spatial data format developed by ESRI
• KML: A markup language format used by Google Earth

// Example GeoJSON data structure
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Beijing"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [116.05, 39.55],
            [116.75, 39.55],
            [116.75, 40.15],
            [116.05, 40.15],
            [116.05, 39.55]
          ]
        ]
      }
    }
  ]
}

Geographic Data Components in ECharts

ECharts offers various geographic data-related components, with the most core being the geo component and the map series. The geo component is used to create geographic coordinate systems and supports multiple projection methods, while the map series is specifically designed for drawing maps.

Key configuration options for the geo component include:

• map: Specifies the map type, such as 'china' for a map of China
• roam: Enables zooming and panning interactions
• center: Coordinates of the map's center point
• zoom: Initial zoom level
• regions: Customizes region styles

option = {
  geo: {
    map: 'china',
    roam: true,
    center: [104.114129, 37.550339],
    zoom: 1.2,
    regions: [{
      name: 'Guangdong',
      itemStyle: {
        areaColor: '#ff0000'
      }
    }]
  }
};

Types of Geographic Data Visualization

ECharts supports various forms of geographic data visualization, each suited to different analytical scenarios:

1. Heatmap: Displays data density distribution

series: [{
  type: 'heatmap',
  coordinateSystem: 'geo',
  data: [
    [116.40, 39.90, 100],
    [121.47, 31.23, 80],
    // More data points...
  ],
  pointSize: 10,
  blurSize: 15
}]

2. Scatter Plot: Marks specific geographic locations

series: [{
  type: 'scatter',
  coordinateSystem: 'geo',
  symbolSize: 12,
  data: [
    {name: 'Shanghai', value: [121.47, 31.23, 100]},
    {name: 'Beijing', value: [116.40, 39.90, 80]}
  ],
  label: {
    show: true,
    formatter: '{b}'
  }
}]

3. Flow Map: Shows geographic paths and directions

series: [{
  type: 'lines',
  coordinateSystem: 'geo',
  data: [{
    coords: [[116.40, 39.90], [121.47, 31.23]],
    lineStyle: {
      width: 2,
      curveness: 0.2
    }
  }],
  effect: {
    show: true,
    period: 6,
    trailLength: 0.7,
    symbol: 'arrow'
  }
}]

Custom Map Implementation

When built-in maps are insufficient, custom maps can be registered. This requires preparing GeoJSON-formatted data and registering it via the ECharts API.

Implementation steps:

1. Obtain GeoJSON data
2. Register the map
3. Configure chart options

// 1. Load GeoJSON data
$.get('custom-map.json', function(geoJson) {
  // 2. Register the map
  echarts.registerMap('myMap', geoJson);
  
  // 3. Configure the chart
  var option = {
    series: [{
      type: 'map',
      map: 'myMap',
      label: {
        show: true
      },
      data: [
        {name: 'Region A', value: 100},
        {name: 'Region B', value: 200}
      ]
    }]
  };
  
  myChart.setOption(option);
});

Geographic Data Interaction Features

ECharts provides rich interactive features for geographic data to enhance user experience:

1. Region Highlighting: Emphasizes regions on hover

series: [{
  type: 'map',
  map: 'china',
  emphasis: {
    label: {
      color: '#fff'
    },
    itemStyle: {
      areaColor: '#389BB7'
    }
  }
}]

2. Data Filtering: Achieved via the visualMap component

visualMap: {
  min: 0,
  max: 100,
  text: ['High', 'Low'],
  realtime: false,
  calculable: true,
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  }
}

3. Linked Analysis: Multi-chart linkage

// Initialize two chart instances
var chart1 = echarts.init(document.getElementById('main1'));
var chart2 = echarts.init(document.getElementById('main2'));

// Set up linkage
chart1.on('click', function(params) {
  // Filter data in the second chart based on the clicked region
  chart2.dispatchAction({
    type: 'highlight',
    name: params.name
  });
});

Performance Optimization Strategies

Performance optimization is crucial when handling large-scale geographic data:

1. Data Simplification: Use simplified TopoJSON

// Converting raw GeoJSON to TopoJSON can reduce size by 30%-80%
topojson.presimplify(geojson);
topojson.simplify(geojson, 0.05);

2. Layered Rendering: Load data in chunks

// First load provincial boundaries
echarts.registerMap('china-province', provinceGeoJson);

// Load city-level data only when zoomed in
myChart.on('georoam', function(params) {
  if(params.zoom > 3) {
    loadCityData();
  }
});

3. WebWorker Processing: Offload complex calculations to a Worker

// Main thread
const worker = new Worker('geo-data-worker.js');
worker.postMessage({type: 'process', data: rawData});

// Worker thread
self.onmessage = function(e) {
  if(e.data.type === 'process') {
    const result = heavyProcessing(e.data.data);
    self.postMessage(result);
  }
};

Geographic Data Analysis Case Studies

Practical examples demonstrating ECharts' geographic data processing capabilities:

Case 1: National Air Quality Monitoring

// Data preprocessing
function processAQIData(rawData) {
  return rawData.map(item => {
    return {
      name: item.city,
      value: [...item.coord, item.aqi],
      aqi: item.aqi
    };
  });
}

// Visualization configuration
option = {
  visualMap: {
    min: 0,
    max: 300,
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  series: [{
    type: 'scatter',
    coordinateSystem: 'geo',
    symbolSize: function(val) {
      return Math.sqrt(val[2]) * 2;
    },
    data: processAQIData(rawData)
  }]
};

Case 2: Inter-City Population Migration Analysis

// Process migration data
function processMigrationData(raw) {
  const nodes = raw.nodes.map(node => {
    return {
      name: node.name,
      value: node.value,
      coord: node.coord
    };
  });
  
  const links = raw.links.map(link => {
    return {
      from: link.source,
      to: link.target,
      value: link.value
    };
  });
  
  return {nodes, links};
}

// Visualization configuration
option = {
  series: [{
    type: 'graph',
    coordinateSystem: 'geo',
    links: migrationData.links,
    data: migrationData.nodes,
    edgeSymbol: ['none', 'arrow'],
    lineStyle: {
      width: 2,
      curveness: 0.1
    }
  }]
};

Extended Applications of Geographic Coordinate Systems

ECharts' geographic coordinate systems are not limited to traditional maps and can be extended to other spatial scenarios:

1. Indoor Maps: Display building interiors

// Custom floor plan
echarts.registerMap('floor-plan', {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "Polygon",
      "coordinates": [[
        [0,0], [100,0], [100,50], [0,50], [0,0]
      ]]
    }
  }]
});

option = {
  geo: {
    map: 'floor-plan',
    roam: true
  }
};

2. Virtual Scenes: Game or VR environments

// Create a game map coordinate system
option = {
  grid3D: {
    viewControl: {
      autoRotate: true
    }
  },
  geo3D: {
    map: 'custom-3d-map',
    shading: 'realistic',
    light: {
      main: {
        intensity: 1.5
      }
    }
  }
};

3. Astronomical Data: Visualize celestial body positions

// Astronomical coordinate system configuration
option = {
  geo: {
    map: 'star-map',
    projection: {
      project: (point) => [
        Math.cos(point[0]) * Math.cos(point[1]),
        Math.sin(point[0]) * Math.cos(point[1]),
        Math.sin(point[1])
      ],
      unproject: (point) => [
        Math.atan2(point[1], point[0]),
        Math.asin(point[2])
      ]
    }
  }
};