openlayers3入门教程

                                                                                                           openlayers3入门教程

摘要

       OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。

       最初的版本旨在支持第2版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本2一样，数据可以被任意投影。最初的版本还增加了一些额外的功能，如能够方便地旋转地图以及显示地图动画。

       OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。

为了看清楚OpenLayers的Layer结构体系，先看下面的UML图。

1. <script type="text/javascript">  
2.         window.onload = function () {  
3.             //实例化map对象并加载地图  
4.             var map = new ol.Map({  
5.                 //存放地图目标容器  
6.                 target: 'map',  
7.                 //加载图层  
8.                 layers: [  
9.                         //新建一个瓦片地图图层  
10.                         new ol.layer.Tile({  
11.                             //瓦片地图数据源  
12.                             source: new ol.source.OSM()  
13.                         })  
14.                 ],  
15.                 //初始化视图  
16.                 view: new ol.View({  
17.                     //视图中心点坐标  
18.                     center: [12550000, 3680000],  
19.                     //缩放等级  
20.                     zoom: 8,  
21.                     //最小缩放等级  
22.                     minZoom: 6,  
23.                     //最大缩放等级  
24.                     maxZoom: 12,  
25.                     //地图旋转30度  
26.                     rotation: Math.PI/6  
27.                 })  
28.             });  
29.   
30.             //获取地图的初始化信息  
31.             var view = map.getView();  
32.             var zoom = view.getZoom();  
33.             var center = view.getCenter();  
34.             var rotation = view.getRotation();  
35.   
36.             //地图缩小  
37.             document.getElementById("zoom-out").onclick = function () {  
38.                 //获取地图当前视图  
39.                 var view = map.getView();  
40.                 //获取地图当前缩放等级  
41.                 var zoom = view.getZoom();  
42.                 //每单击一次地图的缩放等级减一，以实现地图缩小  
43.                 view.setZoom(zoom - 1);  
44.             };  
45.   
46.             //地图放大  
47.             document.getElementById("zoom-in").onclick = function () {  
48.                 //获取地图当前视图  
49.                 var view = map.getView();  
50.                 //获取地图当前缩放等级  
51.                 var zoom = view.getZoom();  
52.                 //每单击一次地图的缩放等级加一，以实现地图放大  
53.                 view.setZoom(zoom + 1);  
54.             };  
55.   
56.             //地图平移  
57.             document.getElementById("panto").onclick = function () {  
58.                 //获取地图当前视图  
59.                 var view = map.getView();  
60.                 //指定要平移到的位置的坐标  
61.                 var position = ol.proj.fromLonLat([115.2341, 32.4652]);  
62.                 //重设地图中心点，实现平移  
63.                 view.setCenter(position);  
64.             };  
65.   
66.             //地图重置  
67.             document.getElementById("restore").onclick = function () {  
68.                 //重置中心点位置为初始化位置  
69.                 view.setCenter(center);  
70.                 //重置旋转角度为初始化角度  
71.                 view.setRotation(rotation);  
72.                 //重置缩放等级为初始化缩放等级  
73.                 view.setZoom(zoom);  
74.             };  
75.         }  
76. 为地图添加弹出框（完整代码详见：http://blog.csdn.net/qingyafan/article/details/44415631）
77. /** 
78.  * Add a click handler to the map to render the popup. 
79.  */  
80. map.addEventListener('click', function(evt) {  
81.   var coordinate = evt.coordinate;  
82.   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(  
83.       coordinate, 'EPSG:3857', 'EPSG:4326'));  
84.   content.innerHTML = '<p>你点击的坐标是：</p><code>' + hdms + '</code>';  
85.   overlay.setPosition(coordinate);  
86.   map.addOverlay(overlay);  
87. });
88. 
89.   </script>
90. openlayers进阶学习——多标注显示/点击弹出框/图层控制/搜索定位/新增标注等
91. 多标注显示
92. 、多标注显示：通过Feature和Marker实现多点标注。（技术：http://blog.csdn.net/linlzk/article/details/20049405）
93. .openlayers3之动态点扩散效果（http://blog.csdn.net/qingyafan/article/details/49848455）
94. openlayers中三种动画实现（http://blog.csdn.net/u014529917/article/details/52514204）