OpenLayers 加载 GeoJSON 并设置样式
OpenLayers 加载 GeoJSON 的标准做法是：用 ol/format/GeoJSON 解析数据，交给 VectorSource，再挂到 VectorLayer 上渲染；样式可在图层上写固定 Style / Flat 样式，也可用 StyleFunction 按几何类型或属性动态返回。GeoJSON 默认数据投影是 EPSG:4326，地图视图常见为 EPSG:3857，必须配对好 dataProjection 与 featureProjection，否则要素会错位甚至看不见。截至 2026 年 11 月，稳定版为 OpenLayers v10.11.0（2026 年 10 月 4 日发布），空坐标数组会按规范解析为 null，加载更稳。
用 URL 或内联对象加载 GeoJSON
实际项目里最常用两种路径：从地址异步加载，或把已有的 GeoJSON 对象直接读成要素。前者适合静态文件或接口返回；后者适合前端已拿到 JSON、或要先加工再上图的场景。
- 从 URL 加载：创建 VectorSource，设置 url 指向 .geojson 文件或接口，同时指定 format: new GeoJSON()。默认加载器会把数据投影转换到当前视图投影。
- 内联对象加载：先准备好 GeoJSON 对象（或 JSON.parse 后的结果），调用 new GeoJSON().readFeatures(geojsonObject, options)，把返回的要素数组赋给 VectorSource 的 features。
- 把该 Source 传给 new VectorLayer({ source })，再 map.addLayer(layer)。
- 本地调试请用本地 Web 服务打开页面，不要直接用 file:// 协议，否则容易触发 CORS，文件读不进来。
模块导入一般写成：从 ol/format/GeoJSON.js、ol/source/Vector.js、ol/layer/Vector.js 分别引入。推荐用 npm 安装最新 ol 包；版本与包形态可到 OpenLayers 官方下载页 核对。GeoJSON 读写参数（如 dataProjection、featureProjection）以 GeoJSON 格式类 API 文档 为准。
| 加载方式 | 适用场景 | 投影处理要点 |
|---|---|---|
| url + format | 文件或接口异步加载 | 默认按视图投影自动转换；数据源投影声明不准时，在 format 上显式设 dataProjection |
| readFeatures + features | 内联对象、已解析 JSON | 在 readFeatures 的 options 里同时写 dataProjection 与 featureProjection |
投影怎么配才不会跑偏
这是 openlayers加载geojson 时最高频的坑。GeoJSON 规范默认经纬度（EPSG:4326）；OpenLayers 地图默认视图多是 Web 墨卡托（EPSG:3857）。两边不一致时，要素可能挤在 (0,0) 附近，或完全不在视野内。
- 内联读取时，建议写明：dataProjection: ‘EPSG:4326’，featureProjection 取当前视图投影（常用 ‘EPSG:3857’）。
- URL 加载时，也可在 new GeoJSON({ dataProjection: ‘EPSG:4326’ }) 里固定数据投影，避免源数据没写 crs 时猜错。
- 若数据本身就是视图投影，两边都设成同一 EPSG，不要再做多余转换。
- 自定义投影需先注册（例如配合 proj4）；未知 crs 往往会回退到 format 的 dataProjection。
验收标准很简单：地图中心设到数据所在区域后，要素应出现在正确经纬度附近；若只看到 Null Island（0,0）一带有点，优先回头查投影配对。
给图层设置固定样式
VectorLayer 的 style 未设置时，会用默认样式（半透明白填充、#3399CC 描边、半径 5 的圆点）。正式项目通常自己指定。
经典写法用 ol/style/Style 组合 Fill、Stroke、Circle（点符号）等。例如面：填充浅色、描边略深；线：只设 Stroke 宽度与颜色；点：用 Circle 设半径、填充和描边。把 Style 实例（或 Style 数组）赋给图层的 style 选项即可。
较新的写法推荐 Flat 样式（对象字面量），例如设置 fill-color、stroke-color、stroke-width、circle-radius 等键。写法更短，也方便后面接属性表达式。图层 style 设为 null 时，只会渲染自身带样式的要素，一般初学阶段先别这么用。
- 改完样式后，若画面未更新，确认图层已加入地图，必要时触发一次渲染或检查是否被其他图层盖住。
- declutter、renderBuffer、updateWhileAnimating 等属于进阶渲染控制，小数据量可先保持默认。
按几何类型或属性做动态样式
同一份 GeoJSON 常混有 Point、LineString、Polygon。可用 StyleFunction：函数接收 feature 与 resolution，根据 feature.getGeometry().getType() 返回不同 Style；返回 undefined 则不画该要素。
Flat 样式更适合属性驱动：用表达式如 [‘get’, ‘某属性名’] 取字段着色，或用规则数组加 filter（例如人口大于某阈值用另一套颜色）。官方示例里常见按 COLOR 字段填色，并配合文本标注。悬停高亮通常另写一套样式，在 pointermove 时切换要素的临时 style，注意离开时清掉，避免“粘住”。
数据量大、交互卡顿时，不要只堆样式复杂度；可先做简化、按需加载或图层拆分。本站另有一篇专门讲加载卡顿与优化的文章：OpenLayers 加载 GeoJSON 卡顿时的性能优化与代码示例，可与本章配合阅读。
常见问题
要素加载了但地图上完全看不见？
优先查投影是否配对（4326 数据对 3857 视图），再把视图中心与缩放调到数据范围；其次看 style 是否把透明度、线宽设成几乎看不见，或图层被底图/其他矢量盖住。
URL 加载失败或一直转圈？
确认路径可访问、响应是合法 GeoJSON，且页面通过 http(s) 服务打开；监听 VectorSource 的 featuresloaderror 看具体错误。跨域接口需服务端允许 CORS。
样式改了为什么部分要素没变化？
StyleFunction 要覆盖所有几何类型分支；Flat 表达式字段名必须与属性名一致（大小写敏感）。若要素自己带了 style，图层级样式可能被覆盖，检查是否误设了要素样式。
空几何或异常坐标会怎样？
在较新的稳定版中，空坐标数组会按 GeoJSON 规范视为 null，避免解析异常。仍建议入库或导出前清洗无效几何，减少运行时噪音。
本章只解决一件事：把 GeoJSON 正确读进 VectorSource，投影对齐后上图，并用固定样式或 StyleFunction / Flat 表达式把点线面画清楚。建议你先用一小份已知范围的 GeoJSON 验证投影与样式，再换成业务数据；数据一大就及时对照本站的性能优化篇做拆分与减负，而不是先堆复杂样式。