OpenLayers 案例一

序

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。

例子

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="../css/ol.css">  <?--链接一个外部样式表-->
    <style>
      .map2 {    <?--前边的点必不可少-->
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="../build/ol.js"></script>        <?--链接一个外部脚本文件-->
    <title>OpenLayers 3 example</title>
  </head>
 
  <body>
    <h2>My Map</h2>
    <div id="map" class="map2"></div>  <?--ID如人的身份证，唯一标示（1对1）。Class如人穿的衣服，用于定义这个DIV的样式（n对1），这里用到了上面stype定义的map2样式-->
    <script>
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

运行图示

为了调用map，一个web页面需要做3件事情：

调用OpenLayers
<div>map容器 (<div>标签用来定义文档中的分区或节)
JavaScript新建map

调用OpenLayers

第一部分是调用JavaScript库。

<script src="../css/ol.js" type="text/javascript"></script>

<div>用来包含地图

<div id="map" class="map"></div>

map包含在html的<div></div>内。通过<div>地图的属性如长度、宽度、边框等通过css控制。该例中css设定地图的高度和宽度都为400像素。

<style>
 .map {
    height: 400px;
    width: 100%;
   }
</style>

JavaScript来创建map

<script type="text/javascript">
    var map = new ol.Map({
       target: 'map',
        layers: [
          new ol.layer.Tile({
          source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
       view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
</script>

步骤一：通过以下代码创建一个OpenLayers的Map对象，这里只是单纯的建立一个对象，由于没有图层信息和交互所以没有其他任何信息。

var map = new ol.Map({ ... });

步骤二：为了把map对象和<div>信息关联起来，map对象通过target作为它的参数，其值为<div>中的id

target: 'map'

步骤三：layers:[ ... ]数组用来定义map中可用的图层列表。

layers: [
    new ol.layer.Tile({
     source: new ol.source.MapQuest({layer: 'sat'})
    })
]

本例的图层用一个类型(Image，Tile或Vector)来定义，它包含了一个源。【参考available layer sources here】

步骤四：map对象的下一部分是View。通过View可以指定中心、分辨率、旋转等信息。最简单的设置方式是指定中心点和缩放级别。注：缩放级别为0表示“缩小”。

    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 4
    })

这里指定的中心点是经纬坐标(EPSG:4326)。

原文：链接