脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Openlayers地图比例尺控件

Openlayers学习之地图比例尺控件

 更新时间：2020年09月28日 11:51:27   作者：桃李不言_下自成蹊  
这篇文章主要为大家详细介绍了Openlayers学习之地图比例尺控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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、运行结果

地图初始化的时候就能在左下角看见比例尺控件

随着地图的放大和缩小，比例尺的值也会发生相应的改变

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

您可能感兴趣的文章:

相关文章

  • javascript实现随机生成DIV背景色

    javascript实现随机生成DIV背景色

    这篇文章主要介绍了javascript实现随机生成DIV背景色的具体代码，如何设置DIV背景色为随机色，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js的map、flatMap和find、filter的使用详解

    js的map、flatMap和find、filter的使用详解

    map和flatMap都是返回一个新数组,map不会改变数组长度,flatMap可以改变长度,find和filter都是过滤操作,find只会返回第一个找到的值,而filter会返回全部符合要求的对象
    2024-12-12
  • 小程序开发基础之view视图容器

    小程序开发基础之view视图容器

    这篇文章主要介绍了小程序开发基础之view视图容器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JAVASCRIPT keycode总结

    JAVASCRIPT keycode总结

    JAVASCRIPT中keycode总结，方便需要控制keycode的朋友
    2009-02-02
  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    下面小编就为大家带来一篇在html中引入外部js文件,并调用带参函数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • readonly和disabled的区别

    readonly和disabled的区别

    要慎用readonly和disabled, 指定了disabled的表单,在submit时,不会把它的值传出去, 如下所示,有两个text,一个是readonly一个是disabled,submit后,只能发送那个不是disabled的,注意地址栏的值. 要保存到本地,因为submit了,不然,看不到效果.
    2008-04-04
  • 基于javascript处理二进制图片流过程详解

    基于javascript处理二进制图片流过程详解

    这篇文章主要介绍了基于javascript处理二进制图片流过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 前端技巧之ESLint忽略检查行和文件总结

    前端技巧之ESLint忽略检查行和文件总结

    ESLint是一个流行的JavaScript代码检查工具,它可以帮助团队确保代码质量,避免常见的错误和格式问题,这篇文章主要给大家介绍了关于前端技巧之ESLint忽略检查行和文件的相关资料,需要的朋友可以参考下
    2023-11-11
  • JS实现匀速与减速缓慢运动的动画效果封装示例

    JS实现匀速与减速缓慢运动的动画效果封装示例

    这篇文章主要介绍了JS实现匀速与减速缓慢运动的动画效果,结合实例形式分析了JavaScript封装结合定时器的页面元素动态变换效果动画相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • echarts饼图自定义设置颜色的3种实现方式

    echarts饼图自定义设置颜色的3种实现方式

    ECharts饼图的颜色可以通过多种方式进行设置,下面这篇文章主要给大家介绍了关于echarts饼图自定义设置颜色的3种实现方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02

最新评论