点描法地图
上一篇
打包图
下一篇
堆叠面积图
Loading...
点描法地图是一种通过在地理地图上分布密集的点来表示数据分布密度和模式的地理可视化方法。每个点通常代表一定数量的统计单位(如人口、经济活动、农业产量等),点的分布密度直观反映了数据在地理空间上的集中程度和分布特征。
点描法地图最大的优势在于能够直观地展示数据的空间分布模式,通过点的密集程度可以快速识别数据的聚集区域和稀疏区域。与分级统计图相比,点描法地图能够更细致地展示数据在地理空间内的连续分布特征,避免了行政区划边界对数据展示的影响。
点描法地图广泛应用于人口分布分析、经济活动密度展示、自然资源分布、疾病传播分析等多种地理数据可视化场景。
英文名:Dot Map, Dot Density Map
图表类型 | 基础点描法地图 |
---|---|
适合的数据 | 包含地理坐标(经纬度)的数据和数值字段 |
功能 | 展示数据在地理空间上的分布密度和模式 |
数据与图形的映射 | 经纬度字段映射到地图位置 数值字段影响点的数量或密度 分类字段可映射到颜色 其他属性可映射到形状 |
适合的数据条数 | 适合中等到大量数据点(通常 100-10000 个点) |
基础点描法地图的主要组成部分包括:
例子 1: 美国机场分布点描法地图
基于真实的美国地图数据和机场位置数据,展示全美机场的地理分布情况。
/*** 基于真实美国地图数据的机场分布点描法地图*/import { Chart } from '@antv/g2';import { feature } from 'topojson';Promise.all([fetch('https://assets.antv.antgroup.com/g2/us-10m.json').then((res) =>res.json(),),fetch('https://assets.antv.antgroup.com/g2/airports.json').then((res) =>res.json(),),]).then((values) => {const [us, airports] = values;const states = feature(us, us.objects.states).features;const chart = new Chart({container: 'container',autoFit: true,});chart.options({type: 'geoView',coordinate: { type: 'albersUsa' },children: [{type: 'geoPath',data: states,style: {fill: '#f5f5f5',stroke: '#d0d0d0',lineWidth: 1,},},{type: 'point',data: airports,encode: {x: 'longitude',y: 'latitude',color: '#1890ff',shape: 'point',size: 2,},style: {opacity: 0.8,},tooltip: {title: 'name',items: [{ name: '机场代码', field: 'iata' },{ name: '经度', field: 'longitude' },{ name: '纬度', field: 'latitude' },],},},],});chart.render();});
说明:
albersUsa
投影适合展示美国本土的地理数据例子 2: 美国人种分布点描法地图
注意:以下示例使用虚构的人种分布数据用于演示目的
/*** 虚构数据:美国人种分布点描法地图* 注意:本示例使用虚构的人种分布数据用于演示*/import { Chart } from '@antv/g2';import { feature } from 'topojson';Promise.all([fetch('https://assets.antv.antgroup.com/g2/us-10m.json').then((res) =>res.json(),),]).then((values) => {const [us] = values;const states = feature(us, us.objects.states).features;// 虚构的美国主要城市人种分布数据(仅用于演示)const ethnicGroups = [{ type: '白人', ratio: 0.6, color: '#1890ff' },{ type: '西班牙裔', ratio: 0.18, color: '#52c41a' },{ type: '非裔美国人', ratio: 0.13, color: '#faad14' },{ type: '亚裔', ratio: 0.06, color: '#f5222d' },{ type: '其他', ratio: 0.03, color: '#722ed1' },];// 美国主要城市坐标(虚构人口数据)const cities = [{ name: '纽约', lng: -74.0059, lat: 40.7128, population: 850 },{ name: '洛杉矶', lng: -118.2437, lat: 34.0522, population: 400 },{ name: '芝加哥', lng: -87.6298, lat: 41.8781, population: 270 },{ name: '休斯顿', lng: -95.3698, lat: 29.7604, population: 230 },{ name: '费城', lng: -75.1652, lat: 39.9526, population: 160 },{ name: '凤凰城', lng: -112.074, lat: 33.4484, population: 170 },{ name: '圣安东尼奥', lng: -98.4936, lat: 29.4241, population: 150 },{ name: '圣地亚哥', lng: -117.1611, lat: 32.7157, population: 140 },{ name: '达拉斯', lng: -96.797, lat: 32.7767, population: 130 },{ name: '圣何塞', lng: -121.8863, lat: 37.3382, population: 100 },{ name: '奥斯汀', lng: -97.7431, lat: 30.2672, population: 95 },{ name: '底特律', lng: -83.0458, lat: 42.3314, population: 67 },{ name: '迈阿密', lng: -80.1918, lat: 25.7617, population: 47 },{ name: '西雅图', lng: -122.3321, lat: 47.6062, population: 75 },{ name: '丹佛', lng: -104.9903, lat: 39.7392, population: 72 },];// 生成虚构的人种分布点数据const ethnicData = [];cities.forEach((city) => {ethnicGroups.forEach((group) => {// 根据人种比例和城市人口计算点数const pointCount = Math.floor((city.population * group.ratio) / 10); // 每10万人一个点for (let i = 0; i < pointCount; i++) {// 在城市周围随机分布点,不同人种有不同的聚集模式let angle = Math.random() * 2 * Math.PI;let distance = Math.random() * 1.5; // 1.5度范围内分布// 模拟不同人种的聚集特征if (group.type === '亚裔') {// 亚裔倾向于聚集在特定区域distance = Math.random() * 0.8;} else if (group.type === '西班牙裔') {// 西班牙裔在南部城市更集中if (city.lat < 35) distance = Math.random() * 0.6;}ethnicData.push({city: city.name,lng: city.lng + Math.cos(angle) * distance,lat: city.lat + Math.sin(angle) * distance,ethnicity: group.type,value: 10, // 每个点代表10万人});}});});const chart = new Chart({container: 'container',autoFit: true,});chart.options({type: 'geoView',coordinate: { type: 'albersUsa' },children: [{type: 'geoPath',data: states,style: {fill: '#f5f5f5',stroke: '#d0d0d0',lineWidth: 1,},},{type: 'point',data: ethnicData,encode: {x: 'lng',y: 'lat',color: 'ethnicity',shape: 'ethnicity',size: 2,},style: {opacity: 0.7,stroke: 'white',lineWidth: 0.5,},scale: {color: {domain: ['白人', '西班牙裔', '非裔美国人', '亚裔', '其他'],range: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'],},shape: {domain: ['白人', '西班牙裔', '非裔美国人', '亚裔', '其他'],range: ['point', 'square', 'triangle', 'diamond', 'cross'],},},tooltip: {title: 'city',items: [{ name: '人种', field: 'ethnicity' },{ name: '人口', field: 'value', valueFormatter: (v) => `${v}万人` },],},},],});chart.render();});
说明:
例子 1: 不适合精确数值比较
点描法地图侧重于显示分布模式和密度,不适合需要精确比较具体数值的场景。如果需要精确对比不同地区的数值大小,应使用分级统计地图或带气泡的地图。
例子 2: 不适合展示连续表面数据
对于温度、降水量等连续变化的表面数据,点描法地图的离散特性无法很好地表现数据的连续性,此时应考虑使用热力图或等高线图。