OpenLayers开篇： Hello OpenLayers

来源：互联网发布：知乎jennyyy扒皮照片编辑：程序博客网时间：2024/06/05 18:21

作为整个项目的一部分，要学习openlayers的基础知识，在此写下学习openlayers的基本思路，希望一起努力！1、什么是openlayerOpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。2、OpenLayers学习网站http://openlayers.org3、开始我们的第一个openlayers程序3.1、直接复制一下代码保存为index.html，用浏览器打开

<span style="font-family: Arial, Helvetica, sans-serif;"></span>

<!doctype html><html lang="en">  <head>    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">    <style>      .map {        height: 400px;        width: 100%;      }    </style>    <script src="http://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script>    <title>OpenLayers 3 example</title>  </head>  <body>    <h2>My Map</h2>    <div id="map" class="map"></div>    <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.fromLonLat([37.41, 8.82]),          zoom: 4        })      });    </script>  </body></html>

</pre><p></p><p>3.2 显示一个map地图应用，应该做如下三件事情</p><p><span style="white-space:pre"><span style="white-space:pre"></span>1）包含openlayers</span></p><p><span style="white-space:pre"><span style="white-space:pre"></span></span><span style="white-space: pre; background-color: rgb(240, 240, 240);"><script src="http://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script></span></p><p><span style="white-space:pre"><span style="white-space:pre"><span style="white-space:pre"></span>2</span>)<div>标签包含一个map</span></p><p><span style="white-space:pre"><span style="white-space:pre"></span></span><span style="white-space:pre; background-color:rgb(240,240,240)"><div id="map" class="map"></div></span></p><p><span style="white-space:pre"></span>用css显示map大小，高400px，宽全屏</p><p><span style="white-space:pre"></span></p><p><pre name="code" class="plain"> <style>    .map {      height: 400px;      width: 100%;    }  </style>

3）用javascript创建一个map

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.fromLonLat([37.41, 8.82]),      zoom: 4    })  });

<span style="font-family: Arial, Helvetica, sans-serif;">target：‘map’将map余div链接起来</span>

效果如图

0 0