Openlayers之地图比例尺控件
1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和比例尺控件的容器;
2、代码实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><style type="text/css">#scalebar{float:left;margin-bottom:10px;z-index:2000;}</style><script type="text/javascript">window.onload = function () {//实例化比例尺控件var scaleLineControl = new ol.control.ScaleLine({//设置度量单位为米units: 'metric',target: 'scalebar',className: 'ol-scale-line'});//实例化地图控件var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source:new ol.source.OSM()}),],view: new ol.View({center: [0, 0],zoom:2}),});//将比例尺控件加入到map中map.addControl(scaleLineControl);};</script>
</head>
<body><div id="map"></div><div id="scalebar"></div>
</body>
</html>
3、运行结果
地图初始化的时候就能在左下角看见比例尺控件
随着地图的放大和缩小,比例尺的值也会发生相应的改变
Openlayers之地图比例尺控件相关推荐
- openlayers图层开关控件
openlayers2自带图层开关控件,但是自openlayers3后,不再有这个控件.但是,当了解了openlayers控件开发后,我们可以自己实现这个控件,实现起来也非常之简单.不多说,先看下结果 ...
- openlayer右键菜单_让OpenLayers的SelectFeature控件支持鼠标右键事件
OpenLayers上的一个Feature对象单击出现一个气泡很容易实现,但是右键出现点菜单什么的就不容易了,关键在于SelectFeature控件不支持右键事件,所以我就改之.. 修改的源文件是基于 ...
- OpenLayers基础教程——常规的地图控件
1.前言 熟悉GIS的同志对地图控件应该不会陌生,ArcMap中就有很多地图控件,比如放大.缩小.全图等.其实在OpenLayers中也有很多地图控件,它们都继承了ol.control.Control ...
- Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客 在上面 ...
- openlayers添加按钮_OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言 地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers ...
- OpenLayers学习笔记高级篇(二、地图控件)
在OpenLayers 3中,地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等. 他们不会随着地图的移动而移动,一直处于一个固定的位置. 在实现上,并不是在画布上绘制的,而是使用 ...
- openlayer 图层上下_OpenLayers实现图层切换控件
OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件. 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏. 完整代码: layerSwitch.html: 图层切 ...
- webbrowser控件 加载为空白_OpenLayers教程五:地图控件之坐标拾取控件和鹰眼控件...
一.坐标拾取控件 很多时候我们想要实时获取鼠标光标指示处对应的坐标,就像高德地图的坐标拾取:控制台 | 高德开放平台 | 高德地图API OpenLayers提供的ol.control.MousePo ...
- 使用高德JS-API进行基于LBS的开发-地图初始化地图控件
框架代码: <!DOCTYPE html> <html style="width:100%;height:100%;"> <head><m ...
最新文章
- 微软研究院开源DialoGPT:你有什么梦想?「让世界充满机器人」
- 滤波电容、去耦电容、旁路电容作用
- Discuz x3论坛使用CDN后获取真实IP的解决方法
- java服务写在哪里_JavaService
- 《数据结构与算法分析:C语言描述》复习——第六章“排序”——基数排序
- 去重复java_去重复数据(JAVA)
- 程序默认在副屏显示_聊一款性价比极高的电竞显示器
- __attribute__ 详解
- C#LeetCode刷题之#867-转置矩阵(Transpose Matrix)
- 最全面的推荐系统评估方法介绍
- mysql 创建表单
- 转一个高内存定位的文章
- html5增加用户代码,HTML5 用户注册页面源代码
- 局域网内台式机使用笔记本作代理服务器上网
- 唯品会开源分布式作业调度平台Saturn
- 【产品经理三节课】第4章 产品调研入门
- 使用Origin画出复杂网络博弈中合作率时间演化图(学术论文)
- win11修改C盘用户文件夹名称
- IDEMIA被选中提供其下一代指纹匹配引擎,成为英国内政部生物识别计划的一部分
- YOLO 超详细入门02 v2 (含代码及原文)