三十三、openlayers官网示例Drawing Features Style——在地图上绘制图形,并修改绘制过程中的颜色

这篇讲的是使用Draw绘制图形时根据绘制形状设置不同颜色。

根据下拉框中的值在styles对象中取对应的颜色对象,new Draw的时候将其设置为style参数。

 const styles = {Point: {"circle-radius": 5,"circle-fill-color": "red",},LineString: {"circle-radius": 5,"circle-fill-color": "red","stroke-color": "yellow","stroke-width": 2,},Polygon: {"circle-radius": 5,"circle-fill-color": "red","stroke-color": "yellow","stroke-width": 2,"fill-color": "blue",},Circle: {"circle-radius": 5,"circle-fill-color": "red","stroke-color": "blue","stroke-width": 2,"fill-color": "yellow",},};const typeSelect = document.getElementById("type");let draw; function addInteraction() {const value = typeSelect.value;if (value !== "None") {draw = new Draw({source: source,type: typeSelect.value,style: styles[value],});map.addInteraction(draw);}}

 需要注意的是这个style是绘制过程中的颜色,如果需要设置绘制完成后的颜色还得在图层中设置

  const source = new VectorSource({ wrapX: false });const vector = new VectorLayer({source: source,style:style});

 完整代码:

<template><div class="box"><h1>Drawing Features Style绘制不同颜色的图形</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><select class="form-select" id="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></span></div></div></div>
</template><script>
import Draw from "ol/interaction/Draw.js";
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";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const raster = new TileLayer({source: new OSM(),});const source = new VectorSource({ wrapX: false });const vector = new VectorLayer({source: source,});const map = new Map({layers: [raster, vector],target: "map",view: new View({center: [-11000000, 4600000],zoom: 4,}),});const styles = {Point: {"circle-radius": 5,"circle-fill-color": "red",},LineString: {"circle-radius": 5,"circle-fill-color": "red","stroke-color": "yellow","stroke-width": 2,},Polygon: {"circle-radius": 5,"circle-fill-color": "red","stroke-color": "yellow","stroke-width": 2,"fill-color": "blue",},Circle: {"circle-radius": 5,"circle-fill-color": "red","stroke-color": "blue","stroke-width": 2,"fill-color": "yellow",},};const typeSelect = document.getElementById("type");let draw; function addInteraction() {const value = typeSelect.value;if (value !== "None") {draw = new Draw({source: source,type: typeSelect.value,style: styles[value],});map.addInteraction(draw);}}typeSelect.onchange = function () {map.removeInteraction(draw);addInteraction();};addInteraction();},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}#info {width: 100%;height: 24rem;overflow: scroll;display: flex;align-items: baseline;border: 1px solid black;justify-content: flex-start;
}
</style>

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

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

相关文章

Llama改进之——RoPE旋转位置编码

引言 旋转位置编码(Rotary Position Embedding, RoPE)将绝对相对位置依赖纳入自注意力机制中&#xff0c;以增强Transformer架构的性能。目前很火的大模型LLaMA、QWen等都应用了旋转位置编码。 之前在[论文笔记]ROFORMER中对旋转位置编码的原始论文进行了解析&#xff0c;重点…

Inno Setup 深入浅出-注册表

【1】注册表&#xff1a;安装时写入 #define MyAppVersion "1.0.0.111" #define MyRegInstall "Software\产品名称\发布者\install" #define MyRegInstallVersion "installVersion" [Registry] Root:HKCU;Subkey: "{#MyRegInstall }&quo…

kubeadm极速搭建kubernetes集群

# 卸载docker sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine # 安装docker需要的依赖 sudo yum install -y yum-utils # 设置docker yum源 sudo yum-config-manager…

数据与结构——红黑树

目录 红黑树的概念 性质 结点的定义 插入 验证 查找 删除 红黑树与AVL树的比较 红黑树的概念 红黑树是一种自平衡二叉搜索树&#xff08;Binary Search Tree, BST&#xff09;&#xff0c;其每个节点带有颜色属性&#xff0c;可以是红色或黑色。红黑树通过约束节点颜色…

Redis 常用基本命令

查看所有键 keys命令可用于查看所有键&#xff0c;语法如下 pattern用于匹配key&#xff0c;其中*表示任意个任意字符 keys pattern键总数 dbsize可用于查看键的总数&#xff0c;语法如下 dbsize判断键是否存在 exists命令可用于判断一个键是否存在&#xff0c;语法如下 ex…

【ARM Cache 系列文章 7.1 – ARMv8/v9 MMU 页表配置详细介绍 02 】

文章目录 Translation table descriptorTable descriptor format页面粒度和地址长度粒度(Granules)48位和52位地址TCR_ELx.DSVTCR_EL2.DSFEAT_LPA块描述符|页描述符紧接上篇文章【ARM Cache 系列文章 7 – ARMv8/v9 MMU 页表配置 01 】 Translation table descriptor</

Flutter 中的 ShrinkWrappingViewPort 小部件:全面指南

