编程 Javascript

Openlayers学习之地图比例尺控件

Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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学习之地图比例尺控件

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

Openlayers学习之地图比例尺控件

- Author -

桃李不言_下自成蹊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态加载js的几种方法

Oct 23 Javascript

遍历jquery对象的代码分享

Nov 02 Javascript

ajax上传时参数提交不更新等相关问题

Dec 11 Javascript

JS控制文本框textarea输入字数限制的方法

Jun 17 Javascript

java中String类型变量的赋值问题介绍

Mar 23 Javascript

基于React.js实现原生js拖拽效果引发的思考

Mar 30 Javascript

JavaScript开发Chrome浏览器扩展程序UI的教程

May 16 Javascript

基于Vuejs和Element的注册插件的编写方法

Jul 03 Javascript

利用Angular7开发一个Radio组件的全过程

Jul 11 Javascript

JavaScript变量基本使用方法实例分析

Nov 15 Javascript

使用Element的InfiniteScroll 无限滚动组件报错的解决

Jul 27 Javascript

vue首次渲染全过程

Apr 21 Vue.js

Openlayers实现地图的基本操作

Sep 28 #Javascript

TypeScript 运行时类型检查补充工具

Sep 28 #Javascript

基于openlayers实现角度测量功能

Sep 28 #Javascript

OpenLayer学习之自定义测量控件

Sep 28 #Javascript

Vue中父子组件的值传递与方法传递

Sep 28 #Javascript

JSONObject与JSONArray使用方法解析

Sep 28 #Javascript

OpenLayer3自定义测量控件MeasureTool

Sep 28 #Javascript