openlayers 入门教程(六):controls 篇

news/2024/5/18 16:55:16

目录

一、常用的控件

二、使用控件方法

三、添加删除control 的基本方法

四、control示例

1 比例尺 - ScaleLine

2 鹰眼/缩小图 - OverviewMap

3 全屏 - FullScreen

4 版权信息 - Attribution

5 旋转地图 - Rotate

6 放大缩小 - Zoom

7 缩放滑块控件 - ZoomSlider

8 鼠标位置 - MousePosition

示例: 显示鼠标经纬度信息

9 ZoomToExtent

10 清除所有控件

五、Openlayers 入门教程 -系列文章列表


控件是一个可见的小部件,其 DOM 元素位于屏幕上的固定位置。 它们可以涉及用户输入(按钮),或者仅提供信息; 位置是使用 CSS 确定的。 默认情况下,它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中,但可以使用任何外部 DOM 元素。

.在Openlayers中多数Controls直接可以在地图上添加,比如Navigation(导航栏)。第二类是需要放在Div元素中才能用。第三类需要放置在panel(面板)中的操作类似于网页HTML中button按钮,需要点击或绑定才能起作用。最后一类就是自定义类型的。

一、常用的控件

  • controldefaults,地图默认包含的控件。
  • fullscreen,全屏控件,用于全屏幕查看地图。
  • mouseposition,鼠标位置控件,显示鼠标所在地图位置的坐标,可以自定义投影。
  • overviewmap,地图全局视图控件(鹰眼图)。
  • scaleline,比例尺控件。
  • zoom,地图放控件。
  • zoomslider,地图缩放滑块刻度控件。


二、使用控件方法

实例化地图map,通过参数control传入,不传值默认 control defaults 中的控件。
也可以利用map对象的**addControl()addControls()**方法在地图上添加Controls对象
需要在默认控件基础上继续添加控件,可以使用 ol.control.defaults().extend([new ol.control.FullScreen()]) 方法传入。

三、添加删除control 的基本方法

addControl(control) 将给定的控件添加到地图中
removeControl(control) 从地图中移除已给定的控件

四、control示例

1 比例尺 - ScaleLine


示例:添加比例尺功能

2 鹰眼/缩小图 - OverviewMap


示例:添加鹰眼功能

3 全屏 - FullScreen


示例:添加全屏显示功能

4 版权信息 - Attribution


示例:修改自定义地图版权信息

5 旋转地图 - Rotate


示例:添加旋转地图功能

6 放大缩小 - Zoom


示例:自定义地图放大缩小按钮功能

7 缩放滑块控件 - ZoomSlider


示例: 添加缩放滑块控件

8 鼠标位置 - MousePosition


示例: 显示鼠标经纬度信息

9 ZoomToExtent


示例: ZoomToExtent

10 清除所有控件


示例: 清除所有控件,按需添加Control

五、Openlayers 入门教程 -系列文章列表


openlayers 入门教程(一):openlayers简介
openlayers 入门教程(二):Map 篇
openlayers 入门教程(三):View 篇
openlayers 入门教程(四):Layers 篇
openlayers 入门教程(五):Sources 篇
openlayers 入门教程(六):Controls篇
openlayers 入门教程(七):Interactions篇
openlayers 入门教程(八):Geom 篇
openlayers 入门教程(九):Overlay 篇
openlayers 入门教程(十):Style 篇
openlayers 入门教程(十一):Formats篇
openlayers 入门教程(十二):定位与轨迹
openlayers 入门教程(十三):动画
openlayers 入门教程(十四):第三方插件
openlayers 入门教程(十五):与 canvas、echart,turf 等交互


http://www.mrgr.cn/p/18233804

相关文章

JavaEE 初阶篇-深入了解网络通信相关的基本概念(三次握手建立连接、四次挥手断开连接)

🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 网络通信概述 1.1 基本的通信架构 2.0 网络通信三要素 3.0 网络通信三要素 - IP 地址 3.1 查询 IP 地址 3.2 IP 地址由谁供应? 3.3 IP 域名 3.4 IP 分…

可视化大屏的应用(15):智慧城市中的十大价值

可视化大屏在智慧城市领域的十大应用价值如下: 实时数据监控: 可视化大屏可以将城市各种实时数据,如交通流量、环境监测、能源消耗等数据,以图表、地图等形式展示,帮助城市管理者实时监控城市运行状况。 智慧交通管理…

下载安装Gradle

一、下载Gradle1.Gradle官方下载地址:https://gradle.org/releases/2.下载之后进行解压二、配置环境变量我的电脑->属性->高级系统设置->环境变量在path里面添加:%GRADLE_HOME%\bin 三、验证是否安装成功打开CMD,输入gradle -v,此时会显示Gradle的版本号,这说明前…

idea启动jsp项目

idea启动jsp项目 1、idea打开jsp项目:2、项目配置:3、项目启动~~~~~~~~~~~~~~~~~~~~~over~~~~~~~~~~~~~~~~

贪心算法练习day.4

860.柠檬水找零 链接:. - 力扣(LeetCode) 题目描述: 在柠檬水摊上,每一杯柠檬水的售价为 5 美元。顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯。 每位顾客只买一…

JAVASE基础语法(异常、常用类)

