Openlayers案例1——加载OSM地图

最新推荐文章于 2025-02-09 15:15:54 发布

最强大佬

最新推荐文章于 2025-02-09 15:15:54 发布

阅读量2.5k

点赞数 3

分类专栏： WebGIS 文章标签： arcgis

本文链接：https://blog.csdn.net/peanut2/article/details/113358821

版权

WebGIS 专栏收录该内容

9 篇文章

订阅专栏

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>