163：vue+openlayer 根据polygon信息显示多边形，导出KML文件，自定义name和style

还是大剑师兰特

已于 2024-05-09 23:36:55 修改

阅读量1k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： # openlayers综合教程300+ 文章标签： openlayers 导出KML openlayers输出KML 大剑师 openlayers导出文件

于 2022-10-27 18:33:12 首次发布

本文链接：https://blog.youkuaiyun.com/cuclife/article/details/127558192

openlayers综合教程300+ 专栏收录该内容

303 篇文章 ¥259.90 ¥399.90

订阅专栏

该博客由大剑师兰特撰写，介绍如何在Vue项目中结合OpenLayers根据polygon信息绘制多边形，并自定义颜色、名称，详细步骤包括配置方式、源代码展示，同时提供相关文章参考，帮助读者快速实现功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 163个示例

文章目录

一、示例效果图

导出的数据

<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.

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

还是大剑师兰特

关注关注

25
点赞
踩
21

收藏

觉得还不错? 一键收藏
18
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

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

大剑师兰特的GIS世界

10-21

866

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

270：vue+openlayers 利用 MultiPolygon 显示多个多边形

大剑师兰特的GIS世界

06-21

1100

本示例介绍如何在vue+openlayer中利用 MultiPolygon 显示多个多边形。在OpenLayers中，MultiPolygon是一种几何对象，它可以表示由多个Polygon组成的几何集合。

18 条评论您还未登录，请先登录后发表或查看评论

Vue + Openlayers 绘制多边形及展示

c153284575的博客

06-30

3708

<template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/tracing.html" target="_bank">Openlayers多边形</a> </h3> <el-row :gutter="10"> <el-col :span="5"&g.

Openlayers6将圆（Circle）对象转化为多边形（Polygon）

xiao猪仙的博客

08-05

3174

Openlayers6将圆（Circle）对象转化为多边形（Polygon）在openlayers中如何通过一个圆（ol.geom.Circle）对象得到一个（ol.geom.Polygon）对象呢？解决方法： openlayers的ol.geom.Polygon提供了fromCircle这个方法,这个方法就是通过一个圆得到一个正多边形，下面是Polygon.js里面fromCircle方法的源码。可以结合API说明看到，方法有三个参数： 1.circle：一个ol.geom.Circle对象；

OpenLayers6（7）：矢量图层要素导出KML文件

碰碰的博客

05-11

1196

1 版本 OpenLayers：6.14.1 2 相关配置 /** FileSaver.js 在没有原生支持 saveAs() 的浏览器上实现了 saveAs() 接口。 FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的 web App。 */ npm i file-saver 3 API说明 3.1 ol/format/KML Openlayers中用于读/写KML格式数据的要素格式类，API如下： read

Openlayers 踩坑Polygon（传了没闭合的坐标串）

guzicheng1990的博客

06-27

1459

Openlayers踩坑

Vue+Openlayers实现点要素聚合

crowningJewel的博客

09-24

2049

Vue+Openlayers实现点要素聚合在一些场景下（比如地图上的点要素过多，会显得很密集），当我们缩小地图的时候，密集的点会覆盖住地图的信息，显得很杂乱，也会影响地图的渲染，此时，我们便可以使用Cluster对点要素进行聚合。环境的搭建不再赘述，不懂的可以先看第一篇文章。首先是需要引入的包： import Map from 'ol/Map'; import View from 'ol/View'; import Feature from 'ol/Feature'; import VectorSou

149.在 Vue3 中使用 OpenLayers 绘制多边形并导出 KML 文件（含自定义 name 与 style）

最新发布

小彭的博客

07-10

370

本文介绍了如何在Vue3项目中使用OpenLayers实现多边形绘制并导出为KML文件的技术方案。通过CompositionAPI结合ElementPlus和file-saver库，详细讲解了地图初始化、多边形绘制交互以及KML导出的完整流程。核心功能包括：创建基础地图视图、配置多边形绘制工具、自定义图形样式与名称属性、将要素序列化为KML格式文件。文章还提供了完整的代码示例，并建议了拓展应用方向，如支持多种要素类型、个性化样式配置等，适用于各类GIS可视化项目开发。

