OpenLayers (1)

OpenLayers is a Js class library package for developing WebGIS clients, which is used to realize the access of map data published in standard format. There are currently two versions of OpenLayers, the older version ol2 and the ol3 that has been rewritten at the bottom. According to the needs of the project, I am learning the ol3 version.

basic concept

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);

Create a simple map

<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>