概述
本入门教程向您展示如何在网页上放置一个简单的地图。
在页面上放置地图
创建一个新文件,复制以下内容,然后在浏览器中打开:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.0.1/build/ol.js"></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',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
了解发生了什么
要加载地图需要三个步骤:
- 引用OpenLayers 库
第一部分包括JavaScript库。出于本教程的目的,这里我们仅指向openlayers.org网站以获取整个库。在生产环境中,我们将构建一个自定义版本的库,其中仅包含应用程序所需的模块。
若要兼容较老版本的浏览器需要添加js引用
- 创建
作为地图的加载容器
应用程序中的地图包含在HTML元素中。通过此,可以通过CSS控制地图属性(如宽度,高度和边框)。 - 编写js脚本实例化一个Map。
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
使用此JavaScript代码,将创建一个地图对象,并在非洲东海岸上缩放一个OSM图层。让我们分解一下: 下一行创建一个OpenLayers Map对象。就其本身而言,这没有任何作用,因为没有附加的层或交互
var map = new ol.Map({ ... });
要将地图对象附加到
,地图对象会将一个target作为参数。该值是
的ID:
target: 'map'
layers:[…]数组用于定义地图中可用图层的列表。现在的第一个也是唯一的一层是tiled层:
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
OpenLayers中的图层为(Image,Tile或Vector),通过source属性设定地图数据。Map对象的下一部分是View。View允许指定地图的中心,分辨率和旋转度。定义视图的最简单方法是定义中心点和缩放级别。请注意,缩放级别0被缩小了
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
您会注意到指定的中心是经度/纬度坐标(EPSG:4326)。由于我们使用的唯一图层是球形墨卡托投影(EPSG:3857),因此我们可以即时对其进行重新投影,以便能够在正确的坐标上缩放地图。