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

二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类

官网demo地址:

Custom Controls

这个示例讲的是如何自定义控件

首先创建了一个新的类继承了原本的Control,新增了一个button元素,然后调用了super方法将参数传给了父类。

 const button = document.createElement("button");button.innerHTML = "N";const element = document.createElement("div");element.className = "rotate-north ol-unselectable ol-control";element.appendChild(button);

然后调了super方法将参数传递给父类

 super({element: element,target: options.target,});

可以在node_moudles里面找到Control类的源码,看到父类需要的参数。

在点击事件里调用了openlayers的setRotation()方法控制视图倾斜角度。

 button.addEventListener("click",this.handleRotateNorth.bind(this),false);handleRotateNorth() {this.getMap().getView().setRotation(0);}

如果style里面设置了scoped,样式代码这里需要使用样式穿透,否则不会生效。

::v-deep #map {.rotate-north {top: 65px;left: 0.5em;}.ol-touch .rotate-north {top: 80px;}
}

完整代码:

<template><div class="box"><h1>自定义控件</h1><div id="map"></div></div>
</template><script>
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { Control, defaults as defaultControls } from "ol/control.js";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {class RotateNorthControl extends Control {/*** @param {Object} [opt_options] Control options.*/constructor(opt_options) {const options = opt_options || {};const button = document.createElement("button");button.innerHTML = "N";const element = document.createElement("div");element.className = "rotate-north ol-unselectable ol-control";element.appendChild(button);super({element: element,target: options.target,});button.addEventListener("click",this.handleRotateNorth.bind(this),false);}handleRotateNorth() {this.getMap().getView().setRotation(0);}}this.map = new Map({controls: defaultControls().extend([new RotateNorthControl()]),layers: [new TileLayer({source: new OSM(),}),],target: "map",view: new View({center: [0, 0],zoom: 3,rotation: 1,}),});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}::v-deep #map {.rotate-north {top: 65px;left: 0.5em;}.ol-touch .rotate-north {top: 80px;}
}</style>

相关文章:

二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类

官网demo地址&#xff1a; Custom Controls 这个示例讲的是如何自定义控件 首先创建了一个新的类继承了原本的Control&#xff0c;新增了一个button元素&#xff0c;然后调用了super方法将参数传给了父类。 const button document.createElement("button");button.…...

【博主推荐】HTML5实现520表白、情人节表白模板源码

文章目录 1.设计来源1.1 表白首页1.2 甜蜜瞬间11.3 甜蜜瞬间21.4 甜蜜瞬间31.5 甜蜜瞬间41.6 甜蜜瞬间51.7 甜蜜瞬间61.8 永久珍藏 2.效果和源码2.1 页面动态效果2.2 页面源代码2.3 源码目录2.4 更多为爱表白源码 3.源码下载地址 作者&#xff1a;xcLeigh 文章地址&#xff1a;…...

【YOLOv5/v7改进系列】替换激活函数为SiLU、ReLU、LeakyReLU、FReLU、PReLU、Hardswish、Mish、ELU等

一、导言 激活函数在目标检测中的作用至关重要&#xff0c;它们主要服务于以下几个关键目的&#xff1a; 引入非线性&#xff1a;神经网络的基本构建块&#xff08;如卷积层、全连接层等&#xff09;本质上是线性变换&#xff0c;而激活函数通过引入非线性&#xff0c;使得网络…...

修改MySQL root用户密码

ALTER USER ‘root’‘localhost’ IDENTIFIED BY ‘new_password’; ALTER USER ‘root’‘%’ IDENTIFIED BY ‘new_password’; 》 SET GLOBAL read_only OFF; select * from mysql.user;...

力扣刷题---409. 最长回文串【简单】

题目描述 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回 通过这些字母构造成的 最长的回文串 。 在构造过程中&#xff0c;请注意 区分大小写 。比如 “Aa” 不能当做一个回文字符串。 示例 1: 输入:s “abccccdd” 输出:7 解释: 我们可以构造的最长的回文串…...

百度智能云参与信通院多项边缘计算标准编制,「大模型时代下云边端协同 AI 发展研讨会」成功召开

1 中国信通院联合业界制定、发布多项标准化成果&#xff0c;推动产业发展 大模型开启了 AI 原生时代&#xff0c;云边端协同 AI 构建了「集中式大规模训练」、「边缘分布式协同推理」新范式&#xff0c;有效降低推理时延和成本&#xff0c;提升数据安全和隐私性&#xff0c;也…...

前后端联调

网关 网关作用&#xff08;认证授权、流量控制、路由转发等&#xff09;网关如何工作&#xff08;类似前端的路由守卫&#xff0c;访问服务前都经过网关&#xff09; http状态码 3xx&#xff1a;重定向 301&#xff1a;永久重定向 302&#xff1a;临时重定向 304&#xff1a;…...

根据配置的mode环境显示不同的index模板