一、异常 1.1 什么是异常 异常就是指不正常。是指代码在运行过程中可能发生错误,导致程序无法正常运行。 package com.atguigu.exception;public class TestException {public static void main(String[] args) {int[] arr {1,2,3,4,5};System.out.println(&quo…

js逆向实战之莫莫铺子sign参数解密

url: http://mmpz.ttzhuijuba.com/?r=/l&cids=1&site=classify&sort=0 分析过程抓取流量包。主要关注图中框起来这条流量包,因为这条流量包返回的是当前页面数据。该流量包的url地址有个加密的参数sign,目的就是找到sign参数的加密过程。按照常规思路会去搜索ur…

记一次new ArrayList导致的cpu飙升问题排查

参考:https://mp.weixin.qq.com/s/8JDPOAvmKYP8JZxau45hdw前言当时场景正常的jvm监控曲线图产生问题的jvm监控曲线图具体分析结束语昨天线上容器突然cpu飙升,也是第一次排查这种问题所以记录一下~ 前言 首先问题是这样的,周五正在写文档,突然收到了线上报警,发现cpu占用达到…

Kafka 架构深入探索

目录 一、Kafka 工作流程及文件存储机制 二、数据可靠性保证 三 、数据一致性问题 3.1follower 故障 3.2leader 故障 四、ack 应答机制 五、部署FilebeatKafkaELK 5.1环境准备 5.2部署ELK 5.2.1部署 Elasticsearch 软件 5.2.1.1修改elasticsearch主配置文件 5.2…

安卓APP脱壳的本质以及如何快速发现ART下的脱壳点

参考:https://bbs.kanxue.com/thread-254555.htm拨云见日:安卓APP脱壳的本质以及如何快速发现ART下的脱壳点我在文章《FART:ART环境下基于主动调用的自动化脱壳方案》中简单对当前的几个脱壳方法进行了总结,然而并没有对每一种的具体原理进行分析。同时,在文章《FART正餐前…

力扣HOT100 - 114. 二叉树展开为链表

解题思路&#xff1a; class Solution {List<TreeNode> list new ArrayList<>();public void flatten(TreeNode root) {recur(root);for (int i 1; i < list.size(); i) {TreeNode pre list.get(i - 1);TreeNode cur list.get(i);pre.left null;pre.right…

冰达ROS机器人快速使用指南

欢迎来到《冰达ROS机器人极简使用指南》 Q&#xff1a;这份教程适合谁&#xff1f; A&#xff1a;适合完全0基础新手&#xff0c;需要快速跑起来机器人的基本功能。也适合技术大佬需要快速的了解冰达ROS机器人的使用方法。 Q&#xff1a;这份教程内容很少&#xff0c;是不是…

百度的代码,Comate写了27%。诚邀你来测评,获取丰厚好礼!

4月16日,在Create 2024百度AI开发者大会上发表的《人人都是开发者》主题演讲中,李彦宏指出: “百度每天新增的代码中,已经有27%是由Comate生成的。” 是的!Comate被老板表扬啦!Baidu Comate智能代码助手,和百度的工程师们共同完成了27%的代码! 而现在,Comate还走入了喜…

图表开发控件JointJS携全新4.0版本助力轻量开发

JointJS 和JointJS的v4.0版本正式发布&#xff0c;作为图表库的首个无依赖版本&#xff0c;备受期待&#xff01;新版本经过精心打磨&#xff0c;摆脱了jQuery、Backbone和Lodash的依赖&#xff0c;使得库更加精简且核心功能不变。此次慧都与JointJS厂商合作&#xff0c;携手带…

6. JSP详解

1. 什么是JSP 全称为:Java Server Pages Java服务器端页面,也和Serlvet一样,用于动态Web技术!JSP中的内容就是html,但是能够嵌套java语言 HTML只给用户提供静态数据2. JSP原理服务器内部工作 tomcat中有一个work目录 IDEA中使用Tomcat的会在IDEA的tomcat中生产一个work目录…

【计算机网络】MAC地址简介

MAC&#xff08;Medium Access Control&#xff09;&#xff0c;即媒介访问控制&#xff0c;是计算机网络通信中的重要概念。每个NIC&#xff08;Network Interface Card&#xff09;&#xff0c;即网络适配器&#xff0c;都具有独自且不变的MAC地址&#xff08;烧录的&#xf…

vis.js关系图

代码案例<!DOCTYPE html> <html lang="en"><head><title>Network</title><scripttype="text/javascript"src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script><styl…

代码随想录算法训练营第四十六天| LeetCode139.单词拆分

一、LeetCode139.单词拆分 题目链接/文章讲解/视频讲解&#xff1a;https://programmercarl.com/0139.%E5%8D%95%E8%AF%8D%E6%8B%86%E5%88%86.html 状态&#xff1a;已解决 1.思路 单词明显就是物品&#xff0c;字符串s明显就是背包&#xff0c;那么问题就变成了物品能不能把背…

梦境绘师:揭秘生成对抗网络(GAN)的魔法

梦境绘师&#xff1a;揭秘生成对抗网络&#xff08;GAN&#xff09;的魔法 1 引言 在今日的深度学习领域&#xff0c;生成对抗网络&#xff08;GAN&#xff09;已成为一项无人能外的技术&#xff0c;以其独特的数据生成能力俘获了无数研究者和工程师的心。这项技术不仅在理论上…