OpenLayers Quickstart¶
此快速入门介绍了开始使用Openlayers所需的一些基本步骤：创建基本地图、添加栅格和矢量图层以及样式设置功能。
Openlayers使在任何网页中放置动态地图变得容易。它可以显示从任何源加载的地图图块、矢量数据和标记。为了进一步利用各种地理信息，开发了开放层。它是完全免费的开源JavaScript，根据2条款BSD许可证（也称为FreeBSD）发布。
核心概念¶
在我们开始使用Openlayers之前，它有助于理解Openlayers的核心概念：
- Map
- 这个 map 是Openlayers的核心组件。对于一个 map 渲染，A view, 一个或多个 层, 需要一个目标容器。
- View
- 这个 view 确定如何呈现地图。它用于设置分辨率、中心位置等。它就像一个照相机，通过它我们可以查看地图的内容。
- Layers
- Layers 可以按堆积顺序添加到地图中。层可以是 raster layers （图像），或 vector layers （点/线/多边形）。
- Source
- 每层都有一个 来源, 它知道如何加载层内容。在情况下 矢量层, 它的源使用 format 类（例如geojson或kml），并为层提供一组 特征.
- Features
- Features 表示真实世界的事物，可以使用不同的 geometries （如点、线或多边形）使用给定的 风格, 它决定了它的外观（线条厚度、填充颜色等）。
创建基本地图¶
在/home/user/called basic-map.html中创建一个文件，并将以下内容复制到该文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic map</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- OpenLayers CSS -->
<link rel="stylesheet" href="http://localhost/openlayers/dist/ol.css" type="text/css">
<!-- Custom styles -->
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>Basic map</h1>
<div id="map"></div>
<!-- OpenLayers JS-->
<script src="http://localhost/openlayers/dist/ol.js" type="text/javascript"></script>
<!-- App code -->
<script>
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([2.1833, 41.3833]),
zoom: 6
})
});
</script>
</body>
</html>
现在尝试使用“文件”->“打开文件”从Web浏览器打开basic-map.html。您应该看到以下内容：
注：
- 代码遵循在HTML文件末尾加载javascript代码的最佳实践。
- Openlayers映射需要附加到HTML DOM元素，因此我们创建了一个
<div>元素由标识 map 身份证件。 - 地图由
ol.Map班级。我们指定dom元素以使用 target 财产。 - Openlayers允许使用两种不同的机制进行地图渲染：canvas和webgl。默认渲染器是 帆布.
- 地图显示层中包含的数据，因此我们创建了一个平铺层，由
ol.layer.Tile类，它使用ol.source.OSM源类。 - 最后，我们设置 camera 使用
ol.View类，设置初始缩放级别和中心位置。
添加栅格图层¶
最常用的栅格层是平铺层，由openstreetmap、stamen、bing等提供。平铺层由 ol.layer.Tile 类，并且必须使用知道如何从给定的提供程序加载图块的源，例如 ol.source.OSM 或 ol.source.Stamen ：
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var stamen = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
});
图层可以通过两种方式添加到地图中：
在构造
ol.Map使用layers财产：var map = new ol.Map({ ... layers: [osm, stamen] ... });
使用
map.addLayer()方法：map.addLayer(osm); map.addLayer(stamen);
添加矢量层¶
矢量层由 ol.layer.Vector 类和必须使用适合读取矢量格式的源，例如 ol.source.GeoJSON ， ol.source.KML 或 ol.source.TopoJSON .
var vectorLayer = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'url_to_geojson_file'
})
});
// Add Vector layer to map
map.addLayer(vectorLayer);
注意，在前面的代码中，我们必须更改 url_to_file 指向放置在服务器中的有效geojson文件。请注意，javascript安全性将阻止从不同域/端口（也就是说，同一源策略）上的外部URL获取数据集。
还可以手动创建功能。在这种情况下，我们需要创建一个表示特征的几何图形：
// Geometries
var point = new ol.geom.Point(
ol.proj.transform([3,50], 'EPSG:4326', 'EPSG:3857')
);
var circle = new ol.geom.Circle(
ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
1000000
);
// Features
var pointFeature = new ol.Feature(point);
var circleFeature = new ol.Feature(circle);
// Source
var vectorSource = new ol.source.Vector({
projection: 'EPSG:4326'
});
vectorSource.addFeatures([pointFeature, circleFeature]);
// Vector layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// Add Vector layer to map
map.addLayer(vectorLayer);
将样式应用于要素¶
矢量层中的特征可以设置样式。样式由填充、笔划、文本和图像的组合决定，这些都是可选的。此外，可以将样式应用于一个图层，该图层决定所有包含的要素的样式，或者应用于单个要素。
样式由 ol.style.Style 具有要设置的属性的类 fill ， stroke ， text 和 image 应用。下一个示例显示了世界管理限制数据集，其样式为使用绿色填充和笔划：
var limitsLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/world_limits.json',
format: new ol.format.TopoJSON(),
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(55, 155, 55, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(55, 155, 55, 0.8)',
width: 1
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: 'rgba(55, 155, 55, 0.5)',
})
})
})
});
在代码中，我们加载了一个topojson文件，并通过 style 财产。我们已经设置了 fill 和 stroke ，对于线条和多边形是必需的，并且 image （在本例中是一个圆）用于点特征。
处理事件¶
大多数组件，如映射、层或控件，都会触发事件来通知更改。例如，每次将鼠标移动到地图上或将某个特征添加到矢量层等时，我们都可以收到通知。
事件可以通过 on() 方法和未注册 un() .
下面的代码在映射实例上注册一个事件，并在每次移动指针时得到通知。在回调函数中，我们获取指针坐标并在浏览器控制台中的两个不同投影中打印。
map.on('pointermove', function(event) {
var coord3857 = event.coordinate;
var coord4326 = ol.proj.transform(coord3857, 'EPSG:3857', 'EPSG:4326');
console.log(coord3857, coord4326);
});