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. var view = map.getView();
31. var zoom = view.getZoom();
32. var center = view.getCenter();
33. var rotation = view.getRotation();
34. //地图缩小
35. document.getElementById("zoom-out").onclick = function () {
36. //获取地图当前视图
37. var view = map.getView();
38. //获取地图当前缩放等级
39. var zoom = view.getZoom();
40. //每单击一次地图的缩放等级减一，以实现地图缩小
41. view.setZoom(zoom - 1);
42. };
43. //地图放大
44. document.getElementById("zoom-in").onclick = function () {
45. //获取地图当前视图
46. var view = map.getView();
47. //获取地图当前缩放等级
48. var zoom = view.getZoom();
49. //每单击一次地图的缩放等级加一，以实现地图放大
50. view.setZoom(zoom + 1);
51. };
52. //地图平移
53. document.getElementById("panto").onclick = function () {
54. //获取地图当前视图
55. var view = map.getView();
56. //指定要平移到的位置的坐标
57. var position = ol.proj.fromLonLat([115.2341, 32.4652]);
58. //重设地图中心点，实现平移
59. view.setCenter(position);
60. };
61. //地图重置
62. document.getElementById("restore").onclick = function () {
63. //重置中心点位置为初始化位置
64. view.setCenter(center);
65. //重置旋转角度为初始化角度
66. view.setRotation(rotation);
67. //重置缩放等级为初始化缩放等级
68. view.setZoom(zoom);
69. };
70. }
71. 为地图添加弹出框（完整代码详见：http://blog.csdn.net/qingyafan/article/details/44415631）
72. /**
73. * Add a click handler to the map to render the popup.
74. */
75. map.addEventListener('click', function(evt) {
76. var coordinate = evt.coordinate;
77. var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
78. coordinate, 'EPSG:3857', 'EPSG:4326'));
79. content.innerHTML = '<p>你点击的坐标是：</p><code>' + hdms + '</code>';
80. overlay.setPosition(coordinate);
81. map.addOverlay(overlay);
82. });
83. 
84. </script>
85. openlayers进阶学习——多标注显示/点击弹出框/图层控制/搜索定位/新增标注等
86. 多标注显示
87. 、多标注显示：通过Feature和Marker实现多点标注。（技术：http://blog.csdn.net/linlzk/article/details/20049405）
88. .openlayers3之动态点扩散效果（http://blog.csdn.net/qingyafan/article/details/49848455）
89. openlayers中三种动画实现（http://blog.csdn.net/u014529917/article/details/52514204）