<body>

    <div id="map">

        <div id="menu">

            <button id="zoom_in">放大</button>

            <button id="zoom_out">缩小</button>

            <button id="panto">移动到“武汉”</button>

            <button id="restore">复位</button>

        </div>

    </div>

    <script>

        var map=new ol.Map({

            target:'map',

            layer:[],

            view:new ol.View({

                center:[12950000,4860000],

                zoom:8,

                minZoom:6,

                maxZoom:12,

                rotation:Math.PI/6//设置旋转角度

            })

        })

        var tileLayer=new ol.layer.Tile({

            source:new ol.source.OSM()

        });

        map.addLayer(tileLayer);

        var view=map.getView();

        var zoom=view.getZoom();

        var center=view.getCenter();

        var rotation=view.getRotation();

        document.getElementById("zoom_out").onclick=function(){

            var view=map.getView();

            var zoom=view.getZoom();

            view.setZoom(zoom-1);

        }

        document.getElementById("zoom_in").onclick=function(){

            var view=map.getView();

            var zoom=view.getZoom();

            view.setZoom(zoom+1);

        }

        document.getElementById("panto").onclick=function(){

            var view=map.getView();

            var wh=ol.proj.fromLonLat([114.31667,30.51667]);

            view.setCenter(wh);

        }

        document.getElementById("restore").onclick=function(){

            view.setZoom(zoom);

            view.setCenter(center);

            view.setRotation(rotation);

        }

    </script>

</body>

												


											
OpenLayers 3 的地图基本操作的更多相关文章
	

    
								
  1. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
		
    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...
    
		
    2. 
						
  2. HT for Web整合OpenLayers实现GIS地图应用
		
    HT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的Ope ...
    
		
    3. 
						
  3. OpenLayers 3 之 地图视图（View）
		
    OpenLayers 3 之 地图视图(View) 初始化一幅地图,必备的三要素之一视图(view),这个对象主要是控制地图与人的交互,如进行缩放,调节分辨率.地图的旋转等控制.也就是说每个 map对 ...
    
		
    4. 
						
  4. OpenLayers 3 之 地图控件（control）
		
    OpenLayers 3 之 地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之 ...
    
		
    5. 
						
  5. openlayers对接百度地图新方法
		
    上次给大家提供的openlayers对接百度地图有些问题,是因为没有进行分辨率设置,也没有进行相应的平面坐标转换,获取getURL的方法还是没有变化的 getURL: function (bounds ...
    
		
    6. 
						
  6. openLayers，常见地图实例
		
    http://openlayers.org/en/master/examples/epsg-4326.html -- 标尺 http://openlayers.org/en/master/exampl ...
    
		
    7. 
						
  7. openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置
		
    额..题目有点长......今天有个群友问我.想实现google地图地图版权随鹰眼关闭状态改变位置的功能.就是这种<ignore_js_op> 打开鹰眼时  地图版权也随着鹰眼位置改变而改 ...
    
		
    8. 
						
  8. 使TileCache配合OpenLayers，产生地图瓦块的一些资料（转）
		
    在tilecache.cfg中配置好被切割地图的参数,比如: [mytestmap]layers=3,5,7,8type=WMSurl=http://localhost/arcgis/services ...
    
		
    9. 
						
  9. 【01】openLayers 第一个地图
		
    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【Sort】HeapSort
			
    堆排序,时间复杂度O(N log N),实际使用中慢于使用Sedgewick增量的增量排序. 大致思路: 1.先在数组中建堆,如果是增量排序,则需要建一个大堆 2.每循环一次,把最大的数,也就是num ...
    
			
    2. 
						
  2. aps.net 页面事件执行顺序
			
    
			
    3. 
						
  3. As3.0 TextField
			
    一 TextField 对象的方法 方法 说明 TextField.addListener 加入接收触发事件如文本域内容变化或滚动变化的监听对象,触发事件可以参看最后一个表. TextField.ge ...
    
			
    4. 
						
  4. 如何为CentOS 7配置静态IP地址
			
    问题:在CentOS 7上,我想要将我其中一个网络接口从DHCP改为静态IP地址配置,如何才能永久为CentOS或RHEL 7上的网络接口分配静态IP地址? 如果你想要为CentOS 7中的某个网络接 ...
    
			
    5. 
						
  5. .Net_把文件数据添加到数据库中（面试题）
			
    一个文本文件含有如下内容: 4580616022644994|3000|赵涛 4580616022645017|6000|张屹 4580616022645090|3200|郑欣夏 上述文件每行为一个转 ...
    
			
    6. 
						
  6. 移动前端不得不了解的HTML5 head 头标签（中上篇）
			
    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...
    
			
    7. 
						
  7. Nginx访问限速配置方法详解
			
    开发测试阶段在本地限速模拟公网的环境,方便调试.投入运营会有限制附件下限速度,限制每个用户的访问速度,限制每个IP的链接速度等需求. 配置简单,只需3行,打开"nginx根目录/conf/n ...
    
			
    8. 
						
  8. JavaScript（3）—— 正则表达式
			
    ---恢复内容开始--- 正则表达式 这是写的正则表达式,正则表达式的点比较多,也比较细.所以有些地方我们得注意的比较多.正则表达式在JS中是很重要的一个部分,其中他的语法都得牢记.不过最好还是理解性 ...
    
			
    9. 
						
  9. [转]深入浅出JSONP--解决ajax跨域问题
			
    取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...
    
			
    10. 
						
  10. spring 框架的 @Autowired 和 @Resource 两种注解的区别
			
    最开始做项目时,依赖注入用到的注解都是 J2EE 的 @Resource,那时还根本不了解 spring 有 @Autowired.心塞. 前两天想到估计有很多刚开始学习 java 的童鞋可能对这两个 ...
    
			
    11.