211：vue+openlayer: 矢量图形的剪切、复制和粘贴

大剑师兰特的GIS世界

03-07

473

第211个本示例的目的是介绍演示如何在vue+openlayers中对矢量图形进行剪切、复制和粘贴。这里可以可以使用ctrl+X，ctrl+C，ctrl+V 进行剪切、复制和粘贴，同时可以缩放，变形、旋转、平移矢量图形。

openlayers6【二十】vue Cluster类实现聚合标注效果

@必意玲

07-21

5132

文章目录1. 写在前面2. Cluster 参数2. Cluster类实现聚合分散3. 完整代码 1. 写在前面前面两篇文章我们讲了矢量图层 VectorLayer的常用的场景 openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解 openlayers6【十八】vue VectorLayer矢量图层实现批量图标点位上图功能详解这篇我们继续写一篇 VectorLayer矢量图层的使用，足见矢量图层在openlayers中的应用是很广泛的也是

openlayers 不规则polygon 按一定范围扩大边界

08-14

openlayers 不规则polygon 按一定范围扩大边界，利用turf.js 缓冲区 buffer ,两行代码实现。输入指定半径要素计算缓冲区，支持的单位是英里、公里和度。

cesium entity导出kml文件

12-01

可以将point lable entity导出文件

vue+高德地图2.0多边形编辑器吸附功能和标注图层

weixin_45661272的博客

03-04

3416

vue+高德地图2.0多边形编辑器吸附功能和标注图层 <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.PolygonEditor"></script> 必须引入AMap.PolygonEditor多边形编辑器插件 <template> <div class="box"> <div id=

Vue + Openlayers 绘制多边形（Polygon）查询区域内的人数（Feature）

c153284575的博客

12-21

2712

完整代码  <template> <div> <div class="query-wrap"> <el-button type="p

cesium 加载kml polygon和mark（贴地形terrain效果）

weixin_33815613的博客

07-30

1314

key code： var options = { camera : viewer.scene.camera, canvas : viewer.scene.canvas, clampToGround: true //开启贴地 }; viewer.camera.flyHome(0); var a = viewer.dataSources....

openlayers读取KML并显示在地图上

GISMaster

12-04

5913

在ol里面读取KML文件时，如果style总是不对，需要设置一个重要的属性 extractStyles: false 不多说了，上代码示例 var projection = ol.proj.get('EPSG:3857'); var map = new ol.Map({ target: 'map', view: new ol...

vue+openlayers根据坐标点绘制多边形

weixin_46074818的博客

05-25

4253

需求：根据多边形轮廓点及中心点在天地图上绘制形状；不同类型的多边形轮廓以颜色区分功能： 1.中心点坐标实现聚合 2.根据地图的缩放级别显示或者隐藏多边形 3.鼠标移入多边形或者中心点实现高亮并显示弹框，移除恢复原来的效果 js代码 var map,layer_poly_A,layer_poly_B,layer_poly_C,layer_poi_A,layer_poi_B,layer_poi_C const overlapOptions = ['A类', 'B类', 'C类']; var app = new

4. Openlayers 点、线、面基本样式渲染（结合Vue 详细教程）

全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。

06-11

5708

在本篇博客中，我们将学习如何在 OpenLayers 中使用样式系统，并在 Vue 项目中绘制点、线、面的基本样式。首先，我们将学习 OpenLayers 的样式系统，然后使用 Vue 创建一个地图组件，并在地图组件中添加点、线、面要素并为其设置样式。

openlayers之鼠标浮动显示feature的名称并高亮显示

qq_41283814的博客

07-07

2851

vue项目中用openlayers实现鼠标浮动选中并显示feature的名称