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. });
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）