openlayers，创建map

最新推荐文章于 2024-03-17 01:44:48 发布

李离狸

最新推荐文章于 2024-03-17 01:44:48 发布

阅读量536

点赞数

分类专栏： openlayers，创建map 文章标签：地图 openlayers 前端开发

openlayers，创建map 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用OpenLayers库创建地图，重点在于ol.Map作为该库的核心组件。通过引用官方的quick start源码，逐步解析实现地图显示的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ol.Map 是openlayers核心的部分

此处引用openlayers官网上quirk start 源码

<!doctype html>
<html lang="en"> 
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <style>
      .map {   //设置放置map的div的大小
        height: 400px;
        width: 100%;
      }
    </style>       
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js" type="text/javascript"></script>          
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',  //对应的是插入map的div的id
        layers: [       //定义图层数组
          new ol.layer.Tile({   //创建地图层，底层
            source: new ol.source.OSM()   //设置地图层的source
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),  //确定显示地图的中心点坐标
          zoom: 4                                     //设置地图放大倍数
        })
      });
    </script>
  </body>
</html>

相应的官网资料：点击打开链接