Openlayers案例1——加载OSM地图

最新推荐文章于 2025-08-02 13:42:12 发布

原创最新推荐文章于 2025-08-02 13:42:12 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

WebGIS 专栏收录该内容

9 篇文章

订阅专栏

本文档展示了如何使用OpenLayers库在网页中创建一个基本的OpenStreetMap（OSM）地图。通过设置HTML结构、引入CSS和JavaScript文件，以及定义地图的容器、图层和视图，可以实现地图的显示和初始化。示例代码详细说明了每个步骤，并提供了最终的显示效果。

1. 代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载OSM地图</title>
  <!-- CSS路径 -->
  <link rel="stylesheet" href="openlayers/css/ol.css">
  <!-- JS相对路径 -->
  <script src="openlayers/build/ol.js"></script>

  <style>
    #map {
      height: 100%;
      width: 100%;
      position: absolute;
    }
  </style>
</head>

<body>
  <!--div为地图容器-->
  <div id="map"></div>

  <script>
    // map类必备三要素：target，layers，view
    var map = new ol.Map({
      target: 'map', // 与div盒子绑定
      layers: [ // 图层容器，可包含多个图层，数组形式放置
        new ol.layer.Tile({ // 新建一个图层
          source: new ol.source.OSM(), // 新建OSM数据，放置在图层
        })
      ],
      view: new ol.View({ // 视图，渲染图层
        center: [0, 0], // 地图中心点
        zoom: 2, // 缩放级数
      })
    })
  </script>
</body>

</html>