下面介绍在一个简单的 HTML 文件中如何使用 Openlayers 构建一个简单的地图。

    1. <!doctype html>
    2. <html lang="en">
    4. <head>
    5.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css"
    6.     type="text/css">
    7.   <style>
    8.     .map {
    9.       height: 400px;
    10.       width: 100%;
    11.     }
    12.   </style>
    13.   <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
    14.   <title>OpenLayers example</title>
    15. </head>
    17. <body>
    18.   <h2>My Map</h2>
    19.   <div id="map" class="map"></div>
    20.   <script type="text/javascript">
    21.     var map = new ol.Map({
    22.       target: 'map',
    23.       layers: [
    24.         new ol.layer.Tile({
    25.           source: new ol.source.OSM()
    26.         })
    27.       ],
    28.       view: new ol.View({
    29.         center: ol.proj.fromLonLat([37.41, 8.82]),
    30.         zoom: 4
    31.       })
    32.     });
    33.   </script>
    34. </body>
    36. </html>