../_images/logo_openlayers.png ../_images/OSGeo_project.png

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。您应该看到以下内容:

../_images/openlayers-basic-map.png

注:

  • 代码遵循在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.OSMol.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.GeoJSONol.source.KMLol.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);
../_images/openlayers-vector.png

注意,在前面的代码中,我们必须更改 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 具有要设置的属性的类 fillstroketextimage 应用。下一个示例显示了世界管理限制数据集,其样式为使用绿色填充和笔划:

../_images/openlayers-styling.png
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 财产。我们已经设置了 fillstroke ,对于线条和多边形是必需的,并且 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);
});

接下来呢?

有时候,了解Openlayers如何工作的最快方法是查看示例及其源代码。您可以在这里找到更多Openlayers信息: