openLayers--绘制多边形、获取视图的中心点、获取当前地图等级、设置地图等级

openLayers绘制多边形、获取视图中心点

  • 前言
  • 效果图
  • 1、导入LineString
  • 2、创建添加多边形
  • 3、定义多变形样式
  • 4、获取当前视图的中心点
  • 5、获取当前视图等级
  • 6、设置地图等级

前言

上一篇文章在vue项目中绘制了openlayers绘制了地图和标记点,本篇文章讲解openlayers绘制多边形
通过LineString来进行绘制、获取视图的中心位置、获取当前地图等级、设置地图等级
openLayers演示网址

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、导入LineString

import { Point, LineString } from “ol/geom”;

2、创建添加多边形

// 添加多边形addExtent (extent) {if (this.vectorSource) {// this.vectorSource.clear()} else {//矢量标注的数据源this.vectorSource = new VectorSource({features: []})// //矢量标注图层this.vectorLayer = new VectorLayer({source: this.vectorSource});this.map.addLayer(this.vectorLayer);}// // 创建要素,设置其样式var newPolygon = new Feature({geometry: new LineString([[110.3014, 14.82],[112.79, 14.82],[114.6636, 18.2977],[111.687, 18.897],[110.3014, 14.82],])});newPolygon.setStyle(this.createfeature(newPolygon));this.vectorSource.addFeature(newPolygon);},

3、定义多变形样式

// 定义多边形createfeature () {return new Style({fill: new Fill({color: 'rgba(1, 210, 241, 0.2)'}),stroke: new Stroke({color: 'rgba(255, 0, 0)',width: 4,}),})},

4、获取当前视图的中心点

	// 获取范围getExtent () {const size = this.map.getSize();const extent = this.map.getView().calculateExtent(size);return extent},// 获取地图视野中心点getCenter () {const center = getCenter(this.getExtent())this.addVectorLabel(center)},

5、获取当前视图等级

// 获取当前的视图等级getZoom(){alert(this.map.getView().getZoom());}

6、设置地图等级

	// 设置当前缩放等级setZoom(){this.map.getView().setZoom(10);}

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

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

相关文章

【IDEA使用maven package时,出现依赖不存在以及无法从仓库获取本地依赖的问题】

Install Parent project C:\Users\lxh\.jdks\corretto-1.8.0_362\bin\java.exe -Dmaven.multiModuleProjectDirectoryD:\学习\projectFile\study\study_example_service "-Dmaven.homeD:\Program Files\JetBrains\IntelliJ IDEA2021\plugins\maven\lib\maven3" "…

独创改进 | RT-DETR 引入双向级联特征融合结构 RepBi-PAN | 附手绘结构图原图

本专栏内容均为博主独家全网首发,未经授权,任何形式的复制、转载、洗稿或传播行为均属违法侵权行为,一经发现将采取法律手段维护合法权益。我们对所有未经授权传播行为保留追究责任的权利。请尊重原创,支持创作者的努力,共同维护网络知识产权。 文章目录 YOLOv6贡献RepBi-…

vuepress使用及拓展(骚操作)

官网 文章目录 背景问题思考方案思索实现方案实现结果存在问题 背景 当前开放平台文件静态保存在前端项目,每次修改都需要通过修改文件发版的方式,很不便利。 1、需要前端手动维护 2、每次小的修改都要发版 随着对接业务的增多,对接文档的变…

【教3妹学编程-算法题】117. 填充每个节点的下一个右侧节点指针 II

2哥 : 3妹,听说你昨天去面试了,怎么样啊? 3妹:嗨,别提了,让我回去等通知,估计是没有通知了, 还浪费我请了一天假。 2哥 : 你又请假了啊, 你是怎么跟你那个严厉的老板请假…

一天写一个(前端、后端、全栈)个人简历项目(附详源码)

一、项目简介 此项目是用前端技术HTMLCSSjquery写的一个简单的个人简历项目模板,图片可点击放大查看,还可以直接下载你的word或者PDF的简历模板。 如果有需要的同学可以直接拿去使用,需自行填写个人的详细信息,发布,…

ChinaSoft 论坛巡礼 | CCF-华为胡杨林基金-系统软件专项(海报)论坛

2023年CCF中国软件大会(CCF ChinaSoft 2023)由CCF主办,CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办,将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

自动驾驶学习笔记(六)——Apollo安装

#Apollo开发者# 学习课程的传送门如下,当您也准备学习自动驾驶时,可以和我一同前往: 《自动驾驶新人之旅》免费课程—> 传送门 《2023星火培训【感知专项营】》免费课程—>传送门 文章目录 前言 Apollo安装 硬件配置 安装Ubuntu…

手机转接器实现原理,低成本方案讲解

USB-C PD协议里,SRC和SNK双方之间通过CC通信来协商请求确定充电功率及数据传输速率。当个设备需要充电时,它会发送消息去给适配器请求充电,此时充电器会回应设备的请求,并告知其可提供的档位功率,设备端会根据适配器端…

