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

npm install ol

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