当前位置：首页 > news >正文

地图可视化实践录：GeoJSON学习

news 2025/11/11 11:08:05

本文给出一些GeoJSON示例和效果图。

概述

本文基于先前完成的综合工程，给出一些GeoJSON的示例和效果，可以了解不同样式的GeoJSON。

文中的例子，可以在代码工程的数据目录目录找到。

GeoJSON介绍

GeoJSON 是一种基于 JSON 的开放标准格式，专门用于表示简单的地理要素（如点、线、面）及其非空间属性。被广泛应用于 Web 地图、GIS 分析和 API 数据交换。

一个最简单的 GeoJSON 文件通常包含以下核心字段：

type (字符串)
- 定义整个 GeoJSON 对象的类型。
- 最常见的是 "FeatureCollection"（要素集合），它包含多个地理要素。
features (数组)
- 当 type 为 "FeatureCollection" 时，此字段必须存在。
- 它是一个数组，包含了所有具体的地理要素对象。

每个要素（Feature）对象包含：

type: 固定为 "Feature"。
geometry (对象): 描述地理形状。
- type: 几何类型，如 "Point"（点）, "LineString"（线）, "Polygon"（面，多边形）。
- coordinates: 定义形状位置的坐标数组，格式为 [经度, 纬度]，WGS84或GCJ02坐标系，坐标顺序为经度、纬度，就我国位置而言，数值大的在前面。但像leaflet组件，使用的坐标的顺序是纬度、经度，需要注意。。
properties (对象): 存放该要素的非空间属性（例如：名称、人口、编号等）。可以是任何键值对。

实例

显示函数

本文使用的显示GeoJSON数据的函数如下：

function drawOneLayer(map, geoJson, {color = "#FF0000", weight = 2, dashArray = ""} = {}) {// 加载json数据var myLayer = L.geoJSON(geoJson, {// 端点// geoJsonPoint 为 geoJSON 的点point对象// geoJson 的坐标经纬度顺序是：经度、纬度，但到了本函数，似乎会自动转换经纬度顺序pointToLayer: function(geoJsonPoint, latlng) {const myIcon = new LeafIcon({iconUrl: 'mymap/images/标注点-红.png'});// latlng 自动根据point类型的经纬度传入 像 [22.891922, 111.015295] 的类型var marker = L.marker(latlng, {icon: myIcon, // 可以在此指定图标});if (geoJsonPoint.properties && geoJsonPoint.properties.name && geoJsonPoint.properties.name != "") {marker.bindPopup(geoJsonPoint.properties.name);}return marker},// 线条  样式，可通过 properties 自定义值设置style: function (feature) {// 有color才赋值if (feature.properties && feature.properties.color && feature.properties.color != "" ) {color = feature.properties.color;}return {color:  color, // feature.properties.color,weight: weight,opcacity: 0.3,fillColor: 'transparent', //区域填充颜色fillOpacity: 0, //区域填充颜色的透明dashArray: dashArray,// more...};},// other})// myLayer.addTo(map)return myLayer
}

主要特点有：

自定义标注点图标。
可显示GeoJSON的属性properties。
自定义路线格式，包括颜色，大小等。

示例1 多个点 Point

本示例共有2个点，有2个Feature，并分别定义，GeoJSON数据如下：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name": "<b>广西的</b><br>南宁市"},"geometry": {"type": "Point","coordinates": [108.316269, 22.838212]}},{"type": "Feature","properties": {"name": "foobar<br>foo"},"geometry": {"type": "Point","coordinates": [108.37944, 22.73819]}}]
}

效果图：

在这里插入图片描述

示例2 多个点 Point 简化版

本示例共有2个点，有2个Point，与标准geoJson相比，少了Feature字段，但能在leaflet中使用。GeoJSON数据：

{"type": "FeatureCollection","features": [{"type": "Point","properties": {"name": "<b>广西的广西南宁</b><br>市"},"coordinates": [108.316269, 22.838212]},{"type": "Point","properties": {"name": "foobar<br>foo"},"coordinates": [108.379440, 22.738190]}]
}

效果与前例相同。

