OPENLAYERS的基本概念

在OPENLAYERS中,地图对象是一系列图层和各种交互操作、控制操作的集合,一个地图对象一般由: 地图声明、地图风格、地图初始化三部分组成,下面是一个地图程序的示例代码:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="ol3/ol.css" type="text/css">
    <style>
      #map {
        height: 256px;
        width: 512px;
      }
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>My Map</h1>
    <div id="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            title: "Global Imagery",
            source: new ol.source.TileWMS({
              url: 'http://maps.opengeo.org/geowebcache/service/wms',
              params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
            })
          })
        ],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 0,
          maxResolution: 0.703125
        })
      });
    </script>
  </body>
</html>

 该程序包括三个部分:

1.        地图标签

地图标签是一个单一的document元素,如下:<div id=”map”></div>,div>元素将作为一个地图展示的容器,这里我们使用<div> 元素,但其实我们可以用任何block-level元素。并且,我们赋给容器一个ID属性,我们以后可以用ID来引用和操作地图对象。

2.        地图样式

OpenLayers 自带默认的地图样式,我们可以在HTML页面中包含该样式信息表,方法如下:

(<linkrel=”stylesheet”href=”ol3/ol.css”type=”text/css”>)

OpenLayers 不会默认指定地图的大小,因此在引入默认地图样式之后,我们需要添加至定义的样式来设定地图的大小,具体做法如下:

<link rel="stylesheet" href="ol3/ol.css" type="text/css">

<style>

  #map {

    height: 256px;

    width: 512px;

  }

</style>

 

这里,我们使用地图容器的ID #map来作为CSS的选择符。我们指定该地图的大小为512px和256px。这个样式声明可以直接写到网页的<head>标签中,但在正规大型项目中一般是以单独的CSS样式引入到网页里。

 


 

3.        地图初始化

下面是生成并初始化地图对象,在HTML<body>标签的底部添加如下<script>元素来实现功能。

 

<script>

  var map = new ol.Map({

    target: 'map',

    layers: [

      new ol.layer.Tile({

        source: new ol.source.TileWMS({

          url: 'http://maps.opengeo.org/geowebcache/service/wms',

          params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}

        })

      })

    ],

    view: new ol.View({

      projection: 'EPSG:4326',

      center: [0, 0],

      zoom: 0,

      maxResolution: 0.703125

    })

  });

</script>

 

 


 

 

 

以上代码具体作用是创建一个具有指定参数属性的ol.Map对象,其中:

1) target:’map’  是指使用<div id=”map”>来展示它。这里我们使用了ID值,您也可以使用document.getElementById(“map”))等方法直接指定对应的显示元素。


 

2)  下面这部分代码是为地图对象加载指定的图层。

layers: [

  new ol.layer.Tile({

    source: new ol.source.TileWMS({

      url: 'http://maps.opengeo.org/geowebcache/service/wms',

      params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}

    })

 

 

3)  下面这部分代码是定义地图显示,我们指定了地图的中心(CENTER)和ZOOM(缩放)值,我们还指定了maxResolution以避免OPELAYERS的请求超出GeoWebCache能处理的范围。

 

 


 
    view: new ol.View({

      projection: 'EPSG:4326',

      center: [0, 0],

      zoom: 0,

      maxResolution: 0.703125

    })

 

 


 

 

 

至此,你就已经成功的完成了你的第一个WEBGIS程序的编写。

注意:

在添加脚本之前必须做好如下准备工作:

1)  必须先在<head>标签里导入OpenLayers的库,做法:<script src=”ol3/ol.js”></script>.

2)  必须添加地图标签作为地图的容器,做法:<div id=”map”></div>

地图数据转换器:https://blog.csdn.net/qq_35582643/article/details/79461426

如果您对编程不是很熟悉,您可以使用【WEBGIS前端自动生成工具】:https://blog.csdn.net/qq_35582643/article/details/81868972 来自动生成相应的程序。

转载自:https://blog.csdn.net/qq_35582643/article/details/79444811

You may also like...

退出移动版