OpenLayers读/写GeoJSON

OpenLayers 是一个强大的开源 JavaScript 库，用于在 Web 上显示和交互地图。GeoJSON 是一种常用的地理数据格式，OpenLayers 提供了读写 GeoJSON 的功能。以下是如何在 OpenLayers 中读写 GeoJSON 的详细步骤。

1. 安装 OpenLayers

首先，你需要在项目中安装 OpenLayers。你可以使用 npm 或直接在 HTML 文件中引入 CDN。

使用 npm 安装：

npm install ol

使用 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/ol"></script>

2. 读取 GeoJSON 数据

假设你有一个 GeoJSON 文件或字符串，你可以使用 OpenLayers 的 ol/format/GeoJSON 类来读取它。

import 'ol/ol.css';
import { Map, View } from 'ol';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';

// 假设你有一个 GeoJSON 字符串
const geojsonStr = `{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "Sample Point"
      }
    }
  ]
}`;

// 使用 GeoJSON 格式读取数据
const geojsonFormat = new GeoJSON();
const features = geojsonFormat.readFeatures(geojsonStr, {
  featureProjection: 'EPSG:3857' // 投影坐标系
});

// 创建一个矢量源并添加读取的特征
const vectorSource = new VectorSource({
  features: features
});

// 创建一个矢量图层
const vectorLayer = new VectorLayer({
  source: vectorSource
});

// 创建地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    vectorLayer
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

3. 写入 GeoJSON 数据

你可以将 OpenLayers 中的特征写入 GeoJSON 格式。以下是如何将特征转换为 GeoJSON 字符串：

// 获取矢量源中的所有特征
const featuresToWrite = vectorSource.getFeatures();

// 将特征写入 GeoJSON 格式
const geojsonStrWritten = geojsonFormat.writeFeatures(featuresToWrite, {
  featureProjection: 'EPSG:3857' // 投影坐标系
});

console.log(geojsonStrWritten);