OpenLayers加载缩放控件使用方法详解

本文实例为大家分享了OpenLayers加载缩放控件使用的具体代码，供大家参考，具体内容如下

1、一般的地图打开都有放大、缩小和全图的导航条，以便于用户对地图的查看，下面我们将在OpenLayers中实现这一功能；

2、在之前创建的空白站点下面新建一个html的页面，引入ol.js和ol.css文件，然后在body标签中创建一个div，作为地图加载的容器；

3、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>加载并显示OSM地图</title>
  <link href="../css/ol.css" rel="external nofollow" rel="stylesheet" />
  <script src="../lib/ol/ol.js"></script>
  <style type="text/css">
    #map .ol-zoomslider
    {
      background-color : transparent;
      top : 2.3em;
    }

    #map .ol-zoom-extent
    {
      top: 280px;
    }
  </style>
   <script type="text/javascript">
     window.onload = function () {
       //实例化map对象并加载地图
       //使用Openlayers初始化一幅地图时，target、layers和view不可少
       var map = new ol.Map({
         //地图容器div的id
         target: 'map',
         //在地图容器中加载的图层
         layers: [
           //加载瓦片数据
           new ol.layer.Tile({
             //瓦片的数据源
             source: new ol.source.OSM()
           })
         ],
         //地图视图设置
         view: new ol.View({
           //地图中心点
           center: [0, 0],
           //地图初始显示级别
           zoom: 2
         })
       });

       //实例化ZoomSlider控件
       var zoomslider = new ol.control.ZoomSlider();
       //加载ZoomSlider控件到地图容器中
       map.addControl(zoomslider);

       //实例化ZoomToExtent
       var zoomToExtent = new ol.control.ZoomToExtent({
         extent: [
           //Todo 这个范围应该怎么确定
           13100000, 4290000,
           13200000, 5210000
         ]
       });
       //加载ZoomToExtent到map中
       map.addControl(zoomToExtent);
     }

  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

4、运行结果

此时我们打开地图时可以看见放大缩小和全图的导航条了：

我们拖动中间的滑块可以放大缩小地图，单击E的图标可以直接定位到北京附近（之前设置的Extent属性的坐标在北京附近）：

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

赞 (0)

相关推荐

  • OpenLayers实现图层切换控件

    OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件. 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏. 完整代码: layerSwitch.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

  • OpenLayers3加载常用控件使用方法详解

    本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言 地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers 3 封装了很多常用的地图控件,例如地图导航.比例尺.鹰眼.测量工具等,这些控件都是基于ol.control.Control虚基类进行封装,ol.control.Control的子类为各类常用的地图控件,可以通过Map对象的Control参数进行设置或者通过addControl方法将控件添加到地图窗

  • OpenLayers加载缩放控件使用方法详解

    本文实例为大家分享了OpenLayers加载缩放控件使用的具体代码,供大家参考,具体内容如下 1.一般的地图打开都有放大.缩小和全图的导航条,以便于用户对地图的查看,下面我们将在OpenLayers中实现这一功能: 2.在之前创建的空白站点下面新建一个html的页面,引入ol.js和ol.css文件,然后在body标签中创建一个div,作为地图加载的容器: 3.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh

  • Android中CheckBox复选框控件使用方法详解

    Android中CheckBox复选框控件使用方法详解

    CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过Linea

  • Android中ToggleButton开关状态按钮控件使用方法详解

    Android中ToggleButton开关状态按钮控件使用方法详解

    ToggleButton开关状态按钮控件使用方法,具体内容如下 一.简介 1. 2.ToggleButton类结构 父类是CompoundButton,引包的时候注意下 二.ToggleButton开关状态按钮控件使用方法 1.新建ToggleButton控件及对象 private ToggleButton toggleButton1; toggleButton1=(ToggleButton) findViewById(R.id.toggleButton1); 2.设置setOnCheckedC

  • Android中SeekBar拖动条控件使用方法详解

    Android中SeekBar拖动条控件使用方法详解

    SeekBar拖动条控件使用方法,具体内容如下 一.简介 1.  二.SeekBar拖动条控件使用方法 1.创建SeekBar控件 <SeekBar android:id="@+id/SeekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="30" /> 2.添加setOn

  • HorizontalScrollView水平滚动控件使用方法详解

    HorizontalScrollView水平滚动控件使用方法详解

    一.简介 用法ScrollView大致相同 二.方法 1)HorizontalScrollView水平滚动控件使用方法 1.在layout布局文件的最外层建立一个HorizontalScrollView控件 2.在HorizontalScrollView控件中加入一个LinearLayout控件,并且把它的orientation设置为horizontal 3.在LinearLayout控件中放入多个装有图片的ImageView控件 2)HorizontalScrollView和ScrollVie

  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

    一.JQuery树形控件 Jquery树形控件是一款基于JQuery+bootstrap.完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子.它功能简单.用户体验不错.对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装. 1.一睹初容 全部收起 展开一级 全部展开 2.代码示例 此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可. <link href="~/Content/Tree1/

  • C#折线图控件使用方法详解

    C#折线图控件使用方法详解

    本文实例为大家分享了C#编写折线图控件的具体代码,供大家参考,具体内容如下 简单解说 这是第一次写博客,也是第一次发布自己写代码,有不足之处请多见谅.源代码参考了网络搜索到的一些资源.因为我需要的折线图数据没有小于0的,所以在计算时偷懒了.只支持大于0的数据. 上图 如何插入一段漂亮的代码片因为自学编程,代码注释与命名比较乱,请见谅.这是新建控件的代码.需要给控件添加FoldLineDiagram_Resize 事件. using System; using System.Collections

  • laydate日历控件使用方法详解

    本文实例为大家分享了laydate日历控件的使用方法,供大家参考,具体内容如下 var start = { elem: '#start_0', format: 'YYYY-MM-DD', max: laydate.now(-1), istime: false, istoday: false, choose: function (datas) { $("input[name='TimeStart']").parent().next(".timeError").addC

  • layDate日期控件使用方法详解

    layDate日期控件使用方法详解

    本文实例为大家分享了layDate日期控件的使用方法,供大家参考,具体内容如下 效果: 1.引入js文件 <script src="__PUBLIC__/laydate/laydate.js"></script> 2.初始化laydate控件 //日期 var start = { elem: '#start_time',//选择ID为START的input event:'click', format: 'YYYY-MM-DD',//自动生成的时间格式 istim

随机推荐