示例3 多个点 Point 再简化

接上，再将FeatureCollection精简，GeoJSON数据：

[{"type": "Point","properties": {"name": "<b>广西南宁</b><br>市"},"geometry": null,"coordinates": [108.316269, 22.838212]},{"type": "Point","properties": {"name": "foobar<br>foo"},"geometry": null,"coordinates": [108.379440, 22.738190]}
]

效果与前例相同。

示例4 多线 LineString

本示例共有2条线，有2个Feature，并分别定义。GeoJSON数据：

{"type": "FeatureCollection","features":[{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "LineString","coordinates": [[108.316269, 22.838212],[108.326569, 22.807200],[108.347168, 22.779347],[108.352661, 22.759720],[108.379440, 22.738190]]}},{"type": "Feature","properties": {"color": "#00FF00"},"geometry": {"type": "LineString","coordinates": [[108.312063, 22.831725],[108.307085, 22.823340],[108.313522, 22.819226]]}}]
}

效果图：

在这里插入图片描述

示例5 多线 LineString 简化

接上，简化FeatureCollection。GeoJSON数据：

[{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "LineString","coordinates": [[108.316269,22.838212],[108.326569,22.807200],[108.347168,22.779347],[108.352661,22.759720],[108.379440,22.738190]]}},{"type": "Feature","properties": {"color": "#00FF00"},"geometry": {"type": "LineString","coordinates": [[108.312063, 22.831725],[108.307085, 22.823340],[108.313522, 22.819226]]}}
]

效果同前。

示例6 多线 MultiLineString

本示例使用MultiLineString，其中properties作用于所有的线，如不同线用不同颜色、名称，应单独作feature。GeoJSON数据：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "MultiLineString","coordinates": [[[108.316269, 22.838212],[108.326569, 22.807200],[108.347168, 22.779347],[108.352661, 22.759720],[108.37944, 22.73819]],[[108.312063, 22.831725],[108.307085, 22.82334],[108.313522, 22.819226]]]}}]
}

效果图：

在这里插入图片描述

示例7 多边形 Polygon

本示例共有2个点，有2个Feature，并分别定义。注意，GeoJSON规范要求Polygon的首、尾节点的经纬度必须一致，形成闭包方可，只是大多数GIS工具和地图库会自动处理这个问题。GeoJSON数据：

{"type": "FeatureCollection","features":[{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "Polygon","coordinates": [[[108.064957, 22.870481],[108.084183, 22.864155],[108.109589, 22.831883],[108.128128, 22.840426],[108.130188, 22.828086],[108.114738, 22.812897],[108.112335, 22.802136],[108.169327, 22.758770],[108.202801, 22.778872],[108.190269, 22.813213],[108.160057, 22.842958],[108.118515, 22.848020],[108.103409, 22.875226],[108.071823, 22.878389],[108.064957, 22.870481]]]}},{"type": "Feature","properties": {"color": "#00FF00"},"geometry": {"type": "Polygon","coordinates": [[[108.477631,22.731857],[108.471622,22.724732],[108.465958,22.725999],[108.461666,22.720457],[108.468361,22.713490],[108.484154,22.713490],[108.489132,22.719190],[108.489132,22.729007],[108.483295,22.733282],[108.477631,22.731857]]]}}]
}

效果图：

在这里插入图片描述

示例8 多边形 Polygon 单个Feature

本示例共有2个多边形，但共用1个Feature，坐标分别定义，GeoJSON数据：

{"type": "FeatureCollection","features":[{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.064957, 22.870481],[108.084183, 22.864155],[108.109589, 22.831883],[108.128128, 22.840426],[108.130188, 22.828086],[108.114738, 22.812897],[108.112335, 22.802136],[108.169327, 22.758770],[108.202801, 22.778872],[108.190269, 22.813213],[108.160057, 22.842958],[108.118515, 22.848020],[108.103409, 22.875226],[108.071823, 22.878389],[108.064957, 22.870481]],[[108.477631,22.731857],[108.471622,22.724732],[108.465958,22.725999],[108.461666,22.720457],[108.468361,22.713490],[108.484154,22.713490],[108.489132,22.719190],[108.489132,22.729007],[108.483295,22.733282],[108.477631,22.731857]]]]}}]
}

