OpenLayers 图形绘制
注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
图形绘制功能是指在地图容器中绘制点、线、面、圆、矩形等图形。图形绘制功能在WebGIS中具有重要作用，可以辅助查询、编辑、分析功能。本节主要介绍加载图形绘制。
1. 图形绘制原理
图形绘制通过地图单击事件开始绘制，鼠标移动事件绘制临时对象，鼠标双击事件或者右键事件结束绘制。可以通过鼠标事件自定义实现图形绘制，也可以通过地图库提供的交互事件进行绘制。
2. 图形绘制结构页面
本示例主要介绍点、线、面、圆、正方形、矩形的绘制。
<div id="map" title="地图显示"></div>
<div class="draw-div"><label for="">绘制几何图形： </label><select name="" id="draw-type"><option value="None">无</option><option value="Point">点</option><option value="LineString">线</option><option value="Polygon">面</option><option value="Circle">圆</option><option value="Square">正方形</option><option value="Box">矩形</option></select>
</div>
创建图层数据源和样式
const vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({wrapX: false}),style: new ol.style.Style({fill: new ol.style.Fill({color: "#9b65ff30"}),stroke: new ol.style.Stroke({color: "yellow",width: 2.5,}),image: new ol.style.Circle({fill: new ol.style.Fill({color: "blue"}),radius: 2.5,stroke: new ol.style.Stroke({color: "blue",width: 1.5,}),})})
})
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绘制几何图形</title><meta charset="utf-8" /><link rel="stylesheet" href="../libs/css/ol.css"><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}.draw-div {position: relative;margin: 0 auto;top: 50px;width: 180px;background-color: #060505ba;text-align: center;padding: 5px 10px;color: #ddd;border-radius: 2.5px;filter: brightness(0.95);}.load-div:hover {cursor: pointer;/* font-size: 16px; */transition: font-size .2s;fill-opacity: 0.8;filter: brightness(1);color: #fff;}</style>
</head><body><div id="map" title="地图显示"></div><div class="draw-div"><label for="">绘制几何图形： </label><select name="" id="draw-type"><option value="None">无</option><option value="Point">点</option><option value="LineString">线</option><option value="Polygon">面</option><option value="Circle">圆</option><option value="Square">正方形</option><option value="Box">矩形</option></select></div>
</body></html><script>//==============================================================================////============================天地图服务参数简单介绍==============================////================================vec：矢量图层==================================////================================img：影像图层==================================////================================cva：注记图层==================================////======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地图影像注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11421771, 4288300],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: 'EPSG:3857'}),// 鼠标控件：鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([// 加载鼠标控件new ol.control.MousePosition()])})const gaodeLayer = new ol.layer.Tile({source: new ol.source.XYZ({title: "高德",url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"})})map.addLayer(gaodeLayer)let draw = nulllet drawType = document.querySelector("#draw-type")const source = new ol.source.Vector({wrapX: false})const vectorLayer = new ol.layer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: "#9b65ff30"}),stroke: new ol.style.Stroke({color: "yellow",width: 2.5,}),image: new ol.style.Circle({fill: new ol.style.Fill({color: "blue"}),radius: 2.5,stroke: new ol.style.Stroke({color: "blue",width: 1.5,}),})})})map.addLayer(vectorLayer)// 获取地图容器元素const mapContainer = map.getTargetElement()// 监听绘制更改事件drawType.onchange = (evt) => {if (draw) {clearInteraction()}addInteraction(drawType.value)}// 添加交互绘制function addInteraction(value) {if (value === "None") {clearInteraction()return}mapContainer.style.cursor = "crosshair"let geometryFunction = nullswitch (value) {case "Square":// 方形value = "Square"geometryFunction = ol.interaction.Draw.createRegularPolygon(4)breakcase "Box":// 矩形value = "LineString"geometryFunction = ol.interaction.Draw.createBox()}draw = new ol.interaction.Draw({source: vectorLayer.getSource(),type: value,geometryFunction: geometryFunction})map.addInteraction(draw)}// 清除交互对象function clearInteraction() {mapContainer.style.cursor = 'pointer'map.removeInteraction(draw)draw = null// 清除绘制对象// source.clear()}
</script>
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
相关文章：
OpenLayers 图形绘制
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 图形绘制功能是指在地图容器中绘制点、线、面、圆、矩形等图形。图形绘制功能在WebGIS中具有重要作用，可以辅助查询、编辑、分析功能。本节主…...
小程序为什么要安装SSL安全证书
小程序需要部署SSL安全证书，这是小程序开发及运营的强制性要求，也是保障用户数据安全、提升用户体验和满足平台规范的必要措施。 一、平台强制要求 微信小程序官方规范 微信小程序明确要求所有网络请求必须通过HTTPS协议传输，服务器域名需配…...
python打卡训练营打卡记录day40
知识点回顾： 彩色和灰度图片测试和训练的规范写法：封装在函数中展平操作：除第一个维度batchsize外全部展平dropout操作：训练阶段随机丢弃神经元，测试阶段eval模式关闭dropout 作业：仔细学习下测试和训练代码…...
互联网大厂Java求职面试：Spring Boot 3.2+自动配置原理、AOT编译及原生镜像
标题：互联网大厂Java求职面试：Spring Boot 3.2自动配置原理、AOT编译及原生镜像 简述 本文详细探讨了在互联网大厂Java求职面试中，技术总监级别面试官与求职者郑薪苦之间的精彩对话，主题聚焦于Spring Boot 3.2自动配置原理、AOT…...
)
小型图书管理系统案例(用于spring mvc 实践)
小型图书管理系统案例 (Spring MVC Spring Data JPA Thymeleaf) 本项目案例旨在基于先前模块学习的 Spring MVC 知识，构建一个贴近企业实际的简单 Web 应用：小型图书管理系统。通过实现图书的 CRUD 操作、列表展示（含分页概念）…...
【清晰教程】利用Git工具将本地项目push上传至GitHub仓库中
Git 是一个分布式版本控制系统，由 Linus Torvalds 创建，用于有效、高速地处理从小到大的项目版本管理。GitHub 是一个基于 Git 的代码托管平台，提供了额外的协作和社交功能，使项目管理更加高效。它们为项目代码管理、团队协作和持…...
20250529-C#知识：静态类、静态构造函数和拓展方法
C#知识：静态类、静态构造函数和拓展方法 静态类一般用来编写工具类 1、静态类 用static关键字修饰的类一般充当工具类只能包含静态成员,不能包含静态索引器不能被实例化静态方法只能使用静态成员非静态方法既可以使用非静态成员，也可以使用静态成员 sta…...
实验设计与分析（第6版，Montgomery)第4章随机化区组，拉丁方， 及有关设计4.5节思考题4.18~4.19 R语言解题
本文是实验设计与分析（第6版，Montgomery著，傅珏生译) 第章随机化区组，拉丁方， 及有关设计4.5节思考题4.18~4.19 R语言解题。主要涉及方差分析，拉丁方。 batch <- c(rep("batch1",5), rep(&quo…...
第十篇：MySQL 实战：数据迁移、分库分表与分区技术指南
随着系统数据量与访问压力的增长，MySQL 单实例常面临性能瓶颈。本篇系统讲解如何进行 数据迁移、分库分表 与 分区表设计，并结合实践案例提供完整的优化思路。 一、MySQL 数据迁移方式 1. 场景分类 场景推荐工具同版本、本地迁移mysqldump、cpibdata跨…...
【吾爱】逆向实战crackme160学习记录（一）
前言 最近想拿吾爱上的crackme程序练练手，发现论坛上已经有pk8900总结好的160个crackme，非常方便，而且有很多厉害的前辈已经写好经验贴和方法了，我这里只是做一下自己练习的记录，欢迎讨论学习，感谢吾爱论坛…...
vue2 + webpack 老项目升级 node v22 + vite + vue2 实战全记录
前言 随着这些年前端技术的飞速发展，几年前的一些老项目在最新的环境下很可能会出现烂掉的情况。如果项目不需要升级，只需要把编译后的文件放在那里跑而不用管的话还好。但是，某一天产品跑过来给你讲要升级某一个功能，你不得不去…...
opengauss 数据库安装主备 非om方式
一. 准备两台服务器 192.168.141.130 --主 192.168.141.131 --备 1.关闭防火墙 systemctl stop firewalld systemctl disable firewalld 2.关闭 selinux 服务 setenforce 0 vim /etc/selinux/config #设置 SELINUXdisabled 3.关闭透明大页 echo never > /sys/kern…...
STM32的HAL编码流程总结（上部）
目录 一、GPIO二、中断系统三、USART串口通信四、I2C通信五、定时器 一、GPIO 1.选择调试类型 在SYS中Debug选择Serial Wire模式 2.选择时钟源 在RCC中将HSE和LSH都选择为内部晶振 3.时钟树配置 4.GPIO配置 在芯片图上选择开启的引脚和其功能 配置引脚的各自属性 5.工…...
深度学习|pytorch基本运算
【1】引言 pytorch是深度学习常用的包，顾名思义，就是python适用的torch包，在python里面使用时直接import torch就可以调用。 需要注意的是，pytorch包与电脑配置、python版本有很大关系，一定要仔细阅读安装要求、找到…...
Java学习-5.15(模糊搜索，收藏，购物车))
(自用)Java学习-5.15(模糊搜索，收藏，购物车)
1. 模糊搜索商品功能 前端实现： 通过解析URL参数（如search联想）获取搜索关键字，发送AJAX GET请求到后端接口/product/searchGoodsMessage。 动态渲染搜索结果：若结果非空，循环遍历返回的商品数据ÿ…...
替代 WPS 的新思路？快速将 Word 转为图片 PDF
在这个数字化办公日益普及的时代，越来越多的人开始关注文档处理工具的功能与体验。当我们习惯了某些便捷操作时，却发现一些常用功能正逐渐变为付费项目——比如 WPS 中的一项实用功能也开始收费了。 这款工具最特别的地方在于，可以直接把 W…...
【K8S】K8S基础概念
一、 K8S组件 1.1 控制平面组件 kube-apiserver：公开 Kubernetes HTTP API 的核心组件服务器。 etcd：具备一致性和高可用性的键值存储，用于所有 API 服务器的数据存储。 kube-scheduler：查找尚未绑定到节点的 Pod，并将…...
FEMFAT许可分析的数据可视化方法
随着企业对FEMFAT软件使用的增加，如何有效地管理和分析许可数据成为了关键。数据可视化作为一种强大的工具，能够帮助企业直观地理解FEMFAT许可的使用情况，从而做出更明智的决策。本文将介绍FEMFAT许可分析的数据可视化方法，并探讨…...
打印机无法远程打印？可以本地打印，本地网络打印机设置给异地使用
很多小伙伴常有打印、远程打印的需求，特别是对于电商人、跨境电商、教师、产品经理、实验人员等群体来说掌握这项技能可谓是能够在很多场景下带来便捷，大幅提升做事效率！打印机是家庭和企业经常用到的设备，很多情况下会遇到本地可…...
包含Javascript的HTML静态页面调取本机摄像头
在实际业务开发中，需要在带有摄像头的工作机上拍摄施工现场工作过程的图片，然后上传到服务器备存。 这便需要编写可以运行在浏览器上的代码，并在代码中实现Javascript调取摄像头、截取帧保存为图片的功能。 为了使用户更快掌握JS调取摄像头…...
PCB设计实践(三十一）PCB设计中机械孔的合理设计与应用指南
一、机械孔的基本概念与分类 机械孔是PCB设计中用于实现机械固定、结构支撑、散热及电气连接的关键结构元件，其分类基于功能特性、制造工艺和应用场景的差异，主要分为以下几类： 1. 金属化机械孔 通过电镀工艺在孔内壁形成导电层，…...
)
deepseek问答记录：请讲解一下torch.full_like()
torch.full_like() 是 PyTorch 中的一个张量创建函数，用于创建一个与输入张量形状相同但所有元素值都填充为指定标量值的新张量。下面详细讲解其用法和特性： 1. 函数签名 torch.full_like(input, fill_value, *, dtypeNone, layoutNone, deviceNone, r…...
【Linux篇章】Linux 进程信号2：解锁系统高效运作的 “隐藏指令”，开启性能飞跃新征程（精讲捕捉信号及OS运行机制）
本篇文章将以一个小白视角，通俗易懂带你了解信号在产生，保存之后如何进行捕捉；以及在信号这个话题中；OS扮演的角色及背后是如何进行操作的；如何理解用户态内核态；还有一些可以引出的其他知识点；…...
多功能秒达开源工具箱源码｜完全开源的中文工具箱
源码介绍 完全开源的中文工具箱永远的自由软件轻量级运行全平台支持（包括ARMv8）类似GPT的智能支持高效UI高度集成提供Docker映像和便携式版本支持桌面版开源插件库 下载地址 百度网盘下载 提取码：p9ck ▌本文由 6v6-博客网 整理分享 ▶ 更多…...
如何在腾讯云 OpenCloudOS 上安装 Docker 和 Docker Compose
从你提供的 /etc/os-release 文件内容来看，你的服务器运行的是 OpenCloudOS 9.2。这是一个基于 CentOS 和 RHEL 的开源操作系统，因此它属于 CentOS/RHEL 系列。 关键信息总结 操作系统名称：OpenCloudOS版本：9.2ID：op…...
清理skywalking历史索引
import requests from datetime import datetime, timedelta import os import re# 配置参数 ES_HOST os.getenv("ES_HOST", "http://192.168.0.250:9200") # ES地址 ES_USER os.getenv("ES_USER", "") # 用户…...
用nz-tabel写一个合并表格
用nz-tabel写一个合并表格 <nz-table #basicTable [nzData]"tableSearchStatus.dataList" nzBordered><thead><tr><th>班级</th><th>姓名</th><th>年龄</th><th>电话</th></tr></thead&…...
matlab计算转子系统的固有频率、振型、不平衡响应
可以计算转子系统的固有频率、振型、不平衡响应 MatrixRiccati/code/Dichotomy_1 (2).m , 2210 MatrixRiccati/code/Dichotomy_1.m , 2210 MatrixRiccati/code/RiccatiSY_1.m , 2756 MatrixRiccati/code/Trans1x (2).m , 451 MatrixRiccati/code/Trans1x.m , 451 MatrixRiccat…...
leetcode hot100刷题日记——29.合并两个有序链表
解答： 方法一：递归 递归的边界条件是啥呢？ 递归别想那么多具体步骤，考虑大步骤，小的递归自己会去做的 class Solution { public:ListNode* mergeTwoLists(ListNode* list1, ListNode* list2) {//递归比较大小//先考虑…...
【机器人】具身导航 VLN 最新论文汇总 | Vision-and-Language Navigation
本文汇总了具身导航的论文，供大家参考学习，涵盖2025、2024、2023等 覆盖的会议和期刊：CVPR、IROS、ICRA、RSS、arXiv等等 论文和方法会持续更新的～ 一、🏠 中文标题版 2025 😆 [2025] WMNav：…...