`
hehch
  • 浏览: 40937 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

OpenLayers API和类来画点、线、面(Base)

阅读更多
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建不同的Feature类实例 ———— 在电子地图上绘制Feature对象实例的方式有两种,一种是使用默认方式(但在相应的CSS表中也可以更换图片),另一种是自己做图片,并根据用户选择来响应在电子地图上创建的不同Feature类实例请求</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<!--本页中的样式表-->
<style type="text/css">
<!--显示电子地图DIV的样式控制-->
#map {width: 512px;height: 512px;border: 1px solid gray;}
<!--Rediod对象的样式表,是用来判断用户请求状态的Readio-->
#controlToggle li {list-style: none;}
p {width: 512px;}
</style>
<!--引入OpenLayers.js文件的路径地址,就像使用Portotype.js一样-->
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

//自动加载的函数开始
function init(){
map = new OpenLayers.Map('map');//必须实例化的Map对象,是电子地图成图和其它一切用户请求和服务器相应的前提。

//实例化的Layer.WMS对象,一个必要的基本电子地图数据图层
var wmsLayer = new OpenLayers.Layer.WMS(
"BasicLayer",//图层名称,将显示在图层控制器(我自己起的名字)中的图层名称。程序员自己根据业务需求定义。
"http://labs.metacarta.com/wms/vmap0?",//指向解析用户请求的电子地图服务器地址和文件,绝大部分情况下是一个.xml或者是.jsp文件,如果你用自己的Geoserver服务器来解析用户请求的话,应该是“/geoserver/wms”地址,并在”geoserver\WEB-INF\pages“和“geoserver\WEB-INF\pages\wms”文件夹中看到一些相应的文件。
{layers: 'basic'}//被调用的电子地图数据库或者相关数据文件的ID。如果是通过GeoServer来运行电子地图服务,那么比较简单的方式是在Geoserver的管理系统中进行配置,由于配置出文件都会写在“catalog.xml”文件中,其中你可以找到数据源的具体地址,当然,如果我们能直接写“catalog.xml”文件的话,效果会更好、更快、更安全。一般都用Shape数据文件或者是一些Coverage的tiff/gis/png/jpg图,因为比较简单,但是效率比较低。也可以是PostSQL/GIS数据,等等。
);

var pointLayer = new OpenLayers.Layer.Vector("Point Layer");//实例化的Layer.Vector对象,用来画点(Point)。当然,如果可以根据你的业务需要,把点、线、面都画在一个Layer.Vector对象上面。
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");//实例化的Layer.Vector对象,用来线(Line)当然。如果可以根据你的业务需要,把点、线、面都画在一个Layer.Vector对象上面。
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");//实例化的Layer.Vector对象,用来多边形(Polygon)。当然,如果可以根据你的业务需要,把点、线、面都画在一个Layer.Vector对象上面。

map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);//在实例化的Map对象中增加进入BasicLayer、Point Layer、Line Layer、Polygon Layer图层。
map.addControl(new OpenLayers.Control.LayerSwitcher());//在实例化的Map对象中增加进入Control.LayerSwitcher控制器,用来控制电子地图的放大、缩小等等。当然,控制电子地图还有别的方法,你可以自己尝试尝试。
map.addControl(new OpenLayers.Control.MousePosition());//在实例化的Map对象中增加进入Control.MousePosition控制器,用来在地图右下角显示鼠标所在电子地图上面的经度、纬度坐标。

var options = {handlerOptions: {freehand: true}};

//在电子地图Layer.Vector层上绘制各种Feature对象。
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point),//绘制点的方法
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path, options),//绘制面的方法
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon, options)//绘制多边形的方法
};

//把程序员写的(不是自己开发的,也是利用OpenLayer API)绘制各种Feature对象的方法,分别增加在电子地图上,以便用户才可以使用这些方法。这里只有三个具体方法:1、point,2、line,3、polygon。此段程序和上段程序配合,结构设计的很巧妙,利用的Prototype.js的程序设计优势(其实就是高级的JavaScript),为后期的方法扩展提供便利,如果你需要增加新方法,你只要在drawControls函数体内增加方法就行了,很方便,修改量也小。
for(var key in drawControls) {
map.addControl(drawControls[key]);
}

map.setCenter(new OpenLayers.LonLat(0, 0), 3);//设定电子地图显示时,默然电子地图中心点。

document.getElementById('noneToggle').checked = true;
}
//自动加载的函数结束

//判断用户请求的函数,也就是用户选择的是那个ID的Redio对象,element参数其实就是Redio ID
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();//activate()是OpenLayers中的一个方法,返回一个布尔值,用来激活方法。与else中的deactivate()配合,如果被激化的状态下则请求保持不变。
} else {
control.deactivate();//activate()是OpenLayers中的一个方法,返回一个布尔值,用来关闭方法。与if中的activate()配合,如果转变了别的请求,则上一个请求被关闭。
}
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Draw Feature Example</h1>
<div id="tags"></div>
<p id="shortdesc">
在电子地图上创建点(Point)、线(line,在OpenLayers中的具体方法是OpenLayers.Handler.Path中的Path内置方法,Path方法实际上执行一个函数),面(Ploygon多面形)的例子。
</p>
<div id="map"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
</ul>
</body>
</html>
分享到:
评论

相关推荐

    openLayers-API中文版

    `openLayers-API中文版`是这个库的中文文档,对于开发者来说,是学习和理解OpenLayers API的重要资源。 1. **地图对象(Map)**:地图对象是OpenLayers应用的核心,它负责管理图层、控件、投影和地图视图。通过创建...

    openLayers geoserver常见问题

    OpenLayers API和类用于画点、线、面,如`OpenLayers.Geometry.Point`, `OpenLayers.Geometry.LineString`, `OpenLayers.Geometry.Polygon`。 了解OGC标准的WMS(Web Map Service)、WFS(Web Feature Service)和...

    openlayers地图重点属性摘录

    以上是OpenLayers中一些核心概念的简要介绍,对于初学者来说,理解这些基本属性和类将有助于更好地开发和维护基于OpenLayers的地图应用。学习和掌握这些知识后,你将能够创建交互式、功能丰富的地图,包括添加自定义...

    OpenLayers学习心得

    ### OpenLayers 学习心得与关键技术点解析 #### 一、OpenLayers 项目介绍 **OpenLayers** 是一款由 MetaCarta 公司开发的 WebGIS 客户端 JavaScript 库,当前最新版本为 2.5 版本。该库遵循 BSD 许可证发布,这...

    openlayers3入门教程

    而Vector类型适用于加载矢量数据,比如绘制的点、线、面几何图形,也适用于临时图层,以便于查询、定位和绘图等操作。 OL3的框架是一个JavaScript类库,它基于JavaScript的标准进行对象创建和方法调用,使得开发者...

    OpenLayers学习心得.doc

    OpenLayers中的BaseTypes是用于定义底层类和定制JS内置类的。它提供了一些基本的数据类型和工具,如Geometry、Feature、Layer等。 四、BaseTypes:OpenLayers中定制JavaScript内置类 OpenLayers中的BaseTypes还提供...

    openlayers实现地图测距测面

    总的来说,OpenLayers 提供了丰富的API和工具,使得在Web应用中实现地图测距和测面变得相对简单。通过创建交互、监听事件、处理用户输入和绘制几何图形,你可以构建出强大的地图测量功能。记住,为了获得最佳效果,...

    OpenLayers地图重点属性摘录

    ### OpenLayers地图重点属性摘录 #### 一、OpenLayers简介及版本标识 ...以上是对OpenLayers中一些核心属性和功能的详细介绍,这些内容对于初学者来说非常有价值,可以帮助他们更好地理解和掌握OpenLayers的使用方法。

    openlayers资料收集

    ### OpenLayers核心知识点详解 #### 一、OpenLayers概述及发展历程 **OpenLayers** 是一款...以上内容涵盖了 OpenLayers 的主要知识点和技术细节,希望能够帮助读者深入理解和掌握 OpenLayers 的核心概念和使用方法。

    ol-layerswitcher:OpenLayers的图层控制

    与OpenLayers版本3、4、5和6兼容(有关安装适用于OpenLayers的ol-layerswitcher版本的信息请参阅中ol-layerswitcher )。例子这些示例演示了用法,并且可以通过在线查看这些示例:创建一个图层切换器控件。 图层...

    管理地图的堆栈层1

    此外,`ol.layer.Base`类提供了`setOpacity`和`setVisible`方法来分别改变图层的透明度和可见性。 对于更复杂的交互,比如用户可以通过拖放操作来改变图层顺序,可以监听jQuery UI的`sortstop`事件,更新图层的`...

    一个基于SVG的WebGIS源代码【实例】

    7. **WebGIS开发框架**:虽然未明确提及,但此实例可能使用了某种WebGIS框架,如OpenLayers、Leaflet或Esri ArcGIS API for JavaScript,这些框架简化了SVG地图的构建和交互实现。 8. **服务器端技术**:考虑到文件...

    OS-Places:演示和代码示例的OS Places存储库

    此外,还提供了和Openlayers示例,以简化Geosearch资源。 注册OS Places API的API密钥。 对于OS Places API的完整文档可以找到,而OS Places API的服务条款,可以发现。 ##执照 这些演示是根据。

    stl-county-municipalities:圣路易斯市的 Baselayer 地图

    这个项目可能利用了地图技术,特别是JavaScript库如Leaflet或OpenLayers,来创建交互式地图,让用户能够查看和探索2014年11月时的最新市政界限。Baselayer通常指的是地图应用中的基础图层,它是地图上显示的所有其他...

    dojoMap Demo

    Dojo 1.5版本包含了 dojo/_base、dijit、dojox等核心模块,这些模块提供了大量的API和组件,用于构建富互联网应用(RIA)。 在【dojoMap Demo】中,关键知识点包括: 1. **Dojo模块加载机制**:Dojo采用AMD...

    sitoBase

    9. 扩展性:为了处理高并发访问,"siteBase"可能设计为分布式系统,利用负载均衡和集群技术来确保服务的稳定性和可扩展性。 10. 数据可视化:通过图表、热力图等形式,"siteBase"可能提供数据可视化工具,帮助用户...

Global site tag (gtag.js) - Google Analytics