Leaflet学习文档-GeoJSON绘制

XYL8023

于 2025-03-17 09:51:21 发布

阅读量716

点赞数 24

分类专栏： Leaflet 文章标签：学习 javascript 前端

本文链接：https://blog.youkuaiyun.com/xiuyu_lj/article/details/146208010

版权

Leaflet 专栏收录该内容

7 篇文章

订阅专栏

前章知识点

（1）Leaflet学习文档-初识
 （2）Leaflet学习文档-加载底图
 （3）Leaflet学习文档-Map使用说明
 （4）Leaflet学习文档-Marker标注点
 （5）Leaflet学习文档-Popup(弹窗框）和Tooltip（提示框）学习
 （6）Leaflet学习文档-点(Point)/线(Line)/多边形(Polygon)/圆(Circle)绘制

前言

GeoJSON是一种用于编码各种地理数据结构的格式。它基于JavaScript对象表示法（JSON），因此易于人们阅读和编写，同时也易于机器解析和生成。以下是GeoJSON在交互方面的几个主要优势：

轻量级与高效性：由于GeoJSON是基于JSON的，所以它的文件相对较小，这使得数据在网络上传输时更加迅速，减少了加载时间，提升了用户体验。
易于集成：GeoJSON可以很容易地与现代web技术集成，如JavaScript库（Leaflet、Mapbox GL JS等）结合使用，以便在网页上显示地图和地理数据。这种无缝集成能力使得开发者能够快速构建出具有丰富交互功能的地图应用。
动态数据展示：通过AJAX或Fetch API等技术，Web应用程序可以在不重新加载整个页面的情况下更新地图上的数据。这意味着用户可以实时查看最新的地理信息，增强了互动性和数据的及时性。
支持复杂的数据类型：除了基本的点、线、多边形之外，GeoJSON还支持更复杂的几何类型集合，比如GeometryCollection，以及属性数据，这让它能承载丰富的地理空间信息，为用户提供详尽的数据视图。
跨平台兼容性：作为一种开放标准，GeoJSON被广泛支持于不同的软件和平台之间，无论是桌面GIS软件（如QGIS、ArcGIS）、移动应用还是Web服务，都可以轻松读取和写入GeoJSON格式的数据，促进了不同系统间的互操作性和数据交换。
可定制性强：由于GeoJSON本质上是一个文本文件，开发者可以根据需要自定义样式、添加交互逻辑，例如点击事件、悬停提示等，以满足特定的应用场景需求。

Leaflet也可以轻松加载对应的GeoJSON数据格式，也是作为主要加载数据的途径之一。

一、GeoJSON格式

GeoJSON 必须遵循 RFC 7946 标准，以下是关键格式规范

1 GeoJSON基础格式

GeoJSON如下所示，一般包含type和features两个信息，其中type一般默认为FeatureCollection,features一般为要素集合（通常为同类型要素信息）

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
     feature,
     ...
   ]            // 包含多个Feature对象的数组
}

要素集合features里面每一个feature需包含geometry,properties两个信息：

geometry包含对应的要素类型type和坐标信息coordinates,type的选择有'Point' | 'MultiPoint' | 'LineString' | 'MultiLineString' | 'Polygon' | 'MultiPolygon'6类里面选一个作为要素类型，coordinates类型会根据选择所变换。
properties包含该要素的属性信息满足json格式（key-value键值对）

let feature = {
   // 默认
	type: 'Feature'
	// 空间信息
	geometry: {
	  type: 'Point' | 'MultiPoint' 
	  | 'LineString' | 'MultiLineString'
	  | 'Polygon' | 'MultiPolygon',
	  coordinates: [坐标信息]
	},
	// 属性信息
	properties: {
	   name: 'xxxx',
	   ...
	}
}

geometry里面要素类型type和坐标信息coordinates对应关系如下

