地理数据处理

地理数据处理基础概念

地理数据处理是指对空间数据进行采集、存储、分析、可视化的全过程。在Web开发中，ECharts作为强大的可视化库，提供了丰富的地理数据处理能力。地理数据通常包含经纬度坐标、行政区划边界、地形高程等信息，这些数据可以来自公开数据集或专业GIS系统。

常见的地理数据格式包括：

• GeoJSON：基于JSON的地理空间数据交换格式
• TopoJSON：GeoJSON的扩展，使用拓扑结构减少冗余
• Shapefile：ESRI开发的空间数据格式
• KML：Google Earth使用的标记语言格式

// 示例GeoJSON数据结构
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "北京市"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [116.05, 39.55],
            [116.75, 39.55],
            [116.75, 40.15],
            [116.05, 40.15],
            [116.05, 39.55]
          ]
        ]
      }
    }
  ]
}

ECharts中的地理数据组件

ECharts提供了多种地理数据相关的组件，最核心的是geo组件和map系列。geo组件用于创建地理坐标系，支持多种投影方式；map系列则专门用于绘制地图。

geo组件的主要配置项包括：

• map：指定地图类型，如'china'表示中国地图
• roam：是否开启缩放和平移交互
• center：地图中心点坐标
• zoom：初始缩放级别
• regions：区域样式自定义

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

地理数据可视化类型

ECharts支持多种地理数据可视化形式，每种形式适用于不同的分析场景：

1. 热力图：展示数据密度分布

series: [{
  type: 'heatmap',
  coordinateSystem: 'geo',
  data: [
    [116.40, 39.90, 100],
    [121.47, 31.23, 80],
    // 更多数据点...
  ],
  pointSize: 10,
  blurSize: 15
}]

2. 散点图：标记特定地理位置

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

3. 流向图：展示地理路径和方向

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'
  }
}]

自定义地图实现

当内置地图不能满足需求时，可以注册自定义地图。这需要准备GeoJSON格式的数据，并通过ECharts API进行注册。

完整实现步骤：

1. 获取GeoJSON数据
2. 注册地图
3. 配置图表选项

// 1. 加载GeoJSON数据
$.get('custom-map.json', function(geoJson) {
  // 2. 注册地图
  echarts.registerMap('myMap', geoJson);
  
  // 3. 配置图表
  var option = {
    series: [{
      type: 'map',
      map: 'myMap',
      label: {
        show: true
      },
      data: [
        {name: '区域A', value: 100},
        {name: '区域B', value: 200}
      ]
    }]
  };
  
  myChart.setOption(option);
});

地理数据交互功能

ECharts提供了丰富的地理数据交互功能，增强用户体验：

1. 区域高亮：鼠标悬停时突出显示

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

2. 数据筛选：通过visualMap组件实现

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

3. 联动分析：多图表联动

// 初始化两个图表实例
var chart1 = echarts.init(document.getElementById('main1'));
var chart2 = echarts.init(document.getElementById('main2'));

// 设置联动
chart1.on('click', function(params) {
  // 根据点击区域过滤第二个图表的数据
  chart2.dispatchAction({
    type: 'highlight',
    name: params.name
  });
});

性能优化策略

处理大规模地理数据时，性能优化至关重要：

1. 数据简化：使用简化后的TopoJSON

// 原始GeoJSON转换为TopoJSON可减少30%-80%体积
topojson.presimplify(geojson);
topojson.simplify(geojson, 0.05);

2. 分层渲染：对大数据集分块加载

// 先加载省级边界
echarts.registerMap('china-province', provinceGeoJson);

// 用户放大后再加载市级数据
myChart.on('georoam', function(params) {
  if(params.zoom > 3) {
    loadCityData();
  }
});

3. WebWorker处理：将复杂计算移入Worker

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

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

地理数据分析案例

通过实际案例展示ECharts地理数据处理能力：

案例1：全国空气质量监测

// 数据预处理
function processAQIData(rawData) {
  return rawData.map(item => {
    return {
      name: item.city,
      value: [...item.coord, item.aqi],
      aqi: item.aqi
    };
  });
}

// 可视化配置
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)
  }]
};

案例2：城市间人口迁移分析

// 处理迁移数据
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};
}

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

地理坐标系扩展应用

ECharts的地理坐标系不仅限于传统地图，还可以扩展到其他空间场景：

1. 室内地图：展示建筑内部空间

// 自定义室内平面图
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. 虚拟场景：游戏或VR环境

// 创建游戏地图坐标系
option = {
  grid3D: {
    viewControl: {
      autoRotate: true
    }
  },
  geo3D: {
    map: 'custom-3d-map',
    shading: 'realistic',
    light: {
      main: {
        intensity: 1.5
      }
    }
  }
};

3. 天文数据：星体位置可视化

// 天文坐标系配置
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])
      ]
    }
  }
};