个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章OpenLayers加载缩放控件使用方法详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

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

3、代码实现 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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 = "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、运行结果 。

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

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

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

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

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

原文链接：https://blog.csdn.net/SmileCoffin/article/details/54632750 。

最后此篇关于OpenLayers加载缩放控件使用方法详解的文章就讲到这里了,如果你想了解更多关于OpenLayers加载缩放控件使用方法详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

24 4 0
文章推荐： 总结分析python数据化运营关联规则
文章推荐： 在webstorm中配置less的方法详解
文章推荐： Javascript confirm多种使用方法解析
文章推荐： OpenLayers3实现地图显示功能
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com