OpenLayers实战,OpenLayers画线测量距离和画多边形测量区域面积

news2024/12/24 0:55:38

专栏目录:
OpenLayers实战进阶专栏目录

前言

本章使用OpenLayers实现画线测量距离和画多边形测量区域面积这两个功能。
本章代码就是通过OpenLayers的图形绘制功能,通过监听绘制事件获取绘制的图形,并进行计算,就可以得到长度和面积。日常开发中比较常用,所以不废话,立刻开始实现。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Maven构建项目失败 Non-resolvable import POM

Maven构建项目失败 Non-resolvable import POM Non-resolvable import POM: XXX:pom:4.2.0 was not found in https://repo.maven.apache.org/maven2 during a previous attempt.项目结构定位错误解决问题打包碰到另外的问题Failed to execute goal org.springframework.boot:s…

GCC编译过程:预处理->编译->汇编->链接

目录 引言 概括介绍 一、预处理 二、编译 三、汇编 四、链接 总结 引言 当使用集成开发环境(IDE)进行C语言编程时,点击"编译"按钮后,整个C程序从源代码到可执行文件的生成过程会自动完成。IDE会在后台为我们执行C…

CAD练习——绘制冲压件三视图

首先还是先设置咱们的绘图模板: 这是图层划分: 文字样式设置: 标注样式: 从主视图开始,首先绘制如下图形 用到的快捷指令: L:直线 O:偏移 TR:修剪 效果:…

实现跨域的几种方式

原理 前后端的分离导致了跨域的产生 跨域的三要素:协议 域名 端口 三者有一个不同即产生跨域 例如: http://www.csdn.com https://www.csdn.com 由于协议不同,端口不同而产生跨域 注:http的默认端口80,https的默…

【C++】多态的底层原理(虚函数表)

文章目录 前言一、虚函数表二、派生类中虚函数表1.原理2.例子: 三、虚函数的存放位置四 、单继承中的虚函数表五、多继承中的虚函数表六、问答题 前言 一、虚函数表 通过观察测试我们发现b对象是8bytes,除了_b成员,还多一个__vfptr放在对象的…

湖南科技学院图书馆藏八一新书《乡村振兴战略下传统村落文化旅游设计》

湖南科技学院图书馆藏八一新书《乡村振兴战略下传统村落文化旅游设计》

JDBC(常用类与接口、实现数据库的增删查改)

目录 1.Connection接口常用方法 2.DriverMange类 3.Statement接口 4.实现表的数据更新(增、改、删) 5.实现数据查找(ResultSet接口) 6.PreparedStatement 数据更新 1.Connection接口常用方法 用来与数据库连接的对象&#xff…

66 # form 数据格式化

实现一个 http 服务器 客户端会发送请求 GET POST 要处理不同的请求体的类型 表单格式(formData a1&b2),可以直接通信不会出现跨域问题JSON ("{"kaimo":"313"}")文件格式 &#x…

刚刚更新win11,记事本消失怎么处理?你需要注意些什么?

记录window11的bug hello,我是小索奇 昨天索奇从window10更新到了window11,由于版本不兼容卸载了虚拟机,这是第一个令脑壳大的,算了,还是更新吧,了解了解win11的生态,后期重新装虚拟机 第一个可…

uniapp scroll-view 隐藏滚动条

/*清除滚动条 - 适配安卓*/::-webkit-scrollbar {width: 0;height: 0;color: transparent;}/*清除滚动条 - 适配IOS*/::-webkit-scrollbar {display: none;}

前端项目时因chunk-vendors过大导致首屏加载太慢,Vue Build时chunk-vendors的优化方案...

1、compression-webpack-plugin插件打包.gz文件 安装插件 也可以指定版本 我这里下载的是1.1.2版本的,试过更高的版本会有ES6语法的报错,因为我node使用的是v12,如果node版本更高可以尝试更高版本 npm install --save-dev compression-webpa…

day14 引用数组类型

向上造型 计算机 编译过程 和运行过程 Pet pet new Cat(); 图中 pet.eat()为父类构造方法 、 pet.catchMouse()为子类方法 向上造型构成对象不能调用子类独有方法 出现方法重写会调用子类方法 向下造型 Cat cat1 (Cat)new Pet 这种形式错误…

FortiGate防火墙日志审计运维

环境介绍 CPU:8核,内存:16GB,硬盘:100GB 操作系统版本:CentOS-7-x86_64-DVD-2003 平台版本:鸿鹄2.7.0 安装组件 安装环境支持确认 鸿鹄计算引擎使用了 AVX2 高级指令集做向量计算加速&#xf…

Python SQLAlchemy ( ORM )

From Python中强大的通用ORM框架:SQLAlchemy:https://zhuanlan.zhihu.com/p/444930067Python ORM之SQLAlchemy全面指南:https://zhuanlan.zhihu.com/p/387078089 SQLAlchemy 文档:https://www.sqlalchemy.org/ SQLAlchemy入门和…

STM32F103——GPIO八种工作模式

目录 1、GPIO 基本结构分析 2、GPIO 八种工作模式 2.1 输入浮空 2.2 输入上拉 2.3 输入下拉 2.4 模拟功能 2.5 开漏输出 2.6 开漏式复用功能 2.7 推挽输出 2.8 推挽式复用功能 3、GPIO 八种工作模式特点及应用 1、GPIO 基本结构分析 STM32F103的 GPIO 工作有八种…

Vue.js2+Cesium1.103.0 七、Primitive 绘制航线元素

Vue.js2Cesium1.103.0 七、Primitive 绘制航线元素 用 Primitive 绘制航线元素,包括航点图标,航线线段,线段距离标注,航点序号,海拔标注,总航程等信息。 可同时绘制多条航线;可根据 id 清除指…

【LeetCode】数据结构题解(11)[用队列实现栈]

用队列实现栈 😉 1.题目来源👀2.题目描述🤔3.解题思路🥳4.代码展示 所属专栏:玩转数据结构题型❤️ 🚀 >博主首页:初阳785❤️ 🚀 >代码托管:chuyang785❤️ &…

PHP最简单自定义自己的框架定义常量自动生成目录(三)

1、框架入口增加模块定义&#xff0c;实现多模块功能 index.php 定义模块 <?php //定义当前请求模块 define("MODULE",index); require "./core/KJ.php"; 创建后台模块admin.php <?php define("MODULE",admin); require "./cor…

在家构建您的迷你聊天Chat gpt

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 什么是指令遵循模型&#xff1f; 语言模型是机器学习模型&#xff0c;可以根据句子的前一个单词预测单词概率。如果我们向模型请求下一个单词&#xff0c;并将其递减地反馈给模型以请求更多单词&#xff…

《Linux运维实战:Docker基础总结》

一、简介 1、docker的基本结构是什么&#xff0c;包含哪些组件&#xff1f; docker的基本机构是c/s模式&#xff0c;即客户端/服务端模式。 由docker客户端和docker守护进程组成。docker客户端通过命令行或其它工具使用docker sdk与docker守护进程通信&#xff0c;发送容器管理…