OpenLayers学习笔记初级篇（一、地图加载）

最新推荐文章于 2026-04-18 04:53:31 发布

原创最新推荐文章于 2026-04-18 04:53:31 发布 · 3.1k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WebGIS实战

OpenLayers

本文是OpenLayers学习笔记的初级篇，主要介绍了OpenLayers 3的基础知识，包括它是一个开源Web GIS引擎，支持多种地图数据源和渲染方式。文章通过创建地图的示例，展示了如何在HBuilder中加载OpenLayers地图，并解析了加载地图的关键代码，为初学者提供了一个简单的起点。

开源的地图包做的比较优秀比较好的就是OpenLayers了，下面我将用我的学习笔记带领一些没接触过OpenLayers的同学进行学习，目前初步将学习笔记分为初级基础篇，中级进阶篇和高级应用篇，我将通过一个个小的demo进行学习，比较有助于大家加深记忆和动手编码能力，下面我们进行初级基础的学习！

1、OpenLayers 3简介

OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端（目前移动端还不成熟，有待进一步完善）。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。随着OpenLayers 3的进一步发展，将支持更多的地图类型。

2、代码编辑器的选择，这笔我用的是HBuilder，当然还有许多别的可用，比如VSCode、Idea、等等。好了，废话少说我们直接进行第一个OpneLayers地图的加载！我将以源码的形式进行展示！

首先我们在HBuilder中新建一个Web项目，名为OpenLayers初级，如下图所示：

然后我们需要去OpenLayers的官网下载他们的开发包，即ol.js和 ol.css等文件。这个网上也有很多，这里不再赘述，如果有需要可以在下面评论，我发给你。下载下来后把openLlayers对应的css和js文件分别放入对应的包文件下如下图：

好了，下面我们可以写页面加载地图了！

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers 3地图加载</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
    <div id="map" style="width: 100%"></div>
    <script>
      // 创建地图
      new ol.Map({
            // 设置地图图层
            layers: [
              // 创建一个使用Open Street Map地图源的瓦片图层
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            // 设置显示地图的视图
            view: new ol.View({
              center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处
              zoom: 2            // 并且定义地图显示层级为2
            }),
            // 让id为map的div作为地图的容器
            target: 'map'    
        });
    </script>
</body>

</html>

先看一下运行后的效果：