1. 程式人生 > >OpenLayers的使用---- 一個完全免費開源的地圖JS庫

OpenLayers的使用---- 一個完全免費開源的地圖JS庫

feature target 旋轉 raw pen .com andro req 傳遞

OpenLayers很容易的在網站裏放置動態地圖。它能顯示展開圖及從資源中加載地圖標記及矢量數據。它被開發出盡可能的使用所有的地圖信息。並且它是完全免費及開源的.
詳細了解可去它的官網: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庫