当前位置: 首页 > news >正文

openlayers 绘图功能,绘制多边形,draw组件的使用,一个简单的需求引发的思考(一)

1 需求

使用openlayers绘图功能绘制多边形

2 分析

主要是openlayers中draw功能的使用,感觉比较简单,祖传CV大法搞起来

3 实现

为了方便,就不加载底图了,直接使用绘制功能

2.1 简单实现

<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import { Fill, Stroke } from 'ol/style.js';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();onMounted(() => {initMap();initDraw();
});const initMap = () => {map.value = new Map({target: 'map',view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: new Style({stroke: new Stroke({color: 'orange',width: 2}),fill: new Fill({color: [203, 150, 62, 0.5]})})})]});
};const initDraw = () => {draw.value = new Draw({source: source,type: 'Polygon'});draw.value.on('drawstart', e => {console.log('e', e);});draw.value.on('drawend', e => {console.log('coord', e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;background: #000;
}
</style>

2.2 需求更新1

新需求:

  • 自定义绘制时的样式,没有绘制完成时,显示虚线,顶点增加Point
  • 绘制完成后每个顶点需要显示一个Point

分析:

这里主要是styleFunction的灵活使用

实现:

<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Circle, Fill, Stroke } from 'ol/style.js';
import {  Point } from 'ol/geom';const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();onMounted(() => {initMap();initDraw();
});const initMap = () => {map.value = new Map({target: 'map',view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: styleFunc})]});
};const initDraw = () => {draw.value = new Draw({source: source,type: 'Polygon',style: drawStyleFunc});draw.value.on('drawstart', e => {console.log('e', e);});draw.value.on('drawend', e => {console.log('coord', e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};const drawStyleFunc = (feature) => {const styles = [];const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord.length - 1; i++) {styles.push(new Style({geometry: new Point(coord[i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}styles.push(new Style({fill: new Fill({color: [255, 255, 255, 0.5]}),stroke: new Stroke({color: 'red',lineDash: [10],width: 2})}));return styles;
};const styleFunc = (feature) => {const styles = [];const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord[0].length - 1; i++) {styles.push(new Style({geometry: new Point(coord[0][i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}styles.push(new Style({fill: new Fill({color: [128, 128, 255, 0.5]}),stroke: new Stroke({color: 'blue',width: 2})}));return styles;
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;background: #000;
}
</style>

2.2 需求更新2

新需求:

  • 确定的两个顶点之间变为实线
  • 取消跟随鼠标的Point,影响定位
  • 取消绘制时的填充

分析:

这里主要是styleFunction的灵活使用

实现:

<template><div id="map" class="map"></div>
</template><script setup lang="ts">
import { Map, View } from 'ol';
import { get } from 'ol/proj';
import { Style } from 'ol/style';
import Draw from 'ol/interaction/Draw.js';
import { Vector as VectorSource } from 'ol/source.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import { Circle, Fill, Stroke } from 'ol/style.js';
import {  LineString, Point } from 'ol/geom';const projection = get('EPSG:4326');
const source = new VectorSource();
const map = ref();
const draw = ref();onMounted(() => {initMap();initDraw();
});const initMap = () => {map.value = new Map({target: 'map',view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: styleFunc})]});
};const initDraw = () => {draw.value = new Draw({source: source,type: 'Polygon',style: drawStyleFunc});draw.value.on('drawstart', e => {console.log('e', e);});draw.value.on('drawend', e => {console.log('coord', e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};const drawStyleFunc = (feature) => {const styles = [];const type = feature.getGeometry().getType();const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord.length - 1; i++) {styles.push(new Style({geometry: new Point(coord[i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}if (type === 'LineString') {for (let i = 0; i < coord.length - 1; i++) {styles.push(new Style({geometry: new LineString([coord[i], coord[i + 1]]),stroke: new Stroke({color: 'orange',lineDash: coord.length > 2 && i < coord.length - 2 ? [] : [10],width: 2})}));}}return styles;
};const styleFunc = (feature) => {const styles = [];const coord = feature.getGeometry().getCoordinates();for (let i = 0; i < coord[0].length - 1; i++) {styles.push(new Style({geometry: new Point(coord[0][i]),image: new Circle({radius: 4,fill: new Fill({color: '#ffff'}),stroke: new Stroke({color: 'orange',width: 2})})}));}styles.push(new Style({fill: new Fill({color: [128, 128, 255, 0.5]}),stroke: new Stroke({color: 'blue',width: 2})}));return styles;
};
</script>
<style scoped lang="scss">
.map {width: 100%;height: 100%;background: #000;
}
</style>

存在问题:

  • 在点击鼠标后并且鼠标有移动时,前一段虚线才会变成实线,并且顶点加上Point,因为只有鼠标移动才会有新的坐标点加入到绘制,因为openlayers没有提供绘制过程中的钩子函数,所以只能是当前效果
  • 有需要时drawStyleFunction可以和styleFuntion合并成一个

相关文章:

openlayers 绘图功能,绘制多边形,draw组件的使用,一个简单的需求引发的思考(一)

1 需求 使用openlayers绘图功能绘制多边形 2 分析 主要是openlayers中draw功能的使用&#xff0c;感觉比较简单&#xff0c;祖传CV大法搞起来 3 实现 为了方便&#xff0c;就不加载底图了&#xff0c;直接使用绘制功能 2.1 简单实现 <template><div id"ma…...

【Flutter】 TextField限制长度时, 第三方手写输入法、ios原始拼音输入法输入被吞问题

问题描述 TextField限制长度时&#xff0c; 当你的输入字符长度已经到了最大值-1时&#xff0c;使用第三方手写输入法或者ios原生拼音输入法输入liang&#xff08;什么拼音都行&#xff0c;这里只是举例&#xff09;&#xff0c;输到i那么li都会消失。 原因分析 这是因为第三…...

快递一键查询,只需快递单号,轻松掌握全程物流信息,让您的包裹追踪无忧!

在快节奏的现代生活中&#xff0c;快递已经成为我们生活中不可或缺的一部分。无论是网购的宝贝、亲朋好友寄来的礼物&#xff0c;还是工作中的紧急文件&#xff0c;快递都承载着我们的期待和需要。然而&#xff0c;面对众多的快递公司和复杂的查询流程&#xff0c;如何快速、准…...

【Java探索之旅】继承结构 继承和组合 protected final

文章目录 &#x1f4d1;前言一、继承1.1 继承关系的代码块1.2 protected关键字1.3 继承方式1.4 final关键字1.5 继承与组合 &#x1f324;️全篇总结 &#x1f4d1;前言 在面向对象编程中&#xff0c;继承是一种重要的概念&#xff0c;它允许我们创建一个新类&#xff0c;从现有…...

Ubuntu20.04-SLAM软件安装

目录 安装环境安装问题1.Ubuntu20.04在T440p上的安装问题1.1 安装后提示"x86/cpu:VMX(outside TXT) disabled by BIOS"1.2 ACPI Error:Needed type[Reference],found [Integer] 等错误1.3 ima: Error Communicating to TPM chip1.4 locate命令的安装 2.中文输入法-go…...

OSI七层网络参考模型

一、物理层 我们要发送出去的数据在计算机里只不过是无数的0和1&#xff0c;0或1就叫做比特&#xff0c;物理层就是把这些比特用不同的媒介传输出去&#xff0c;可以用电、光或者其他形式的电磁波来表示和传输信号&#xff0c;数据从网络接口出去以后&#xff0c;会经过不同的网…...

RAG与知识库搭建

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&…...

MySQL提权之UDF提权

1、前言 最近遇到udf提权&#xff0c;几经周折终于搞懂了。感觉挺有意思的&#xff0c;渗透思路一下子就被打开了。 2、什么是udf提权 udf 全称为user defined function&#xff0c;意思是用户自定义函数。用户可以对数据库所使用的函数进行一个扩展&#xff08;windows利用…...

【设计模式】结构型设计模式之 组合模式

介绍 这里的组合模式&#xff0c;与之前的设计模式中的"组合关系"完全是两码事&#xff0c;这里的组合模式主要用来处理结构为树形的数据。 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树状结构来表示…...

我给KTV服务生讲解防抖,他竟然听懂了

端午节三天假期&#xff0c;的最后一天&#xff0c;我和朋友闲来无事&#xff0c;想着去唱会儿歌吧&#xff0c;好久不唱了&#xff0c;于是吃了午饭&#xff0c;石景山就近找了一家KTV&#xff0c;我们团好了卷就过去了。 装修还算不错&#xff0c;很快找到服务生&#xff0c…...

抽象java入门1.3.1

前言&#xff1a; 本期内容是为了更好补充关于方法&#xff08;函数&#xff09;的定义 开始&#xff1a; 函数&#xff08;function&#xff09;表示每个输入值对应唯一输出值的一种对应关系。 核心在于&#xff1a;输入值和输出值这两个元素 真的吗&#xff1f; 错&…...

使用Rufus工具制作Ubuntu To Go——很详细

一、准备工作 准备工具&#xff1a; 1、下载Rufus(主角)软件 2、准备一个U盘&#xff08;制作启动盘&#xff0c;32G足够&#xff09; 3、准备一个U盘或硬盘&#xff08;小白128G足够&#xff0c;装Ubuntu系统&#xff09; 4、下载Ubuntu系统镜像文件 1、下载软件Rufus 先来看…...

Android Jetpack Compose 实现一个电视剧选集界面

文章目录 需求概述效果展示实现思路代码实现总结 需求概述 我们经常能看到爱奇艺或者腾讯视频这类的视频APP在看电视剧的时候都会有一个选集的功能。如下图所示 这个功能其实很简单&#xff0c;就是绘制一些方块&#xff0c;在上面绘制上数字&#xff0c;还有标签啥的。当用户…...

C++多线程并发

文章目录 C多线程并发std::chronoC中的多线程&#xff1a;std::thread主线程等待子线程结束&#xff1a;join主线程分离子线程&#xff1a;detach异步&#xff1a;std::async异步的另一种用法&#xff1a;std::launch::deferredstd::async的底层实现&#xff1a;std::promisest…...

新火种AI|摊上事儿了!13名OpenAI与谷歌员工联合发声:AI失控可能导致人类灭绝...

作者&#xff1a;小岩 编辑&#xff1a;彩云 2024年&#xff0c;OpenAI的CEO Sam Altman就没有清闲过&#xff0c;他似乎一直走在解决麻烦的路上。最近&#xff0c;他的麻烦又来了。 当地时间6月4日&#xff0c;13位来自OpenAI和Google Deep Mind的现任及前任员工联合发布了…...

Web前端后端精通:深度解析与技能进阶

Web前端后端精通&#xff1a;深度解析与技能进阶 在数字时代的浪潮中&#xff0c;Web前端后端技术的精通成为了信息科技领域的核心竞争力。本文将从四个方面、五个方面、六个方面和七个方面深入探讨Web前端后端技术的精髓&#xff0c;带领读者领略这一领域的魅力与挑战。 一、…...

【C语言】09.函数递归

递归其实是⼀种解决问题的方法&#xff0c;在C语言中&#xff0c;递归就是函数自己调用自己。 一、递归的介绍 1.1递归的思想 把⼀个大型复杂问题层层转化为⼀个与原问题相似&#xff0c;但规模较小的子问题来求解&#xff1b;直到子问题不能再被拆分&#xff0c;递归就结束…...

php高级之框架源码、宏扩展原理与开发

在使用框架的时候我们经常会看到如下代码 类的方法不会显示地声明在代码里面&#xff0c;而是通过扩展的形式后续加进去&#xff0c;这么做的好处是可以降低代码的耦合度、保证源码的完整性、团队开发的时候可以分别写自己的服务去扩展类&#xff0c;减少代码冲突等等。我自己…...

(2024,示例记忆,模型记忆,遗忘,差分评估,概率评估)深度学习中的记忆:综述

Memorization in deep learning: A survey 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0 摘要 1 引言 0 摘要 深度神经网络&#xff08;DNNs&#xff09;驱动的深度学习&#xff…...

硬件产品经理

边端协调管理平台 主页一&#xff1a;模型管理1.1 边侧模型管理 二&#xff1a;配置管理2.1 终端软件配置管理 三&#xff1a;设备管理3.1 区域位置管理3.2 工控机管理&#xff08;其实就是围绕授权&#xff09;3.3 生产设备管理3.4 设备运行管理 四&#xff1a;数据服务4.1 实…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...