经纬志
首页 / OpenLayers / 使用示例

GeoJSON 数据

一份内联 GeoJSON 同时包含点、线、面,按几何类型分派样式,点击弹出属性。

OpenLayers 10.3.1 · 对应官方 geojson.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

内联的 FeatureCollection 交给 ol.format.GeoJSON().readFeatures,指定 dataProjection 与 featureProjection 后,要素坐标一次转换到位。

样式函数按几何类型分派:点用 Circle,线用 Stroke,面用半透明填充加标签;点击时 forEachFeatureAtPixel 取要素,属性直接拼进浮动面板。

操作结果
点击图形左下角显示名称与属性
取消勾选图层只保留底图
缩放地图标签字号保持屏幕尺寸

readFeatures 的第二个参数容易漏,漏掉会按 4326 直接当 3857 用,图形会跑到南极附近。