类型	坐标格式示例	说明
`Point`	`"coordinates": [x, y]` 例如: `[116.397, 39.908]`	单个点坐标，使用经度和纬度来描述一个地球表面上的位置。
`LineString`	`"coordinates": [[x1, y1], [x2, y2], ...]`	由两个或更多点组成的线段集合。每个点通过其经纬度定义，且这些点按顺序连接形成一条或多条线。
`Polygon`	`"coordinates": [[[x1,y1], [x2,y2], ..., [x1,y1]]]`	单个闭合区域（多边形）坐标，首尾点需闭合（即首尾坐标相同），用于定义具有面积的实体。
`MultiPoint`	`"coordinates": [[x1,y1], [x2,y2], ...]`	多个独立点组成的集合，可以包含不止一个地理位置。
`MultiLineString`	`"coordinates": [[[x1,y1], [x2,y2]], [[x3,y3], [x4,y4]]]`	多个独立线段的集合（`[[线段1坐标], [线段2坐标]]`），每条线串都是由一组点定义的，适用于表示如河流系统等复杂线性特征。
`MultiPolygon`	`"coordinates": [[[[x1,y1], [x2,y2], [x1,y1]]], [[[x3,y3], [x4,y4], [x3,y3]]]]`	多个独立多边形的集合（`[[多边形1], [多边形2]]`），可以用来表示岛屿群、国家边界等复杂的区域。

补充说明

坐标顺序
默认遵循 [经度, 纬度]（WGS84 坐标系），例如 [116.397, 39.908]。
闭合要求
Polygon 和 MultiPolygon 的每个环必须闭合（首尾坐标相同）。
嵌套层级
LinString → 二维数组
Polygon → 三维数组
MultiPolygon → 四维数组

2 Point（点）格式

坐标格式： [经度, 纬度]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [116.397, 39.908]
      },
      properties: {
        name: '北京',
      }
    }
  ]     
}

地图效果

3 LineString（线）格式

坐标格式： [[经度1, 纬度1], [经度2, 纬度2]]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
   	  type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
           [116.397, 39.908],
           [116.397, 39.909]
        ]
      },
      properties: {
        name: '北京',
      }
    }
  ]        
}

地图效果

在这里插入图片描述

4 Polygon（面）常规格式

坐标格式： [[[经度1, 纬度1], [经度2, 纬度2], ..., [经度1, 纬度1]]]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
        	[
	           [116.397, 39.908],
	           [116.397, 39.909],
	           [116.396, 39.909],
	           [116.396, 39.908],
	           [116.397, 39.908]
	        ]
        ]
      },
      properties: {
        name: '北京',
      }
    }
  ]        
}

地图效果

在这里插入图片描述

5 环状面格式

坐标格式： [[[外环经度1, 外环纬度1], [外环经度2, 外环纬度2], ..., [外环经度1, 外环纬度1]], [[内环经度1, 内环纬度1], [内环经度2, 内环纬度2], ..., [内环经度1, 内环纬度1]]]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
        	// 外环边框
        	[
	           [116.397, 39.908],
	           [116.397, 39.909],
	           [116.396, 39.909],
	           [116.396, 39.908],
	           [116.397, 39.908]
	        ],
	        // 外环边框（环洞）
	        [
	           [116.3968, 39.9082],
	           [116.3968, 39.9088],
	           [116.3962, 39.9088],
	           [116.3962, 39.9082],
	           [116.3968, 39.9082]
	        ]
        ]
      },
      properties: {
        name: '北京',
      }
    }
  ]        
}

地图效果

在这里插入图片描述

6 MultiPoint（多点）格式

坐标格式： [[经度1, 纬度1], [经度2, 纬度2]]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      type: 'Feature',
      geometry: {
        type: 'MultiPoint',
        coordinates: [
	        [116.397, 39.908],
	        [116.397, 39.909]
        ]
      },
      properties: {
        name: '北京',
      }
    }
  ]     
}

地图效果

在这里插入图片描述

7 MultiLineString（多线）格式

坐标格式： [[[线段1经度1, 线段1纬度1], [线段1经度2, 线段1纬度2], ...],[[线段2经度1, 线段2纬度1], [线段2经度2, 线段2纬度2], ...]]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      type: 'Feature',
      geometry: {
        type: 'MultiLineString',
        coordinates: [
        	// 线段1
	        [
	           [116.397, 39.908],
	           [116.397, 39.909],
	        ],
	        // 线段2
	        [
	           [116.398, 39.908],
	           [116.398, 39.909],
	        ]
        ]
      },
      properties: {
        name: '北京',
      }
    }
  ]     
}

地图效果

在这里插入图片描述

8 MultiLinePolygon（多面）格式

