三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据

news/2024/7/22 12:09:44/文章来源:https://blog.csdn.net/aaa_div/article/details/139262789

官网demo地址:

Draw Features 

先初始化地图,准备一个空的矢量图层,用于显示绘制的图形。

initLayers() {const raster = new TileLayer({source: new XYZ({url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",}),});const source = new VectorSource({ wrapX: false });this.vectorlayer = new VectorLayer({source: source,});this.map = new Map({layers: [raster, this.vectorlayer],target: "map",view: new View({center: [-11000000, 4600000],zoom: 4,}),});},

 想要在地图上绘制图形,需要用到一个交互类Draw,new Draw,设置绘制的图形类型。常见类型包括 'Point', 'LineString', 'Polygon', 'Circle', 'MultiPoint', 'MultiLineString', 'MultiPolygon'

addDrawInteraction() {this.draw = new Draw({source: this.vectorlayer.getSource(),type: this.type,});this.map.addInteraction(this.draw);},

Draw还有些常用参数

  1. clickTolerance:

    • 类型: number
    • 描述: 指定绘制时允许的点击距离容差(以像素为单位)。这是为了允许用户在移动鼠标时具有一定的容差,以便更容易地点击绘制。
    • 默认值: 6
  2. features:

    • 类型: ol.Collection<ol.Feature>
    • 描述: 一个 Collection 实例,用于存储绘制的特征。如果指定了此属性,绘制的特征将添加到该集合中。
  3. source:

    • 类型: ol.source.Vector
    • 描述: 一个 VectorSource 实例,用于存储绘制的特征。如果没有指定 features,绘制的特征将添加到此数据源中。
  4. dragVertexDelay:

    • 类型: number
    • 描述: 指定绘制顶点时拖动操作的延迟时间(以毫秒为单位)。
    • 默认值: 500
  5. snapTolerance:

    • 类型: number
    • 描述: 指定绘制时顶点的捕捉容差(以像素为单位)。这是为了使用户更容易将新顶点捕捉到现有顶点上。
    • 默认值: 12
  6. stopClick:

    • 类型: boolean
    • 描述: 是否停止点击事件。设置为 true 时,绘制交互将停止触发地图的点击事件。
    • 默认值: false
  7. maxPoints:

    • 类型: number
    • 描述: 绘制的最大顶点数。对于线和多边形,这个值可以限制绘制的顶点数量。
    • 默认值: Infinity
  8. minPoints:

    • 类型: number
    • 描述: 绘制的最小顶点数。例如,对于多边形,至少需要三个顶点来形成一个闭合的形状。
    • 默认值: 2
  9. style:

    • 类型: ol.style.StyleArray<ol.style.Style>ol.StyleFunction
    • 描述: 指定绘制过程中几何图形的样式。可以是一个样式实例、样式实例数组或一个样式函数。
  10. geometryFunction:

    • 类型: function
    • 描述: 自定义几何生成函数,用于在绘制时生成几何图形。该函数接收两个参数:coordinates(当前坐标数组)和 geometry(当前几何图形)。

下拉框切换时需要先移除之前的Draw,再实例化一个新的Draw添加到地图上。

  changeDrawType() {this.map.removeInteraction(this.draw);this.addDrawInteraction();},

使用removeLastPoint方法可以撤回最后绘制的一个点。

document.getElementById("undo").addEventListener("click",  ()=> {this.draw.removeLastPoint();});

 一般来说,在地图上绘制完图形肯定要拿到图形数据上传或者做其他的操作,我们来看看怎么获取数据。

方法一:直接从vectorlayer图层上获取 

this.vectorlayer.getSource().getFeatures()

方法二:使用Draw的参数features绑定数组

let featureArr = new Collection();
this.draw = new Draw({features: featureArr,
});

features绑定的数组不是普通的数组,Collection是openlayers内部定义的一个类似数组的集合。它拥有一些跟数组类似的方法。具体介绍和方法可以参考官网文档:

OpenLayers v9.2.4 API - Class: Collection

如果获取数据的时机是绘制完成之后点击按钮后获取,那两种方式没什么区别。但若是希望绘制完成后马上获取,使用this.vectorlayer.getSource().getFeatures()就会有一点小问题。。。

 this.draw.on("drawend", (e) => {console.log("draw", e.feature);console.log("获取数据:", this.vectorlayer.getSource().getFeatures());});

已经绘制了一个图形,但是并没有获取到 。this.vectorlayer.getSource().getFeatures()不能实时获取到绘制图形的数据,因为drawend事件里feature还没被加到图层上。

但,也不是没有解决办法,变成异步就可以。

setTimeout(() => {console.log("获取数据:", this.vectorlayer.getSource().getFeatures());
});

而使用Draw的features参数绑定Collection就不会有这个问题。

this.draw.on("drawend", (e) => {console.log("draw", e.feature);console.log("featureArr", this.featureArr);});

总的来说,两种方法都可以,甚至可以定义一个数组,每次绘制完都push一下当前绘制的feature。 具体怎么使用看业务需求喽。

  完整代码:


<template><div class="box"><h1>Draw Features绘制图形</h1><div id="map"></div><div class="row"><div class="col-auto"><span class="input-group"><label class="input-group-text" for="type">Geometry type:</label><selectclass="form-select"id="type"@change="changeDrawType"v-model="type"><option value="Point">Point</option><option value="LineString">LineString</option><option value="Polygon">Polygon</option><option value="Circle">Circle</option><option value="None">None</option></select><input class="form-control" type="button" value="Undo" id="undo" /></span><el-button type="primary" @click="getDrawFeatures">获取</el-button></div></div></div>
</template><script>
import Draw from "ol/interaction/Draw.js";
import { createBox } from "ol/interaction/Draw";
import Map from "ol/Map.js";
import View from "ol/View.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import XYZ from "ol/source/XYZ";
import Feature from "ol/Feature.js";
import Polygon from "ol/geom/Polygon.js";
import Point from "ol/geom/Point.js";
import { Collection } from "ol";
export default {data() {return {map: null,vectorlayer: null,type: "Point",draw: null,featureArr: new Collection(),};},methods: {getDrawFeatures() {console.log("方法一", this.vectorlayer.getSource().getFeatures());console.log("方法二", this.featureArr);},changeDrawType() {this.map.removeInteraction(this.draw);this.addDrawInteraction();},initLayers() {const raster = new TileLayer({source: new XYZ({url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",}),});const source = new VectorSource({ wrapX: false });this.vectorlayer = new VectorLayer({source: source,});this.map = new Map({layers: [raster, this.vectorlayer],target: "map",view: new View({center: [-11000000, 4600000],zoom: 4,}),});},addDrawInteraction() {this.draw = new Draw({source: this.vectorlayer.getSource(),type: this.type,features: this.featureArr,//freehand: true, //是否启用自由绘制模式});this.map.addInteraction(this.draw);this.draw.on("drawend", (e) => {console.log("draw", e.feature);// console.log("获取数据:", this.vectorlayer.getSource().getFeatures());console.log("featureArr", this.featureArr);// setTimeout(() => {//   console.log("source", this.vectorlayer.getSource().getFeatures());// });});},},mounted() {this.initLayers();this.addDrawInteraction();document.getElementById("undo").addEventListener("click", () => {this.draw.removeLastPoint();});},
};
</script>
<style scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}
</style>

     

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1053482.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件性能测试有哪些测试类型和方法?

软件性能测试是一种通过模拟真实用户使用情况&#xff0c;评估软件系统在各种压力和负载下的表现的测试方法。在今天这个讲究效率的时代&#xff0c;软件性能测试是不可或缺的一环。它能帮助开发人员和企业发现潜在的性能问题&#xff0c;提前优化改进&#xff0c;保证软件系统…

Xinstall助力实现App间直接跳转,提升用户体验

在移动互联网时代&#xff0c;App已成为我们日常生活中不可或缺的一部分。然而&#xff0c;在使用各类App时&#xff0c;我们经常会遇到需要在不同App之间切换的情况&#xff0c;这时如果能够直接跳转&#xff0c;将会大大提升用户体验。而Xinstall正是这样一款能够帮助开发者实…

设计模式19——观察者模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 观察者模式&#xff08;Observ…

LearnOpenGL(二十)之立方体贴图

一、创建立方体贴图 首先&#xff0c;生成一个纹理&#xff0c;并将其绑定到纹理目标GL_TEXTURE_CUBE_MAP&#xff1a; unsigned int textureID; glGenTextures(1, &textureID); glBindTexture(GL_TEXTURE_CUBE_MAP, textureID); 因为立方体贴图包含有6个纹理&#xff0…

MySQL select for update 加锁

背景 当多人操作同一个客户下账号的时候&#xff0c;希望顺序执行&#xff0c;某个时刻只有一个人在操作&#xff1b;当然可以通过引入redis这种中间件实现&#xff0c;但考虑到并发不会很多&#xff0c;所以不想再引入别的中间件。 表结构 create table jiankunking_accoun…

光伏智慧化运营解决方案的应用和价值

在社会对新能源需求的不断扩大&#xff0c;光伏已经成为了可再生能源的重要组成部分&#xff0c;随着光伏电站数量和规模的不断扩大&#xff0c;相关企业和用户都就开始关注如何能够高效精准的进行电站管理&#xff0c;对此&#xff0c;鹧鸪云提出了光伏智慧化运营解决方案&…

短视频内容创意方法有哪些?成都科成博通文化传媒公司

短视频内容创意方法有哪些&#xff1f; 随着移动互联网的迅猛发展&#xff0c;短视频平台已成为人们日常生活中不可或缺的一部分。短视频以其短平快的特点&#xff0c;迅速吸引了大量用户。然而&#xff0c;面对海量的短视频内容&#xff0c;如何让自己的作品脱颖而出&#xf…

极验3逆向 JS逆向最新点选验证码 逆向分析详解

目录 声明&#xff01; 一、请求流程分析 二、w参数生成位置 三、主要问题 四、结果展示 原创文章&#xff0c;请勿转载&#xff01; 本文内容仅限于安全研究&#xff0c;不公开具体源码。维护网络安全&#xff0c;人人有责。 声明&#xff01; 本文章中所有内容仅供学习交流…

SEO之核心关键词(二)

初创企业或者需要建站的朋友看以下两篇文章&#xff0c;谢谢支持&#xff1a; 我给不会敲代码又想搭建网站的人建议新手上云 &#xff08;接上一篇。。。。&#xff09; 4、查询搜索次数 经过自己及朋友、同事的头脑风暴和检查竞争对手网站之后&#xff0c;再到Google 关键词…

VSCODE中F12无法跳转,快捷键设置F12和insert混淆了

异常现象 最近用新电脑&#xff08;华为&#xff09;的时候&#xff0c;发现VSCODE经常按F12无法跳转&#xff0c;在快捷键设置当中&#xff0c;也是设置成功的&#xff1b; 此时重新去快捷键设置&#xff0c;会发现按 F12变为了Insert 解决方法 华为笔记本的Fx按键&#x…

(2020|ICML PMLR,线性 Transformer,核函数,RNN)Transformer 是 RNN

Transformers are RNNs: Fast Autoregressive Transformers with Linear Attention 公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 线性 Transformers 3.1. Transformer 3.2.…

从华为云Redis到AWS ElastiCache的操作方法

越来越多企业选择出海&#xff0c;那么就涉及到IT系统的迁移&#xff0c;本文将详细介绍如何将华为云Redis顺利迁移到AWS ElastiCache的操作方法&#xff0c;九河云将为您介绍迁移步骤以帮助您顺利完成这一重要任务。 **1. 确定迁移计划** 在开始迁移之前&#xff0c;首先要制…

2024年上半年软件设计师试题及答案(回忆版)

目录 基础知识选择题案例题1.缺陷识别的数据流图2.球队、球员、比赛记录的数据库题3.用户、老师、学生、课程用例图4.算法题5.程序设计题基础知识选择题 树的节点,度为4的有4个,度为3的有8个,度为2个有6个,度为1的有10个,问有几个叶子结点 二位数组,一个元素2个字节,A0…

Niantic利用Meta Llama让数字生物栩栩如生

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【Ambari】Docker 安装Ambari 大数据单机版本

目录 一、前期准备 1.1 部署 docker 1.2 部署 docker-compose 1.3 版本说明 二 、镜像构建启动 2.1 系统镜像构建 2.2 安装包源镜像构建 2.3 kdc镜像构建 2.4 集群安装 2.5 容器导出为镜像 三、Ubuntu环境安装测试 3.1 环境准备 3.2 集群容器启动 一、前期准备 1.…

Golang协程和通道

文章目录 协程&#xff08;goroutine&#xff09;基本介绍GMP模型协程间共享变量 通道&#xff08;channel&#xff09;基本介绍channel的定义方式channel的读写channel的关闭channel的遍历方式只读/只写channelchannel最佳案例select语句 协程&#xff08;goroutine&#xff0…

具有固定宽度的盒子:\makebox, \parbox

makebox \makebox 是 LaTeX 中的一个命令&#xff0c;用于创建一个具有固定宽度的盒子&#xff0c;并在该盒子内放置内容。这个命令可以用于控制文本或对象的位置和对齐。 语法如下&#xff1a; \makebox[<width>][<alignment>]{<content>}其中&#xff1…

C++ 常量和变量

1 常量 具体把数据写出来 2,3&#xff0c;4&#xff1b;1.2 1.3;“Hello world!”,“C” cout<<2015 常量&#xff1a;不能改变的量。 字面常量&#xff08;字面量、直接常量&#xff09;:直接写出的数据。 符号常量&#xff1a;用符号表示数据&#xff0c;但它一旦确定…

边缘计算网关的主要功能有哪些?天拓四方

随着物联网&#xff08;IoT&#xff09;的快速发展和普及&#xff0c;边缘计算网关已经成为了数据处理和传输的重要枢纽。作为一种集成数据采集、协议转换、数据处理、数据聚合和远程控制等多种功能的设备&#xff0c;边缘计算网关在降低网络延迟、提高数据处理效率以及减轻云数…

视频监控平台AS-V1000 的场景管理,一键查看多画面视频的场景配置、调用、管理(一键浏览多路视频)

目录 一、场景管理的定义 二、场景管理的功能和特点 1、功能 &#xff08;1&#xff09;场景配置 &#xff08;2&#xff09;实时监控 &#xff08;3&#xff09;权限管理 2、特点 三、AS-V1000的场景配置和调用 1、场景配置 &#xff08;1&#xff09;实时视频预览 …