1-制作一个简单的地图

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡

openlayers框架的根对象为ol，一切变量和方法都由ol直接或间接调用。

本文将创建一个简单的地图，用到的数据结构如下

ol.Map为ol地图类，创建ol地图后，返回地图对象，此对象可由三个（但不限于）参数构成：target、layers和view。

• target参数指向地图容器<div id="map"></div>。

• layers参数指向地图的图层集合，该集合必须有一个底图图层，这里使用ol.layer.Tile地图数据类型，数据源使用ol.source.OSM()。

• view参数指向ol.View对象，该对象包含了决定地图展示方式的一些信息，如缩放等级zoom、地图中心点center等。

• 其他参数，但对创建一个简单地图来说并不是必要的。

现在可以使用以上的数据结构实现一个简单的地图，步骤如下

• 引入openlayers的css和js文件

<link rel="stylesheet" href="../include/ol.css" type="text/css">
<script src="../include/ol.js"></script>

• 创建一个存放地图的容器。

<div id="map"></div>

• 创建ol.Map对象。

//创建一个ol.Map对象
var map = new ol.Map({
    //layers指向了地图图层集合，这里只用了一个底图图层ol.layer.Tile
    //source参数指向了地图数据源，使用ol.source.OSM（此外还可以使用百度地图、google地图、Bing地图等）
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    //target指向存放地图的容器，值为容器标签的id属性
    target: 'map',
    //view指向了ol.View对象，并设置了地图中心点为[0,0]和缩放级别zoom为2
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

至此，一个简单的地图创建完成，可在浏览器中查看效果