OpenLayers读/写GeoJSON

npm install ol

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

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
  })
});

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

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

console.log(geojsonStrWritten);