openlayers 加载Shapefile文件

天天向上10242026-04-30 8:58

Shapefile 是一种复杂的二进制格式，由 .shp（几何数据）、.shx（索引）、.dbf（属性数据）等多个文件组成，浏览器没有内置解析器，所以前端必须先把它转换成 Web 友好的格式（最常用的是 GeoJSON），再交给地图框架渲染。

安装依赖

bash 复制代码

npm install shpjs

工具文件：shpUtils.js

js 复制代码

import shp from 'shpjs';
import GeoJSON from 'ol/format/GeoJSON';
import { VectorSource } from 'ol/source';
import { Style, Fill, Stroke } from 'ol/style';

const waterStyle = new Style({
  fill: new Fill({ color: 'rgba(255, 0, 0, 1)' }),
  stroke: new Stroke({ color: 'red', width: 2 }),
});

export async function parseShpZip(fileOrBlob) {
  try {
    const buffer = await fileOrBlob.arrayBuffer();
    const parsedResult = await shp(buffer);

    let geojson = parsedResult.type ? parsedResult : Object.values(parsedResult)[0];

    const features = new GeoJSON().readFeatures(geojson, {});

    features.forEach((f) => f.setStyle(waterStyle));

    return features;
  } catch (err) {
    console.error('解析失败', err);
    throw err;
  }
}

使用

把 .shp + .shx + .dbf + .prj 等打包成一个 .zip ，放到项目根目录的 public/ 文件夹下

js 复制代码

import { parseShpZip } from './shpUtils';
import {  Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';


async addShpLayer() {
      const url = '/图层数据.zip';
      const response = await fetch(url);
      const blob = await response.blob();

      const features = await parseShpZip(blob);

      const source = new VectorSource({ features });
      const layer = new VectorLayer({ source });
      this.map.addLayer(layer);

      source.on('featuresloadend', () => {
        const extent = source.getExtent();
        this.map.getView().fit(extent, { padding: [20, 20, 20, 20], duration: 500 });
      });
}