OpenLayers3实现地图鹰眼以及地图比例尺的添加

2024-12-04 23:08:07

本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码，供大家参考，具体内容如下

1. 前言

地图鹰眼就是地图的鸟瞰图，就是通常所说的小地图，我们可以通过鹰眼得到当前地图的显示位置，也可以在鹰眼上单击、拖动或移动到想要查看的位置，鹰眼的可见区域比我们所看的主视区的范围要大，鹰眼的中心框就是主视区的可视范围， Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ，可以自定义其显示的样式。

2. 实现思路

（1）新建一个网页，并参考前面的文章实现地图显示功能，加载 OSM 瓦片图层。
（2）实例化一个鹰眼控件（ol.control.OverviewMap），跟前面的一样，可以实例化一个默认的鹰眼控件，也可以根据需要设置其参数。
（3）将实例化的鹰眼控件加载到地图容器中。可以在实例化地图容器 Map 的代码中，通过设置 controls 参数加载鹰眼控件，也可以调用 map 对象的 addControl 方法加载控件。

3. 实现代码

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>加载鹰眼控件以及实现地图比例尺</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/OverviewMap.js"></script>
 <style>
 #map {
  width: 100%;
  height: 100%;
 }
 /* 自定义样式控件 */

 .ol-custom-overviewmap,
 .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  /*右侧显示*/
  top: 0;
  /*顶部显示*/
 }
 /* 鹰眼控件展开时控件外框的样式 */

 .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
 }
 /* 鹰眼控件中地图容器的样式 */

 .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
 }
 /* 在鹰眼控件中显示当前窗口中主图区域的边框 */

 .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
 }
 /* 在鹰眼控件张开时其控件按钮图标的样式 */

 .ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
 }
 </style>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

代码解析

上面的代码主要是用于定义鹰眼的样式,，通过 ol-custom-overviewmap 将鹰眼控件设置为右侧顶部显示，并设置鹰眼控件外框，鹰眼中地图容器以及鹰眼按钮的样式。

js代码：

function init() {
 // 实例化鹰眼控件（OverviewMap），自定义其样式
 var overviewMapControl = new ol.control.OverviewMap({
 className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼控件样式
 // 在鹰眼中加载相同坐标系下不同数据源的图层
 layers: [
  new ol.layer.Tile({
  source: new ol.source.OSM({
   'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
  })
  })
 ],
 collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
 label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
 collapsed: false //初始为展开方式
 });
 // 实例化map对象，用于加载地图
 var map = new ol.Map({
 target: 'map', //地图容器的div
 // 在地图容器中加载的图层
 layers: [
  new ol.layer.Tile({ //加载瓦片图层数据
  source: new ol.source.OSM() //加载OSM瓦片图层数据
  })
 ],
 // 地图视图设置
 view: new ol.View({
  center: [12000000, 4000000], //设置初始中心
  zoom: 8 //地图初始显示中心
 }),
 // 加载控件到地图容器中
 // 加载鹰眼控件
 controls: ol.control.defaults().extend([overviewMapControl])
 });
}

代码解析

上面代码实例化了一个鹰眼控件，并通过设置控件的相关参数。

（1）layers：鹰眼容器内加载的图层，鹰眼容器与地图容器类似，可以根据需要加载不同于主图的图层数据，但是要主图与鹰眼的缩略图在同一个坐标系下。
（2）collapseLabel：将鹰眼控件展开时功能按钮上的标识。
（3）label：鹰眼控件折叠时功能按钮上的标识，与collapseLabel相对。
（4）collapsed：鹰眼控件初始加载时是否展开显示，false为展开状态。
（5）className：为鹰眼控件的类名，根据此类名来定义整个鹰眼控件的样式。

4. 实现效果

5. 比例尺的添加

添加比例尺的方法，只要是通过实例化一个比例尺控件（ol.control.ScaleLine），可以根据应用需求进行设置参数，比如可以设置比例尺的单位（units）等。然后通过地图容器 Map 设置其controls 参数进行加载比例尺控件，也可以通过调用 map 对象的 addControl 方法加载控件。

主要代码如下

// 实例化比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
 // 设置比例尺单位为degrees、imperial、us、nautical或metric（度量单位）
 units: "metric"
 });

map.addControl(scaleLineControl);

实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

OpenLayers3实现对地图的基本操作