坐标格式：[[[[面1经度1, 面1纬度1], [面1经度2, 面1纬度2], ..., [面2经度1, 面2纬度1]]],[[[面2经度1, 面2纬度1], [面2经度2, 面2纬度2], ..., [面2经度1, 面2纬度1]]]]

let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      type: 'Feature',
      geometry: {
        type: 'MultiPolygon',
        coordinates: [
        	[
	        	[
		           [116.397, 39.908],
		           [116.397, 39.909],
		           [116.396, 39.909],
		           [116.396, 39.908],
		           [116.397, 39.908]
	        	],
        	],
        	[
	        	[
		           [116.397, 39.906],
		           [116.397, 39.907],
		           [116.396, 39.907],
		           [116.396, 39.906],
		           [116.397, 39.906]
	        	],
        	],
		]
      },
      properties: {
        name: '北京',
      }
    }
  ]     
}

地图效果

在这里插入图片描述

二、GeoJSON加载

1. GeoJSON类

L.GeoJSON 是 Leaflet 中用于根据对应GeoJSON创建相应图层的类。可以通过传入geojson来定义形状，并支持多种可选参数来自定义样式和行为

Polyline类参数说明：

// geojson信息
 let geojson = {
  "type": "FeatureCollection",  // 特征集合（最常用）
  "features": [
    {
      geometry: {
        type: 'Polygon',
        coordinates: [
        	[
	           [116.397, 39.908],
	           [116.397, 39.909],
	           [116.396, 39.909],
	           [116.396, 39.908],
	           [116.397, 39.908]
	        ]
        ]
      },
      properties: {
        name: '北京',
      }
    }
  ]        
}

// 创建折线
const geojsonLayer = L.geoJSON(geojson, {
   // 折线颜色（支持 HEX、RGB、颜色名称，如 'red'、'#ff0000'）
    color: '#ff0000',
    // 折线宽度（单位：像素）
    weight: 5,
    // 折线透明度（0 为完全透明，1 为不透明）。
    opacity: 1,
    // 线段端点的形状（可选 'round'、'butt'、'square'）
    lineCap: 'square',
    // 线段连接处的形状（可选 'round'、'miter'、'bevel'）
    lineJoin: 'round',
    // 虚线样式（如 '10' 表示 10px 实线 + 10px 空白，循环）
    dashArray: '10',
    // 虚线起始偏移量（如 '10' 表示从第 10px 开始绘制）。
    dashOffset: '0',
    // 折线平滑系数（值越大，路径简化越多，性能优化但精度降低）。
    smoothFactor: 1,
    // 是否禁用折线在视图外的裁剪（设为 true 可提升长路径性能）
    noClip: false,
    // 自定义 CSS 类名，用于覆盖默认样式
    className: ''
}).addTo(map);	

// 缩放地图以适应线条范围
// map.fitBounds(polyline.getBounds());

2. GeoJSON类说明

GeoJSON类的使用方式一般为L.geoJSON(geojson, 参数).addTo(map)的方式进行加载，GeoJSON的参数用下表来阐述。

参数名	类型	默认值	说明
`color`	String	`#3388ff`	折线颜色（支持 HEX、RGB、颜色名称，如 `'red'`、`'#ff0000`）。
`weight`	Number	`3`	折线宽度（单位：像素）。
`opacity`	Number (0~1)	`1.0`	折线透明度（0 为完全透明，1 为不透明）。
`lineCap`	String	`round`	线段端点的形状（可选 `round`、`butt`、`square`）。
`lineJoin`	String	`round`	线段连接处的形状（可选 `round`、`miter`、`bevel`）。
`dashArray`	String	`null`	虚线样式（如 `10` 表示 10px 实线 + 10px 空白，循环）。
`dashOffset`	String	`null`	虚线起始偏移量（如 `10` 表示从第 10px 开始绘制）。
`smoothFactor`	Number	`1.0`	折线平滑系数（值越大，路径简化越多，性能优化但精度降低）。
`noClip`	Boolean	`false`	是否禁用折线在视图外的裁剪（设为 true 可提升长路径性能）。
`className`	String	`null`	自定义 CSS 类名，用于覆盖默认样式。

GeoJSON设置颜色，虚线，透明度效果

总结

本文主要阐述点，线，面geojson信息设置。

 1. 点，多点geojson格式
 2. 线，多线geojson格式
 3. 面，多面geojson格式

具体使用可以参考本文