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

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

项目依赖和准备工作

1. 引入 OpenLayers

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

npm install ol

2. 引入 Shapefile 解析工具

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

npm install shapefile

Vue 3 + OpenLayers 示例代码

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

App.vue

<!--
 * @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>

代码解析

1. 地图初始化

   • 使用 ol/Map 和 ol/View 创建 OpenLayers 地图实例，并设置地图视图的投影、中心点和缩放级别。
   • 加载 OSM 瓦片图层作为底图。

2. Shapefile 数据解析

   • 借助 shapefile 库解析远程 Shapefile 数据。Shapefile 通常由 .shp 和 .dbf 文件组成，需要同时加载。
   • 使用 GeoJSON 格式化工具将解析的数据转为 OpenLayers 可用的 Feature，并添加到矢量数据源 SourceVector 中。

3. 显示数据

   • 将矢量数据源绑定到 LayerVector 图层，并添加到地图实例中。

示例运行效果

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

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

---

常见问题

1. 跨域问题

   • 如果远程服务器未设置 CORS，可以考虑使用代理服务器解决。

2. 本地文件加载

   • 浏览器无法直接读取本地文件，可以通过后端接口或使用 FileReader 进行加载。

---

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