本示例的目的是介绍演示如何在vue+leaflet中本地上传包含shp的zip文件，利用shapefile读取shp数据，并在地图上显示图形。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果

示例效果

加载shapefile.js方式

npm i shapefile

template中引用
const shapefile = require("shapefile");

安装引用jszip（示例中为3.8.0版）

npm install jszip

template中引用
const JSZip = require("jszip");

配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/4190537826
或者同样查看：https://blog.csdn.net/cuclife/article/details/126745283
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

示例源代码(共128行)

```
/*

• @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）

• @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。

• @Email: [email protected]

• @First published in xiaozhuanlan.com

• @Second published in CSDN

• @First published time: 2023-02-13
  */