151.Vue3中使用OpenLayers在3857坐标系下导出KML文件，自定义name和style-CSDN博客

本文链接：https://blog.csdn.net/Miller777_/article/details/149323709

📷 实现效果预览

支持根据经纬度坐标绘制多边形；

支持自定义填充色、边框色；

支持 KML 文件导出（符合 Google Earth 和 ArcGIS 等软件标准）；

🧠 背景知识

🔹 什么是 EPSG:3857 与 EPSG:4326？

EPSG:4326：WGS84 地理坐标系（经纬度），Google Earth、KML 默认坐标系；
EPSG:3857：Web Mercator 投影坐标系（以米为单位），OpenLayers 默认地图坐标系；

❗KML 文件要求使用 EPSG:4326，所以在导出前必须做坐标转换。

🧱 技术栈说明

名称	说明
Vue 3	采用 `<script setup>` 语法
OpenLayers	地图引擎，支持矢量绘制、坐标转换
file-saver	前端导出文件
Element Plus	UI 框架，按钮样式美观

✨ 功能亮点

使用 Geo 坐标绘制多边形（自动转为 Web 地图坐标系展示）；
自定义颜色、名称等属性；
导出为符合标准的 KML 文件；
支持坐标系双向转换：EPSG:4326 → EPSG:3857（展示） → EPSG:4326（导出）；

💻 项目核心代码（Vue 3 + OpenLayers）

📁 项目目录结构简要（组件式开发）

src/
├─ components/
│  └─ ExportKmlMap.vue    ← 本文主角
├─ App.vue
└─ main.ts

🧩 ExportKmlMap.vue（完整代码）

<!--
 * @Author: 彭麒
 * @Date: 2025/7/14
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">
        Vue3中使用OpenLayers在3857坐标系下导出KML文件，自定义name和style
      </div>
    </div>
    <h4>
      <el-button type="primary" size="small" @click="showPolygon">根据坐标点显示多边形</el-button>
      <el-button type="danger" size="small" @click="clearDraw">清除图形</el-button>
      <el-button type="info" size="small" @click="exportKML">导出KML</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>
<script setup>
import 'ol/ol.css'
import { onMounted, ref } from 'vue'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import { Polygon } from 'ol/geom'
import { Fill, Stroke, Style } from 'ol/style'
import KML from 'ol/format/KML'
import { saveAs } from 'file-saver'
import { fromLonLat } from 'ol/proj'

// 地图实例
const map = ref(null)

// 矢量图层数据源
const source = new VectorSource({
  wrapX: false,
  features: [],
})

// 多边形数据
const polygonsData = [
  {
    coord: [
      [-72.16, 41.4134],
      [-72.0176, 41.3896],
      [-72.0643, 41.23],
      [-72.2064, 41.2537],
      [-72.16, 41.4134]
    ],
    name: 'polygon1',
    color: ['yellow', 'blue']
  }
]

// 地图初始化
const initMap = () => {
  const baseLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
    })
  })

  const vectorLayer = new VectorLayer({
    source,
    style: new Style({
      fill: new Fill({ color: 'transparent' }),
      stroke: new Stroke({ width: 2, color: 'blue' }),
    })
  })

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [baseLayer, vectorLayer],
    view: new View({
      center: fromLonLat([-72.60, 41.4134]),
      zoom: 9,
      projection: 'EPSG:3857'
    })
  })
}

// 自定义样式
const featureStyle = (fillColor, strokeColor) => {
  return new Style({
    fill: new Fill({ color: fillColor }),
    stroke: new Stroke({ color: strokeColor, width: 2 }),
  })
}

// 显示多边形
const showPolygon = () => {
  clearDraw()
  const features = polygonsData.map(item => {
    const polygon = new Polygon([item.coord])
    polygon.transform('EPSG:4326', 'EPSG:3857')
    const feature = new Feature({ geometry: polygon })
    feature.setStyle(featureStyle(item.color[0], item.color[1]))
    feature.setProperties({ name: item.name })
    return feature
  })
  source.addFeatures(features)
}

// 清除图形
const clearDraw = () => {
  source.clear()
}

// 导出KML
const exportKML = () => {
  const features = source.getFeatures()
  features.forEach(f => {
    f.getGeometry().transform('EPSG:3857', 'EPSG:4326')
  })
  const kmlData = new KML().writeFeaturesNode(features)
  const str = new XMLSerializer().serializeToString(kmlData)
  saveAs(new Blob([str], { type: 'text/plain;charset=utf-8' }), `export.kml`)
}

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;
}
</style>