USB PD v1.0快速充电通信原理

1 原理 本篇文章讲的快速充电是指USB论坛所发布的USB Power Delivery快速充电规范(通过VBUS直流电平上耦合FSK信号来请求充电器调整输出电压和电流的过程),不同于本人发布的另一篇文章所讲的高通Quick Charger 2.0规范,因为高通QC…

虹科示波器 | 汽车免拆检修 | 2012 款上汽大众帕萨特车 发动机偶尔无法起动

一、故障现象 一辆2012款上汽大众帕萨特车,搭载CFB发动机,累计行驶里程约为12万km。车主反映,将点火开关置于起动挡,偶尔只能听到“咔哒”一声,起动机没有反应,类似蓄电池亏电时起动发动机的现象。为此&…

【广州华锐互动】VR历史古城复原:沉浸式体验古代建筑,感受千年风华!

在科技日新月异的今天,虚拟现实(VR)技术已经成为了我们生活中不可或缺的一部分。从娱乐游戏到医疗健康,从教育培训到房地产销售,VR技术的应用领域日益广泛。而近年来,VR技术在文化遗产保护和古迹复原方面的…

多模态论文阅读之VLMo

VLMo泛读 TitleMotivationContributionModelExpertimentsSummary Title VLMo:Unified Vision_Langugae Pre-Training with Mixture-of-Modality-Experts Motivation CLIP和ALIGN都采用dual-encoder的方式分别编码图像和文本,模态之间的交互采用cosine similarity…

力扣:有效的括号

自己编写的代码 。 自己的思路&#xff1a; class Solution { private:unordered_map<char,int>symbolValues{{(,1},{),2},{{,4},{},5},{[,8},{],9}, };public:bool isValid(string s) {bool flagfalse;int lenss.length();if (lens % 2 ! 0){flag false;}for…

通过51单片机控制28byj48步进电机按角度正反转旋转

一、前言 本项目基于STC89C52单片机&#xff0c;通过控制28BYJ-48步进电机实现按角度正反转旋转的功能。28BYJ-48步进电机是一种常用的电机&#xff0c;精准定位和高扭矩输出&#xff0c;适用于许多小型的自动化系统和机械装置。 在这个项目中&#xff0c;使用STC89C52单片机…

QT 实现解密m3u8文件

文章目录 概要如何解密M3U8文件呢实现思路和代码序列图网络请求解密 结论 概要 视频文件很多已M3U8文件格式来提供&#xff0c;先复习下什么是M3U8文件&#xff01;用QT的 mutimedia框架来播放视频时&#xff0c;有的视频加载慢&#xff0c;有的视频加载快&#xff0c;为啥&am…

K8s:部署 CNI 网络组件+k8s 多master集群部署+负载均衡及Dashboard k8s仪表盘图像化展示

目录 1 部署 CNI 网络组件 1.1 部署 flannel 1.2 部署 Calico 1.3 部署 CoreDNS 2 负载均衡部署 3 部署 Dashboard 1 部署 CNI 网络组件 1.1 部署 flannel K8S 中 Pod 网络通信&#xff1a; ●Pod 内容器与容器之间的通信 在同一个 Pod 内的容器&#xff08;Pod 内的容…

Android性能优化--Perfetto用SQL性能分析

Android性能优化–Perfetto用SQL性能分析 文章目录 Android性能优化--Perfetto用SQL性能分析介绍Perfetto SQL 基础使用 Perfetto SQL 进行性能分析总结 本文首发地址 https://blog.csdn.net/CSqingchen/article/details/134167741 最新更新地址 https://gitee.com/chenjim/che…

闯关打卡小程序的效果如何

闯关打卡是一种以任务关卡为基础的打卡模式&#xff0c;管理员可配置活动任务关卡&#xff0c;成员加入任务后需依次解锁&#xff0c;打卡完成任务&#xff0c;像闯关游戏一样完成所有任务。 通过打卡活动聚集一群有共同目标、兴趣的人&#xff0c;通过打卡的方式促进共同目标…

对Java的多线程的理解

说说对Java线程的理解 下面是AI的回答 Java线程就是Java程序里面可以同时运行多个任务。Java提供了几种创建和管理线程的方式&#xff0c;其中一种是继承Thread类&#xff0c;另一种是实现Runnable接口或Callable接口。jdk5提供了线程池&#xff0c;可以更方便地创建、启动和终…

Spring Boot 常见面试题

目录 1.Spring Boot 快速入门什么是 Spring Boot&#xff1f;有什么优点&#xff1f;Spring Boot 与 Spring MVC 有什么区别&#xff1f;Spring 与 Spring Boot 有什么关系&#xff1f;✨什么是 Spring Boot Starters?Spring Boot 支持哪些内嵌 Servlet 容器&#xff1f;如何设…