OpenLayers的使用---- 一個完全免費開源的地圖JS庫
阿新 • • 發佈：2018-09-07
feature target 旋轉 raw pen .com andro req 傳遞 OpenLayers很容易的在網站裏放置動態地圖。它能顯示展開圖及從資源中加載地圖標記及矢量數據。它被開發出盡可能的使用所有的地圖信息。並且它是完全免費及開源的.
詳細了解可去它的官網：http://openlayers.org/
詳細了解可去它的官網：http://openlayers.org/
簡單使用，如展示一個塊地圖
<!doctype html> <html lang="en"> <head> <!--引入openlayers的css--> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css"> <style> .mymap { height: 400px; width: 100%; } </style> <!-- 如果在老的android平臺及早期IE還需要在openlayers之前引入下面的js來兼容 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script> --> <!--引入openlayers的js--> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script> </head> <body> <div id="mymap" class="mymap"></div> <script type="text/javascript"> /* 創建openlayers中的一個map對象。並傳遞一個json對象來配置地圖的一些參數。 target中的值是document中塊標簽的id，用於顯示地圖的容器指定。 layers：地圖圖層的配置，這裏指定一個簡單的塊狀地圖圖層。 view：用於指地圖顯示的中心位置及縮放比例還旋轉 */ var map = new ol.Map({ target: ‘map‘, layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([xxx, xxx]), zoom: 4 }) }); </script> </body> </html>
OpenLayers的使用---- 一個完全免費開源的地圖JS庫