基于OpenLayers加载电子地图(一)

这里简单介绍一些基础知识还让如何基于OpenLayers加载电子地图,边学习边记录,希望自己能坚持下去!

1. OpenLayers

     OpenLayers是一个用于开发WebGIS客户端的JavaScript包,是一个开源的项目,其设计目的是为互联网客户端提供强大的地图展示功能,包括地图数据显示与相关操作,并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。

      在地图数据以服务的方式提供的前提下,OpenLayers实习访问地理空间数据的方法符合行业标准,支持各种公开的和私有的数据标准和资源。OpenLayers支持Open GIS协会制定的WMS、WFD等网络服务规范,可以通过远程服务的方式,将以OGC服务形式发布的地图数据加载到基于浏览器的OpenLayers客户端中进行显示,目前OpenLayers所支持的数据格式有:XML JSON GML GeoRSS KML WFS WKT(Well-Known Text)等。
在OpenLayers里一个主要的概念就是Map,Map可以包含一些图层,这些图层既可以是矢量的,也可以是栅格的;栅格的图片一般指航拍、遥感等技术得到的图片,其本质就是一些照片,放大的时候图片会有所失真,照片一般会携带一些信息比如降雨量等等;而矢量图片是基于数学格式的,基于相应的坐标系勾画出来的,一般包含点、线、面等几何形式,图片无论如何放大都不会失真。每个图层的数据源可以是图片,也可以是kml文件等。当然Map也包含一些控件,主要是交互所用的比如:平移、缩放、要素的选择等等。
2. 加载地图

     要创建一个电子地图应用,首先要创建一个地图。这里介绍如何创建一个简单的电子地图应用。当然一些必要的基础知识是需要的,比如 HTML,CSS ,Javascript 等是要学习的;
    OpenLayers是主要是通过HTML和Javascript编写的,所以我们得有一个编辑器,这个就很多了这里我使用的是Dreamweaver,当然你可以选择更好的一些编辑器,它会高亮显示语法和自动提示功能。
3.  去官网下载OpenLayers的源码

  下载地址http://www.openlayers.org/download/OpenLayers-3.19.1.zip(目前最新的)
  解压后里面有很多内容,其实我们只需要拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录 theme目录 到自己的网站目录下。
  当然你也可以是使用OpenLayers中文官方站的api,加载地图的速度也是很快的,即 http://www.openlayers.cn/olapi/OpenLayers.js
4. 编写代码加载地图

下面我使用OpenLayers中文官方站的api 创建一个空的OpenLayersLoadMap.html文件

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用OpenLayers加载地图</title>
<!-- 加载OpenLayers 类库 -->
<script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js">
</script>
<style>
html,body{ width:100%; height:100%; margin:0; padding:0;}
</style>
<!-- 关键代码在这里了 -->
<script type="text/javascript">
function init(){
//使用指定的文档元素创建地图
var map = new OpenLayers.Map("rcp1_map");
//创建一个OpenStreetMap raster layer
//创建一个OSM图层,该层封装了地图服务地址,即服务调用URL
var osm = new OpenLayers.Layer.OSM();
//将已经建好的图层添加到地图容器中
map.addLayer(osm);
//设定视图缩放地图程度为最大
map.zoomToMaxExtent();
//添加地图导航控件
map.addControl(new OpenLayers.Control.PanZoomBar());

}
</script>
</head>

<body onload="init()">
<div id="rcp1_map" style="width:100%; height:100%;"
</div>
</body>

</html>

5. 运行结果如下:

 

posted @ 2016-11-13 20:08  GIS_KHF  阅读(4744)  评论(0编辑  收藏  举报