效果同前，只是2个多边形的颜色保持一致。

示例9 带孔多边形 Polygon

Polygon支持内外环（即孔洞），GeoJSON数据：

{"type": "FeatureCollection","features":[{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "MultiPolygon","coordinates": [[[[108.064957, 22.870481],[108.084183, 22.864155],[108.109589, 22.831883],[108.128128, 22.840426],[108.130188, 22.828086],[108.114738, 22.812897],[108.112335, 22.802136],[108.169327, 22.758770],[108.202801, 22.778872],[108.190269, 22.813213],[108.160057, 22.842958],[108.118515, 22.848020],[108.103409, 22.875226],[108.071823, 22.878389],[108.064957, 22.870481]],[[108.089418,22.868346],[108.105812,22.838132],[108.116798,22.845093],[108.102722,22.862256],[108.098774,22.873724],[108.089418,22.868346]],[[108.123665,22.807517],[108.165207,22.771433],[108.190269,22.776498],[108.169670,22.794540],[108.165894,22.800237],[108.164520,22.822390]]]]}}]
}

效果图：

在这里插入图片描述

示例10 点线面综合

本示例综合了点线面几个样式，注意，每种Feature的类型必须与其内容一一对应，即多段折线的，其类型必须为 MultiLineString，而且名称必须正确，不能有空格。MultiLineString 类型的properties作用于所有的线，如不同线用不同颜色、名称，应单独作feature。不管何种 feature，其 coordinates 为null，在leaflet中会出错，因为整个 FeatureCollection 不合规，对于leaflet而言为非法。

GeoJSON数据：

{"type": "FeatureCollection","features":[{"type": "Feature","properties": {"color": "#FF00FF"},"geometry": {"type": "LineString","coordinates": [[108.316269, 22.838212],[108.326569, 22.807200],[108.347168, 22.779347],[108.352661, 22.759720],[108.379440, 22.738190]]}},{"type": "Feature","properties": {"color": "#00FF00"},"geometry": {"type": "LineString","coordinates": [[108.312063, 22.831725],[108.307085, 22.823340],[108.313522, 22.819226]]}},{"type": "Feature","properties": {"color": "#0000FF"},"geometry": {"type": "MultiLineString","coordinates": [[[108.203659,22.839477],[108.225632,22.857827],[108.263741,22.890093],[108.321762,22.921085],[108.379440,22.934049],[108.442268,22.937843],[108.485527,22.883450],[108.493080,22.866685],[108.433685,22.836313]],[[108.580627,22.807833],[108.554535,22.734390],[108.524323,22.688785],[108.444672,22.673580],[108.354034,22.679916],[108.303223,22.715390],[108.235931,22.743256],[108.176880,22.778714]]]}},{"type": "Feature","properties": {"name": "<b>广西的广西南宁</b><br>市"},"geometry": {"type": "Point","coordinates": [108.316269, 22.838212]}},{"type": "Feature","properties": {"name": "foobar<br>foo"},"geometry": {"type": "Point","coordinates": [108.37944, 22.73819]}}]
}

效果图：

在这里插入图片描述

示例11 几条路线

