当前位置：首页 > article >正文

39.在 Vue3 中使用 OpenLayers 导出 GeoJSON 文件及详解 GEOJSON 格式

article 2024/12/23 5:44:10

一、引言

在 Web 地图开发领域，Vue3 作为一款流行的前端框架，结合强大的 OpenLayers 地图库，能够实现丰富多样的地图功能。其中，将地图数据以 GeoJSON 格式导出是一项常见且实用的需求，本文将深入探讨如何在 Vue3 环境下借助 OpenLayers 达成这一目标，并详细剖析 GeoJSON 格式文件。

二、准备工作

项目搭建

首先，确保你已经创建了一个 Vue3 项目。可以使用 Vue CLI 或者 Vite 等工具快速搭建项目骨架，安装必要的依赖，如 vue、@vue/compiler-sfc 等核心包。

引入 OpenLayers

通过 npm 安装 OpenLayers：npm install ol，然后在需要使用地图功能的组件中引入相关模块，例如：

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';

三、在 Vue3 组件中使用 OpenLayers 绘制图形

为了后续导出 GeoJSON 文件，我们先得在地图上绘制一些图形。以下是一个简单示例，创建一个点要素并添加到地图图层：

<!--
 * @Author: 彭麒
 * @Date: 2024/12/21
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
    <button class="back-button" @click="goBack">返回</button>
    <div class="container">
        <div class="w-full flex justify-center flex-wrap">
            <div class="font-bold text-[24px]">在Vue3中使用OpenLayers导出GeoJSON文件</div>
        </div>
        <h4>
            <el-button type="danger" size="small" @click="exportJson">导出GeoJSON</el-button>
        </h4>
        <div id="vue-openlayers"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import SourceVector from 'ol/source/Vector';
import { Tile } from 'ol/layer';
import OSM from 'ol/source/OSM';
import { saveAs } from 'file-saver';
import router from "@/router";
const goBack = () => {
    router.push('/OpenLayers');
};
const map = ref(null);
const source = new SourceVector({ wrapX: false });
const view = new View({
    projection: "EPSG:4326",
    center: [8.2275, 6.8185],
    zoom: 3
});

const exportJson = () => {
    let feadata = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": { "type": "Point", "coordinates": [102.0, 0.5] },
                "properties": { "prop0": "value0" }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
                    ]
                },
                "properties": {
                    "prop0": "value0",
                    "prop1": 0.0
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]
                    ]
                },
                "properties": {
                    "prop0": "value0",
                    "prop1": { "this": "that" }
                }
            }
        ]
    };

    const content = JSON.stringify(feadata);
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
    saveAs(blob, 'data.geojson');
};

const initMap = () => {
    map.value = new Map({
        target: 'vue-openlayers',
        layers: [
            new Tile({
                source: new OSM()
            }),
        ],
        view: view
    });
};

onMounted(() => {
    initMap();
});
</script>

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

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

这里我们创建了一个按钮，点击时获取矢量源中的所有要素，利用 ol.format.GeoJSON 格式化工具将其转换为 GeoJSON 字符串，接着创建一个 Blob 对象包装数据，生成下载链接，最后模拟点击下载链接实现文件下载，并且记得清理创建的临时 URL。

五、GeoJSON 格式详解

GeoJSON 是一种基于 JavaScript 对象表示法（JSON）的地理空间数据交换格式，它简洁且易于读写，被广泛应用于 Web 地图开发等领域。

基本结构

一个典型的 GeoJSON 对象包含一个 type 字段和一个 coordinates 字段（不同几何类型下该字段结构有差异）。例如，对于一个点要素：

{

    "type": "Feature",

    "geometry": {

    "type": "Point",

    "coordinates": [10, 10]

    },

    "properties": {}

}

这里 type 为 Feature 表示这是一个地理要素，geometry 描述了几何形状（这里是点，坐标为 [10, 10]），properties 可用于存放自定义属性，比如地名、要素类别等信息，当前为空。

2. 几何类型

点（Point）：如上述示例，由单个坐标对表示，在三维空间中可以是 [x, y, z]，但常见二维 [x, y]。

线（LineString）：由一系列坐标点组成的有序数组，例如：

{

    "type": "Feature",

    "geometry": {

    "type": "LineString",

    "coordinates": [[0, 0], [1, 1], [2, 2]]

    }

}

表示一条连接 [0, 0]、[1, 1]、[2, 2] 三个点的折线。

多边形（Polygon）：由一个外部环和零个或多个内部环组成，每个环都是一个坐标点数组，外部环定义多边形边界，内部环表示内部空洞（若有），如：

{

"type": "Feature",

    "geometry": {

    "type": "Polygon",

    "coordinates": [[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]]

    }

}

定义了一个简单的矩形多边形。

3. 要素集合（FeatureCollection）

当有多个地理要素时，通常使用 FeatureCollection 包装，例如：

{

"type": "FeatureCollection",

"features": [{

    "type": "Feature",

    "geometry": {

        "type": "Point",

        "coordinates": [10, 10]

    }

},

    {

    "type": "Feature",

    "geometry": {

        "type": "LineString",

        "coordinates": [[0, 0], [1, 1], [2, 2]]

    }

}]

}

它允许将多个点、线、多边形等要素统一组织，方便传输与存储。

六、总结

通过本文，我们了解了在 Vue3 项目中整合 OpenLayers 实现地图绘制以及将地图要素导出为 GeoJSON 文件的方法，同时深入学习了 GeoJSON 格式的构成与各类几何类型细节。这为后续处理地理空间数据、与后端交互或在不同地图平台间共享数据奠定了坚实基础，开发者可基于此进一步拓展功能，如优化绘制工具、丰富导出选项等，以满足更复杂的业务需求。

查看全文

http://www.kler.cn/a/447498.html