Openlayers高级交互（4/20）：手绘多边形，导出KML文件，可以自定义name和style

KML（Keyhole Markup Language）是一种基于 XML 的文件格式，用于表示地理数据并在地球浏览器中显示这些数据。KML 文件可以用来展示各种类型的地理信息，包括位置点（Point）、路径（LineString）、多边形（Polygon）以及带有地理位置的文本描述（如描述标签）。KML 文件还可以包含样式信息（Style），用于控制地理特征的外观，比如颜色、标签文本等。

本示例演示如何在vue+openlayers中使用draw来绘制多边形，导出KML文件，一个多边形和多个多边形导出的文件格式存在document这个差异。

效果图

配置说明

1）环境配置参考：https://blog.csdn.net/cuclife/article/details/126195754
2）将示例源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @First published in xiaozhuanlan.com
* @Second published in CSDN
* @First published time: 2024-10-21
*/<template><div class="container"><h3>vue+openlayers: 使用draw绘制多边形，导出KML文件，自定义name和style</h3><p>大剑师兰特, 还是大剑师兰特</p><h4><el-button type="primary" size="mini" @click="drawPolygon()">绘制多边形</el-button><el-button type="danger" size="mini" @click="clearDraw()">清除图形</el-button><el-button type="info" size="mini" @click="exportKML()">导出KML</el-button></h4><div id="vue-openlayers"></div></div>
</template><script>import 'ol/ol.css';import {Map,View} from "ol";import OSM from "ol/source/OSM";import TileLayer from "ol/layer/Tile"import Feature from 'ol/Feature'import LayerVector from 'ol/layer/Vector'import SourceVector from 'ol/source/Vector'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 Draw from 'ol/interaction/Draw'import KML from 'ol/format/KML';import {saveAs} from 'file-saver';export default {name: "exportKML",data() {return {map: null,osmLayer: null,draw: null,source: new SourceVector({wrapX: false,useSpatialIndex: false,features: []}),}},mounted() {this.initMap();},methods: {exportKML() {//设置feature的style和名字this.source.forEachFeature(function(feature) {let style = new Style({fill: new Fill({color: 'transparent'}),stroke: new Stroke({color: 'red'})});feature.setStyle(style);feature.setProperties({'name': 'kmlName'})});let features = this.source.getFeatures();let kmlData = new KML().writeFeaturesNode(features);const str = new XMLSerializer().serializeToString(kmlData)console.log(str);// saveAs(new Blob([str], {// 	type: 'text/plain;charset=utf-8'// }), `aaa.kml`);},clearDraw() {this.source.clear()},drawPolygon() {if (this.draw !== null) {this.map.removeInteraction(this.draw)}let type = 'Polygon'this.draw = new Draw({source: this.source,type: type,style: new Style({fill: new Fill({color: '#fff'}),stroke: new Stroke({width: 2,color: "blue",}),}),})this.map.addInteraction(this.draw)this.draw.on('drawend', (e) => {this.map.removeInteraction(this.draw)})},initMap() {this.osmLayer = new TileLayer({source: new OSM()})let vector = new LayerVector({source: this.source,style: new Style({fill: new Fill({color: 'transparent'}),stroke: new Stroke({width: 2,color: "blue",}),})});this.map = new Map({layers: [this.osmLayer, vector],view: new View({center: [-116, -39.5],zoom: 8,projection: 'EPSG:4326',}),target: 'vue-openlayers'})}},}
</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>

只绘制一个多边形，导出的结果为：

<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd"><Placemark><name>kmlName</name><Style><LineStyle><color>ff0000ff</color><width>1</width></LineStyle><PolyStyle><color>00000000</color></PolyStyle></Style><Polygon><outerBoundaryIs><LinearRing><coordinates>-115.49440198390673,40.3078671261798 -117.53751150018387,37.98808652957346 -115.83492023661958,35.647023542172555 -114.02591701908253,37.583721104476936 -115.49440198390673,40.3078671261798</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark>
</kml>

绘制多个多边形，导出的结果有所不同，多出了document的标签，结果为：

<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd"><Document><Placemark><name>kmlName</name><Style><LineStyle><color>ff0000ff</color><width>1</width></LineStyle><PolyStyle><color>00000000</color></PolyStyle></Style><Polygon><outerBoundaryIs><LinearRing><coordinates>-115.49440198390673,40.3078671261798 -117.53751150018387,37.98808652957346 -115.83492023661958,35.647023542172555 -114.02591701908253,37.583721104476936 -115.49440198390673,40.3078671261798</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name>kmlName</name><Style><LineStyle><color>ff0000ff</color><width>1</width></LineStyle><PolyStyle><color>00000000</color></PolyStyle></Style><Polygon><outerBoundaryIs><LinearRing><coordinates>-111.04638230784502,40.392996689358014 -111.98280750280537,36.45575439236559 -108.59890736647135,35.47676441581613 -107.3858110911818,38.541428690231854 -111.04638230784502,40.392996689358014</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document>
</kml>