本文实例为大家分享了OpenLayers3实现对地图的基本操作代码,供大家参考,具体内容如下 1. 前言对地图的基本操作就是对地图的放大.缩小.移动.复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法. 2. 实现思路 (1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大.最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果. (2)在地图容器中新建4个按钮(butt
使用OpenLayers3 添加地图鼠标右键菜单

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用
OpenLayers3实现地图显示功能

本文实例为大家分享了OpenLayers3实现地图显示的具体代码,供大家参考,具体内容如下 1.配置开发环境使用OpenLayers 3开发WebGIS应用,我们首先需要配置开发环境,首先我们需要在openlayers官网获取OpenLayers 3的开发库.下载链接:官网.打开后如图所示: 需要注意的是这里下载有两个版本,①:仅包括开发库(开发与调试的JS库以及CSS文件),②:包括开发库.开发库源码.示例.API等所有开发资源. 在这里我下载了第一个版本,下载后如图所示: 2. 显示一个O
OpenLayers3实现地图鹰眼以及地图比例尺的添加

本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下 1. 前言地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击.拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式. 2. 实现思路 (1)新建一个网页,并参考
百度地图给map添加右键菜单（判断是否为marker）

废话不多说了,直接给大家贴代码了. js: var s;//经度 var w;//纬度 map.addEventListener("rightclick",function(e){ if(e.overlay){//判断右键单击的是否是marker }else{ s = e.point.lng;//经度 w = e.point.lat;//维度 RightClick();//右键单击map出现右键菜单事件 } }); //右键单击map出现右键菜单事件 function RightCli
vue-amap根据地址回显地图并mark的操作

实现了地图选址功能后,现在来实现一个根据地址回显地图并标记的功能,效果图如下: 直接上代码: main.js中引入 import Vue from 'vue' import VueAMap from 'vue-amap' import App from './App' import router from './router' Vue.config.productionTip = false localStorage.clear(); Vue.use(VueAMap) VueAMap.initA
vue中引入高德地图并多点标注的实现步骤

vue中引入高德地图并多点标记步骤: 通过vue的方法引入地图初始化地图,设置宽和高信息窗口实例遍历生成多个标记点首先在项目的public下的index.html中引入地图 <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/> <script src="https://webapi.amap.com/maps?v=1.4.15
iOS开发系列--地图与定位源代码详解

概览现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一个陌生的地方想要查找附近的酒店.超市等就可以打开软件搜索周边;类似的,还有很多团购软件可以根据你所在的位置自动为你推荐某些商品.总之,目前地图和定位功能已经大量引入到应用开发中.今天就和大家一起看一下iOS如何进行地图和定位开发. 定位地图定位要实现地图.导航功能,往往需要先熟悉定位功能,在iO
百度地图api应用标注地理位置信息(js版)

有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/ 示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/ 里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息
iOS百度地图简单使用详解

百度地图 iOS SDK是一套基于iOS 5.0及以上版本设备的应用程序接口,不仅提供展示地图的基本接口,还提供POI检索.路径规划.地图标注.离线地图.定位.周边雷达等丰富的LBS能力 . 今天主要介绍以下接口基础地图 POI检索定位首先配置环境 1.自动配置.framework形式开发包(使用CocoaPods)<推荐> 2.手动配置.framework形式开发包特别注意: (API里有很多注意点,大家可以具体去看.但是我说的后两点少其中一个都会失败,第一点是有需求的话,必须加上)
sogou地图API用法实例教程

本文实例讲述了sogou地图API应用,是非常实用的技巧.分享给大家供大家参考.具体实现方法如下: 地图的初始化 1.添加引用地图的API文件: <script src="http://xiazai.jb51.net/201409/other/api_v2.5.1.js" type="text/javascript"></script> 2.网站初始化加载事件: window.onload = function () { var map =
使用C#调用百度地图并实现坐标点的设置以及读取示例

申请百度地图密钥以及查看百度API 网址:http://lbsyun.baidu.com/apiconsole/key#/home 网址:http://lbsyun.baidu.com/jsdemo.htm#c1_3 程序实现功能: 1.输入网址那可以调用本地的html文件,也可以访问其他网站 2.输入坐标.添加坐标按钮,可以将坐标值传入html文件中,显示在经纬度的文本框中 3.定位按钮可以将地图重新定位,定位中心是文本框内的经纬度 4.添加标注点是将文本框内的经纬度添加坐标到地图 5.删除标

OpenLayers3实现地图鹰眼以及地图比例尺的添加

相关推荐

随机推荐