引言&#xff1a;在项目开发中&#xff0c;遇到了开发环境和生产环境使用模板不同的情况&#xff0c;配置如下&#xff1a; 一、vue.config.js const path require(path) function resolve(dir){return path.join(__dirname,dir) } module.exports {chainWebpack: config &g…...

hls.js实现分片播放视频

前言&#xff1a;hls.js官网&#xff1a;hls.js - npm 一、demo——在HTML中使用 <audio id"audio" controls></audio><script src"https://cdn.jsdelivr.net/npm/hls.jslatest"></script> <script>document.addEventList…...

K8s 运维架构师实战课程

阿良课程收益 掌握Kubernetes企业运维管理 掌握部署、运维、存储、网络、监控、日志、CICD、服务网格等实战全面搞定&#xff01; 独立将公司任何项目容器化迁移到K8s平台 生产环境真实案例 大厂企业实战经验 学习最新版、最佳实践 K8s 运维架构师实战【初中级】&#xff1a;ht…...

AIGC基础教学:AI+建筑设计,一场划时代变革的序幕已经拉开

2015年9月&#xff0c;美的集团本着把艺术融入民间的理念&#xff0c;邀请了安藤忠雄设计正在筹建中的美术馆。 在历经长达近120天的设计工作之后&#xff0c;美术馆于同年12月动工。这座具有岭南建筑文化意境的美术馆&#xff0c;后来荣获2020年美国建筑大师奖(Architecture …...

领域知识 | 智能驾驶安全领域部分常见概论

Hi&#xff0c;早。 最近想买个新能源车&#xff0c;这个车吧相比于之前的内燃车&#xff0c;新能源车与外界的交互多了很多。比如娱乐的第三方应用&#xff0c;OTA升级等应用。 交互带来的便利越多&#xff0c;暴露的风险自然也就越大&#xff0c;相比于手机等消费者终端设备…...

力扣刷题---返回word中所有不重复的单词

当需要从一个数据集合中去除重复元素时&#xff0c;set是一个很好的选择。由于其不允许存储重复的元素&#xff0c;因此可以很容易地实现去重功能。这在处理原始数据或进行数据分析时特别有用。 题目&#xff1a; 给定一个字符串数组 words&#xff0c;请返回一个由 words 中所…...

正点原子LWIP学习笔记(一)lwIP入门

lwIP入门 一、lwIP简介&#xff08;了解&#xff09;二、lwIP结构框图&#xff08;了解&#xff09;三、如何学习lwIP&#xff08;熟悉&#xff09; 一、lwIP简介&#xff08;了解&#xff09; lwIP是一个小型开源的TCP/IP协议栈 阉割的TCP/IP协议 TCP/IP协议栈结构&#xff0…...

16、设计模式之迭代器模式

迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是 Java 和 .Net 编程环境中非常常用的设计模式。这种模式用于顺序访问集合对象的元素&#xff0c;不需要知道集合对象的底层表示。 迭代器模式属于行为型模式。 介绍 意图&#xff1a; 提供一种方法顺序访问…...

自然语言处理实战项目29-深度上下文相关的词嵌入语言模型ELMo的搭建与NLP任务的实战

大家好,我是微学AI,今天给大家介绍一下自然语言处理实战项目29-深度上下文相关的词嵌入语言模型ELMo的搭建与NLP任务的实战,ELMo(Embeddings from Language Models)是一种深度上下文相关的词嵌入语言模型,它采用了多层双向LSTM编码器构建语言模型,并通过各层LSTM的隐藏状…...

TCP/IP体系模型简介

一、TCP/IP 概念 TCP&#xff08;Transmission Control Protocol 传输控制协议&#xff09;&#xff1a; 是一种面向连接的、可靠的传输层协议。通过三次握手建立连接&#xff0c;确保连接的可靠建立。对数据进行有序传输&#xff0c;并具有确认机制和重传机制来保证数据的完整…...

【ZYNQ】AXI-Quad-SPI SDK 开发记录 测试

前人工作 如前人工作&#xff0c;在Navigate to BSP Settings中找到历例程 file:///F:/Xilinx/Vitis/2019.2/data/embeddedsw/XilinxProcessorIPLib/drivers/spi_v4_5/doc/html/api/example.html使用XSpi_LowLevelExample例子&#xff0c;源代码的AI解析 int XSpi_LowLeve…...

Django提交表单出错提示错误

使用ArticleColumnForm表单&#xff0c;向数据库提交内容&#xff0c;内容包括column。如果同一用户提交的column重复&#xff0c;则提示表单出错&#xff0c;表单提交失败后&#xff0c;重新渲染表单提交html页面&#xff0c;其中提示错误信息。 涉及的代码包括&#xff1a; …...

鸿蒙开发 组件之间的传值

1.Prop&#xff1a;父组件传递给子组件&#xff0c;单向传递&#xff0c;子组件改变值&#xff0c;父组件UI不更新。 引入子组件 并赋值&#xff0c;子组件用Prop 接收 import headerView from ../../common/bean/BaseNavHeaderView headerView({titlestr:添加地址,isback…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...