Flutter 中的 ShrinkWrappingViewPort 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的 UI 框架&#xff0c;它允许开发者使用 Dart 语言来构建跨平台的移动应用。在 Flutter 的布局体系中&#xff0c;ShrinkWrappingViewport 是一个特殊的滚动视图&#xff0c;它…

未来已来:Facebook的数字革命与社交转型

在当今数字化时代&#xff0c;Facebook作为全球最大的社交网络之一&#xff0c;不仅扮演着连接人们的桥梁&#xff0c;更是引领着社交行业的数字革命与转型。本文将深入探讨Facebook如何通过创新技术、改变用户体验以及应对挑战&#xff0c;塑造了未来社交的面貌&#xff0c;以…

ozon卖家精灵,ozon卖家怎么使用

在跨境电商的浪潮中&#xff0c;OZON作为俄罗斯领先的电商平台&#xff0c;吸引了众多卖家争相入驻。然而&#xff0c;面对日益激烈的市场竞争&#xff0c;如何提升店铺的运营效果&#xff0c;成为卖家们迫切需要解决的问题。而OZON卖家精灵作为一款专为OZON卖家打造的辅助工具…

java高级——Collection集合之List探索(包含ArrayList、LinkedList、Vector底层实现及区别,非常详细哦)

java高级——Collection集合之List探索 前情提要文章介绍提前了解的知识点1. 数组2. 单向链表3. 双向链表4. 为什么单向链表使用的较多5. 线程安全和线程不安全的概念 ArrayList介绍1. 继承结构解析1.1 三个标志性接口1.2 AbstractList和AbstractCollection 2. ArrayList底层代…

民国漫画杂志《时代漫画》第32期.PDF

时代漫画32.PDF: https://url03.ctfile.com/f/1779803-1248635561-0ae98a?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

java —— 克隆对象、枚举

一、克隆对象 &#xff08;一&#xff09;在基本数据类型中&#xff0c;直接将对象 A 的值赋给对象 B&#xff0c;当更改对象 B 的时候&#xff0c;对象 A 的值保持不变。例如&#xff1a; public static void main(String[] args) {int a5;int ba; //将…

去除字符串中的空格和特殊字符

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 用户在输入数据时&#xff0c;可能会无意中输入多余的空格&#xff0c;或在一些情况下&#xff0c;字符串前后不允许出现空格和特殊字符&#xff0c;…

Beego 使用教程 7:Web 文件上传下载和错误处理

beego 是一个用于Go编程语言的开源、高性能的 web 框架 beego 被用于在Go语言中企业应用程序的快速开发&#xff0c;包括RESTful API、web应用程序和后端服务。它的灵感来源于Tornado&#xff0c; Sinatra 和 Flask beego 官网&#xff1a;http://beego.gocn.vip/ 上面的 bee…

「清新题精讲」Skiers

更好的阅读体验 Skiers Description 给定 n n n 个点的有向无环平面图&#xff0c;求最少多少条从 1 1 1 到 n n n 的路径能覆盖原图的所有边&#xff1f; 1 ≤ n ≤ 5 1 0 3 1\le n\le 5\times10^3 1≤n≤5103 Solution 考虑从 1 1 1 到 n n n 的路径其实是边的链覆…

如何让你的网站能通过域名访问

背景 当我们租一台云服务器&#xff0c;并在上面运行了一个Web服务&#xff0c;我们可以使用云服务器的公网IP地址进行访问&#xff0c;如下&#xff1a; 本文主要记录如何 实现让自己的网站可以通过域名访问。 买域名 可以登录腾讯云等主流公有云平台的&#xff0c;购买域名…

设计模式21——命令模式

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

ETCD 备份与还原

安装etcdctl 准备看下etcd如何命令行操作&#xff0c;才发现&#xff0c;主机上&#xff0c;只用kubeadm拉起了etcd&#xff0c;但没有etcdctl命令。 # sudo docker ps -a | awk /etcd-master/{print $1} c4e3a57f05d7 26a11608b270 836dabc8e254 找到正在运行的etcd&#xf…

失落的方舟 命运方舟台服怎么下载游戏客户端 游戏账号怎么注册

《失落的方舟》&#xff08;Lost Ark&#xff09;是韩国Smilegate公司精心打造的一款大型多人在线角色扮演游戏&#xff08;MMORPG&#xff09;&#xff0c;以其精美的画面、沉浸式的剧情、类似动作游戏的战斗体验和广阔的开放世界设定&#xff0c;自面世以来便深受全球玩家喜爱…

计算机毕业设计 | SpringBoot+vue仓库管理系统(附源码)

1&#xff0c;绪论 1.1 项目背景 随着电子计算机技术和信息网络技术的发明和应用&#xff0c;使着人类社会从工业经济时代向知识经济时代发展。在这个知识经济时代里&#xff0c;仓库管理系统将会成为企业生产以及运作不可缺少的管理工具。这个仓库管理系统是由&#xff1a;一…