在地图类应用开发中，GeoJSON是常用的空间数据交换格式，其中包含的点、线、面坐标通常需要转换为地图框架支持的LatLng格式才能正常渲染，同时为了区分不同属性的地理要素，还需要实现分段样式配置，让不同区间的要素展示不同视觉效果。
GeoJSON基础结构解析
GeoJSON的核心是由FeatureCollection、Feature、Geometry三层结构组成，坐标信息存储在Geometry的coordinates字段中，不同类型的几何对象坐标结构有差异：
- 点（Point）：coordinates为
[经度, 纬度]的一维数组 - 线（LineString）：coordinates为
[[经度, 纬度], [经度, 纬度], ...]的二维数组 - 面（Polygon）：coordinates为
[[[经度, 纬度], [经度, 纬度], ...]]的三维数组
同时每个Feature还包含properties字段，用于存储该地理要素的属性信息，这是实现分段样式的关键依据。
GeoJSON坐标转LatLng核心逻辑
我们以常用的地图框架LatLng格式为例，通常LatLng需要接收纬度和经度两个参数，而GeoJSON的coordinates是[经度, 纬度]的顺序，所以转换时需要注意参数顺序调整。
基础转换函数实现
首先实现单个坐标点的转换函数：
// 将GeoJSON单个坐标点转换为LatLng对象
function geoJsonCoordToLatLng(coord) {
// coord格式为[经度, 纬度]
const lng = coord[0];
const lat = coord[1];
// 假设地图框架的LatLng构造函数接收(lat, lng)参数
return new LatLng(lat, lng);
}
不同几何类型的坐标转换
针对不同类型的几何对象，需要递归处理坐标数组：
// 转换GeoJSON几何对象的所有坐标为LatLng格式
function convertGeometryCoords(geometry) {
const type = geometry.type;
const coords = geometry.coordinates;
switch(type) {
case 'Point':
return geoJsonCoordToLatLng(coords);
case 'LineString':
return coords.map(item => geoJsonCoordToLatLng(item));
case 'Polygon':
// 面的坐标第一层是环数组，每个环是坐标点数组
return coords.map(ring => ring.map(item => geoJsonCoordToLatLng(item)));
case 'MultiLineString':
return coords.map(line => line.map(item => geoJsonCoordToLatLng(item)));
default:
return coords;
}
}
实现分段样式配置
分段样式的核心是根据Feature的properties中的属性值，匹配预设的区间规则，为不同区间的要素设置不同的样式参数。
定义分段规则
假设我们需要根据道路的等级属性roadLevel设置不同的线颜色和线宽，先定义分段规则：
// 分段样式规则配置
const segmentStyleRules = [
{ min: 0, max: 2, color: '#ff0000', weight: 6 }, // 等级0-2 红色 线宽6
{ min: 2, max: 4, color: '#00ff00', weight: 4 }, // 等级2-4 绿色 线宽4
{ min: 4, max: 10, color: '#0000ff', weight: 2 } // 等级4-10 蓝色 线宽2
];
匹配分段规则生成样式
编写函数根据属性值匹配对应的样式：
// 根据属性值匹配分段样式
function getSegmentStyle(properties) {
const value = properties.roadLevel; // 获取用于分段的属性值
// 遍历规则找到匹配的项
const matchedRule = segmentStyleRules.find(rule => value >= rule.min && value < rule.max);
if (matchedRule) {
return {
color: matchedRule.color,
weight: matchedRule.weight,
opacity: 1
};
}
// 默认样式
return {
color: '#cccccc',
weight: 1,
opacity: 0.8
};
}
完整示例：转换并渲染带分段样式的GeoJSON
下面是完整的处理流程，从读取GeoJSON数据到转换坐标并应用分段样式渲染到地图：
// 假设geoJsonData是获取到的GeoJSON数据对象
function renderGeoJsonWithSegmentStyle(geoJsonData, mapInstance) {
// 校验数据格式
if (!geoJsonData || geoJsonData.type !== 'FeatureCollection') {
console.error('无效的GeoJSON数据');
return;
}
// 遍历所有Feature
geoJsonData.features.forEach(feature => {
const geometry = feature.geometry;
const properties = feature.properties;
// 转换坐标为LatLng格式
const latLngCoords = convertGeometryCoords(geometry);
// 获取分段样式
const style = getSegmentStyle(properties);
// 根据几何类型创建地图要素并添加到地图
if (geometry.type === 'LineString') {
const polyline = new Polyline({
path: latLngCoords,
...style
});
polyline.addTo(mapInstance);
} else if (geometry.type === 'Polygon') {
const polygon = new Polygon({
path: latLngCoords,
...style,
fillOpacity: 0.3
});
polygon.addTo(mapInstance);
}
});
}
注意事项
- 坐标转换时务必注意GeoJSON的
[经度, 纬度]顺序和LatLng的(纬度, 经度)参数顺序差异，避免坐标位置错误 - 分段规则的区间边界需要根据实际属性值的分布合理设置，避免出现属性值无法匹配规则的情况
- 如果GeoJSON数据量较大，建议做批量处理优化，避免频繁创建对象导致性能问题
- 对于复杂的Multi类型几何对象，需要递归处理嵌套的坐标数组，确保转换完整