29.在Vue 3中使用OpenLayers读取WKB数据并显示图形

news2024/12/15 15:36:01

在Web开发中，地理信息系统（GIS）应用越来越重要，尤其是在地图展示和空间数据分析的场景中。OpenLayers作为一个强大的开源JavaScript库，为开发者提供了丰富的地图展示和空间数据处理能力。在本篇文章中，我将向大家展示如何在Vue 3中使用OpenLayers读取WKB（Well-Known Binary）格式的数据并显示图形。

什么是WKB？

WKB（Well-Known Binary）是空间数据的一种存储格式，广泛用于地理信息系统（GIS）中，用于表示几何对象。它是二进制格式，相比于其文本格式WKT（Well-Known Text），WKB在存储和传输时更为紧凑和高效。WKB通常包含坐标信息，可以表示点、线、多边形等几何形状。

例如，一个表示点的WKB数据可能如下：

01010000005839B4C876BEF33F1A6FDC5C8B3C7C0

WKB格式支持多种几何类型，例如：点（Point）、线（LineString）、多边形（Polygon）等。

在Vue 3中使用OpenLayers读取WKB数据

OpenLayers是一个功能强大的地图库，支持地图渲染、矢量数据操作以及多种地图坐标系。我们将通过OpenLayers的WKB格式解析器来读取WKB数据，并在Vue 3中展示出来。

项目结构

首先，我们创建一个Vue 3项目，使用Vue 3的Composition API来管理数据和生命周期。你可以使用Vue CLI创建项目，或者在现有项目中集成OpenLayers。

安装OpenLayers库：

npm install ol

Vue 3组件代码

我们将在Vue 3中使用<script setup>语法，结合OpenLayers来读取WKB数据并显示相应的图形。以下是完整代码：

<!--
 * @Author: 彭麒
 * @Date: 2024/12/14
 * @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读取WKB数据，显示图形</div></div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {transform} from 'ol/proj';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import WKB from 'ol/format/WKB';
const map = ref(null);
const source = ref(new VectorSource({wrapX: false}));
const wkb = ref(
  '0103000000010000000500000054E3A59BC4602540643BDF4F8D1739C05C8FC2F5284C4140EC51B81E852B34C0D578E926316843406F1283C0CAD141C01B2FDD2406012B40A4703D0AD79343C054E3A59BC4602540643BDF4F8D1739C0'
);
import router from "@/router";
const goBack = () => {
  router.push('/OpenLayers');
};
const readWKB = () => {
  const format = new WKB();
  const feature = format.readFeature(wkb.value, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857',
  });
  source.value.addFeature(feature);
};

const initMap = () => {
  map.value = new Map({
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
      new VectorLayer({
        source: source.value,
        style: new Style({
          fill: new Fill({
            color: 'orange',
            opacity: 0.4,
          }),
          stroke: new Stroke({
            width: 2,
            color: '#ff0',
          }),
          image: new Circle({ // 点样式
            radius: 5,
            fill: new Fill({
              color: '#ff0000',
            }),
          }),
        }),
      }),
    ],
    target: 'vue-openlayers',
    view: new View({
      center: transform([86, -37.0902], 'EPSG:4326', 'EPSG:3857'),
      projection: 'EPSG:3857',
      zoom: 2,
    }),
  });
};

onMounted(() => {
  initMap();
  readWKB();
});

</script>

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

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

代码解释

组件结构：
- 使用Vue 3的<script setup>语法和Composition API。
- ref用于定义响应式数据，如map（地图实例）、source（矢量数据源）、wkb（WKB数据）。
WKB格式解析：
- 我们使用OpenLayers的WKB格式解析器来解析WKB数据。WKB格式提供了readFeature方法，将二进制WKB数据转换为OpenLayers的Feature对象，并且可以指定源坐标系和目标坐标系。
地图初始化：
- 使用Map和View来创建地图并设置视图。通过TileLayer加载OSM地图底图，使用VectorLayer加载并显示WKB解析后的矢量数据。
地图样式：
- 使用Style、Fill、Stroke、Circle等OpenLayers的样式类来定制矢量图层的样式，包括填充颜色、边框样式和点样式。
生命周期钩子：
- 在onMounted生命周期钩子中，我们初始化地图并读取WKB数据。