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

原文：链接