26.使用 Vue 3 + OpenLayers 加载远程 Shapefile 数据并显示图形

在 Web GIS 开发中，我们经常需要将远程的 Shapefile 数据加载到地图上进行展示。本文将介绍如何使用 Vue 3 和 OpenLayers 来实现这一功能，并提供完整的代码示例。

项目依赖和准备工作

1. 引入 OpenLayers

OpenLayers 是一个强大的开源 JavaScript 地图库，可以用于在 Web 应用中加载和显示各种地图数据。

javascript 复制代码

npm install ol

2. 引入 Shapefile 解析工具

我们需要一个工具来解析 Shapefile 数据，这里选择 shapefile 这个库。

javascript 复制代码

npm install shapefile

Vue 3 + OpenLayers 示例代码

以下是完整代码，包括模板、逻辑和样式部分。

`App.vue`

javascript 复制代码

<!--
 * @Author: 彭麒
 * @Date: 2024/12/13
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <button class="back-button" @click="goBack">返回</button>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载远程shp数据，map上显示图形</div></div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import SourceVector from 'ol/source/Vector'
import LayerVector from 'ol/layer/Vector'
import GeoJSON from 'ol/format/GeoJSON'
import { Tile } from 'ol/layer'
import OSM from 'ol/source/OSM'
import * as shapefile from 'shapefile'
import router from "@/router";
const goBack = () => {
  router.push('/OpenLayers');
};
// Initialize map and source
const map = ref<Map | null>(null)
const source = new SourceVector({
  wrapX: false
})
const view = new View({
  projection: "EPSG:4326",
  center: [8.2275, 6.8185],
  zoom: 3
})

// Function to read shapefile and add features to the source
const readshp = () => {
  const shp = "https://cdn.rawgit.com/mbostock/shapefile/master/test/points.shp"
  const dbf = "https://cdn.rawgit.com/mbostock/shapefile/master/test/points.dbf"

  shapefile.open(shp, dbf, { encoding: 'utf-8' })
    .then(source2 => {
      const log = (result: any) => {
        if (result.done) return
        const feature = new GeoJSON().readFeature(result.value)
        source.addFeature(feature)
        return source2.read().then(log)
      }
      return source2.read().then(log)
    })
    .catch(error => console.error(error))
}

// Function to initialize the map
const initMap = () => {
  map.value = new Map({
    target: 'vue-openlayers',
    layers: [
      new Tile({
        source: new OSM()
      }),
      new LayerVector({
        source: source
      }),
    ],
    view: view
  })
}

// Initialize map and read shapefile on component mount
onMounted(() => {
  initMap()
  readshp()
})
</script>

<style scoped>
.container {
  width: 840px;
  height: 550px;
  margin: 50px auto;
  border: 1px solid #42B983;
}

#vue-openlayers {
  width: 800px;
  height: 420px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>

代码解析

地图初始化
- 使用 ol/Map 和 ol/View 创建 OpenLayers 地图实例，并设置地图视图的投影、中心点和缩放级别。
- 加载 OSM 瓦片图层作为底图。
Shapefile 数据解析
- 借助 shapefile 库解析远程 Shapefile 数据。Shapefile 通常由 .shp 和 .dbf 文件组成，需要同时加载。
- 使用 GeoJSON 格式化工具将解析的数据转为 OpenLayers 可用的 Feature，并添加到矢量数据源 SourceVector 中。
显示数据
- 将矢量数据源绑定到 LayerVector 图层，并添加到地图实例中。

示例运行效果

Shapefile 数据 ：文中使用了 mbostock/shapefile 项目的示例数据。
效果截图：

地图加载完成后，Shapefile 中的点数据会正确显示在 OpenLayers 地图上。

常见问题

跨域问题
- 如果远程服务器未设置 CORS，可以考虑使用代理服务器解决。
本地文件加载
- 浏览器无法直接读取本地文件，可以通过后端接口或使用 FileReader 进行加载。

希望本文对您了解如何使用 Vue 3 和 OpenLayers 加载 Shapefile 数据有所帮助。如果您有任何问题或建议，欢迎留言交流！