根据实际地图，给出几条路线的GeoJSON数据：

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"color": "#FF0000","name": "小鸡村到大鸡村"},"geometry": {"type": "LineString","coordinates": [[108.355996,22.856245],[108.355997,22.856245],[108.356491,22.856224],[108.356877,22.856202],[108.357494,22.856175],[108.358438,22.856122],[108.359371,22.85609],[108.35949,22.85609],[108.359774,22.85609],[108.360224,22.856084],[108.360305,22.856084],[108.360573,22.85609],[108.360847,22.8561],[108.360975,22.8561],[108.362107,22.856127],[108.36273,22.856213],[108.363025,22.856261],[108.363625,22.856433],[108.364033,22.856572],[108.364382,22.856674],[108.364865,22.856862],[108.364999,22.85691],[108.365133,22.856958],[108.366039,22.857388],[108.366286,22.857533],[108.366646,22.857758],[108.36759,22.858434],[108.367692,22.858461],[108.367987,22.858557],[108.368089,22.858563],[108.368148,22.858557],[108.368191,22.858546],[108.368282,22.858514],[108.368351,22.858466],[108.36841,22.858412],[108.368453,22.858348],[108.36848,22.858278],[108.368496,22.858192],[108.368496,22.858128],[108.36847,22.85801],[108.368426,22.857935],[108.368394,22.857886],[108.36833,22.857833],[108.368271,22.857801],[108.36818,22.857768],[108.368062,22.857758],[108.367965,22.857768],[108.36789,22.85779],[108.367842,22.857811],[108.367756,22.85787],[108.367708,22.857924],[108.367606,22.858048],[108.367515,22.858112],[108.36701,22.858949],[108.366672,22.859415],[108.366308,22.859871],[108.366125,22.860065],[108.366007,22.860199],[108.365878,22.860327],[108.365744,22.860461],[108.36509,22.861057],[108.364859,22.861234],[108.364591,22.861422],[108.364511,22.861459],[108.364344,22.861513],[108.363486,22.86206],[108.363153,22.862232],[108.362703,22.862425],[108.362381,22.862548],[108.361769,22.862763],[108.361211,22.862935],[108.360943,22.863128],[108.360831,22.863149],[108.360471,22.86323],[108.359811,22.863331],[108.359334,22.863385],[108.358937,22.863406],[108.358395,22.863417],[108.358272,22.863417],[108.358111,22.863417],[108.357891,22.863417],[108.357773,22.863417],[108.357038,22.863412],[108.356662,22.863412],[108.356442,22.863417],[108.356453,22.863557],[108.356464,22.863643],[108.35655,22.864597],[108.356603,22.865064],[108.35663,22.865263],[108.356636,22.865365],[108.356759,22.866502],[108.356915,22.867929],[108.356941,22.868331],[108.357,22.869195],[108.356963,22.869329],[108.356915,22.870203],[108.356904,22.870407],[108.356893,22.870622],[108.35685,22.872016],[108.356845,22.872548],[108.356383,22.872601],[108.354361,22.872585],[108.353015,22.872596],[108.35192,22.872606],[108.351785,22.872607]]}},{"type": "Feature","properties": {"color": "#00FF00","name": "某立交到狮山公园"},"geometry": {"type": "LineString","coordinates": [[108.362106,22.856127],[108.362107,22.856127],[108.36273,22.856213],[108.363025,22.856261],[108.363625,22.856433],[108.364033,22.856572],[108.364382,22.856674],[108.364865,22.856862],[108.364999,22.85691],[108.365133,22.856958],[108.366039,22.857388],[108.366286,22.857533],[108.366646,22.857758],[108.36759,22.858434],[108.367692,22.858461],[108.367987,22.858557],[108.368089,22.858563],[108.368148,22.858557],[108.368191,22.858546],[108.368282,22.858514],[108.368351,22.858466],[108.36841,22.858412],[108.368453,22.858348],[108.36848,22.858278],[108.368496,22.858192],[108.368496,22.858128],[108.36847,22.85801],[108.368426,22.857935],[108.368394,22.857886],[108.36833,22.857833],[108.368271,22.857801],[108.36818,22.857768],[108.368062,22.857758],[108.367965,22.857768],[108.36789,22.85779],[108.367842,22.857811],[108.367756,22.85787],[108.367708,22.857924],[108.367606,22.858048],[108.367515,22.858112],[108.36701,22.858949],[108.366672,22.859415],[108.366308,22.859871],[108.366125,22.860065],[108.366007,22.860199],[108.365878,22.860327],[108.365744,22.860461],[108.36509,22.861057],[108.364859,22.861234],[108.364591,22.861422],[108.364511,22.861459],[108.364344,22.861513],[108.363486,22.86206],[108.363153,22.862232],[108.362703,22.862425],[108.362381,22.862548],[108.361769,22.862763],[108.361211,22.862935],[108.360734,22.863058],[108.360418,22.863122],[108.359763,22.863224],[108.359468,22.863256],[108.358931,22.863288],[108.358368,22.863299],[108.357789,22.863299],[108.355016,22.863299],[108.354334,22.863315],[108.354114,22.863321],[108.353369,22.863305],[108.352226,22.863305],[108.347543,22.863305],[108.347167,22.863305],[108.346046,22.863305],[108.345478,22.863326],[108.344984,22.863466],[108.343874,22.863439],[108.342994,22.863439],[108.341417,22.863471],[108.340698,22.863471],[108.339695,22.863455],[108.338681,22.863455],[108.337898,22.86346],[108.337415,22.863444],[108.336857,22.863412],[108.33653,22.863364],[108.33631,22.86331],[108.336261,22.862548],[108.336294,22.86242],[108.336396,22.862081],[108.336535,22.861803],[108.336696,22.861674],[108.336825,22.861529],[108.337216,22.860488],[108.337427,22.859949]]}},{"type": "Feature","properties": {"color": "#0000FF","name": "某立交到某检测站"},"geometry": {"type": "LineString","coordinates": [[108.362105,22.856127],[108.362107,22.856127],[108.36273,22.856213],[108.363025,22.856261],[108.363625,22.856433],[108.364033,22.856572],[108.364382,22.856674],[108.364865,22.856862],[108.364999,22.85691],[108.365133,22.856958],[108.366039,22.857388],[108.366286,22.857533],[108.366646,22.857758],[108.36759,22.858434],[108.367692,22.858461],[108.367987,22.858557],[108.368089,22.858563],[108.368148,22.858557],[108.368191,22.858546],[108.368282,22.858514],[108.368351,22.858466],[108.36841,22.858412],[108.368453,22.858348],[108.36848,22.858278],[108.368496,22.858192],[108.368496,22.858128],[108.36847,22.85801],[108.368426,22.857935],[108.368394,22.857886],[108.36833,22.857833],[108.368271,22.857801],[108.36818,22.857768],[108.368062,22.857758],[108.367965,22.857768],[108.36789,22.85779],[108.367842,22.857811],[108.367756,22.85787],[108.367708,22.857924],[108.367606,22.858048],[108.367515,22.858112],[108.36701,22.858949],[108.366672,22.859415],[108.366308,22.859871],[108.366125,22.860065],[108.366007,22.860199],[108.365878,22.860327],[108.365744,22.860461],[108.36509,22.861057],[108.364859,22.861234],[108.364591,22.861422],[108.364511,22.861459],[108.364344,22.861513],[108.363486,22.86206],[108.363153,22.862232],[108.362703,22.862425],[108.362381,22.862548],[108.361769,22.862763],[108.361211,22.862935],[108.360734,22.863058],[108.360418,22.863122],[108.359763,22.863224],[108.359468,22.863256],[108.358931,22.863288],[108.358368,22.863299],[108.357789,22.863299],[108.355016,22.863299],[108.354334,22.863315],[108.354114,22.863321],[108.353369,22.863305],[108.352226,22.863305],[108.347543,22.863305],[108.347167,22.863305],[108.346046,22.863305],[108.345478,22.863326],[108.344984,22.863466],[108.343874,22.863439],[108.342994,22.863439],[108.341417,22.863471],[108.340698,22.863471],[108.339695,22.863455],[108.338681,22.863455],[108.337898,22.86346],[108.337415,22.863444],[108.336857,22.863412],[108.33653,22.863364],[108.33631,22.86331],[108.336197,22.863643],[108.336154,22.863761],[108.335945,22.864152],[108.33587,22.86426],[108.335677,22.864785],[108.33558,22.865064],[108.335526,22.865246],[108.335398,22.865799],[108.335109,22.867793]]}},{"type": "Feature","properties": {"name": "小鸡村"},"geometry": {"type": "Point","coordinates": [108.355996,22.856245]}},{"type": "Feature","properties": {"name": "小鸡村"},"geometry": {"type": "Point","coordinates": [108.351785,22.872607]}}]
}

效果图：

在这里插入图片描述