OpenLayers（一）

最新推荐文章于 2023-08-10 17:21:51 发布

翻译最新推荐文章于 2023-08-10 17:21:51 发布 · 936 阅读

文章标签：

#地图

本文介绍OpenLayers 3的基本概念及其核心组件，包括Map、View、Source和Layer，并通过示例展示了如何创建一个简单的地图。

OpenLayers是一个用于开发WebGIS客户端的Js类库包，用于实现标准格式发布的地图数据访问。目前OpenLayers有两种版本，即较老版本ol2和经过底层重写架构过的ol3。根据项目需要，我学习的是ol3版本。

基本概念

Map

ol3的核心部件是Map(ol.Map)。Map通常要呈现出来，在页面中用div元素来容纳Map，而这个容纳Map的元素叫做target容器

<div id="map"></div>
<script>
  var map = new ol.Map({target: 'map'});
</script>

View

ol.view负责地图的中心点，放大，投影的设置。
ol.view实例常见的属性有
    投影projection，该投影决定center的坐标系及分辨率的单位。如果没有指定，默认的投影是球墨卡托（EPSG:3857),以米为地图单位
    zoom是用来指定地图的分辨率，主要的缩放级别有
        -maxZoom | 28
        -zoomFactor | 2
        -maxResolution | 由投影在像素瓦片的有效程度来计算

map.setView(new ol.View({
    center: [0, 0],
    zoom: 2
  }));

Source

ol3使用ol.source.Source子类获取远程数据图层，可以获取免费或者商业的地图瓦片Tile服务以及矢量数据

var osmSource = new ol.source.OSM();

Layer

图层包含了数据的可视化显示部分，ol3有三种基本的图层类型
    -ol.layer.Tile
    用于显示（预渲染）瓦片资源，是由特定分辨率的缩放级别组织的瓦片图片网格组成
    -ol.layer.Image
    用于显示（支持渲染服务）图片，这些图片可用于任意范围和分辨率
    -ol.layer.Vector
    用于显示在客户端渲染的矢量数据

    var osmLayer = new ol.layer.Tile({source: osmSource});
    map.addLayer(osmLayer);

创建一个简单的地图

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  new ol.Map({
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  });
</script>