抽点时间从OpenLayers官方网站上找些例子具体解释一下Map、Vector、Feature类的简单用法。有些东西是自己工作经验的理解,没完全按英文解释来理解,希望不会对大家造成误解。工作太忙,以后又时间和精力就不断地解释点,目前有100多个例子呢。
以下程序拷到本机应该就能直接应用,我是在Geoserver中运转地
<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>
- 浏览: 170846 次
- 性别:
- 来自: 西安
文章分类
- 全部博客 (163)
- POI (8)
- Collection容器 (1)
- java.util (2)
- java调用批处理 (1)
- xml (1)
- jfreechart (3)
- SVN (1)
- tomcat中文 (1)
- jquery (6)
- Log4j (1)
- ppt (1)
- js (48)
- ss (1)
- 综合 (1)
- Spring (2)
- 数据库 (6)
- tomcat (1)
- commons-lang包使用 (1)
- AJAX【Jquery】 (3)
- RMI (2)
- OpenLayers (25)
- html (20)
- css (25)
- Google地图 (2)
- java (1)
- Ibatis (1)
- GoogleMaps (1)
- J2EE (2)
- 软件设计 (1)
- 服务器 (1)
- html5 (4)
- cursor (1)
- AngularJs (5)
- 缓存 (1)
- 构建 (2)
- 域名、空间、服务器 (1)
发表评论
-
Opanlayers用LineString画多边形
2014-09-24 00:26 1247<!DOCTYPE html> <htm ... -
OpenLayers地图联动
2014-09-23 22:27 978地图联动 -
OpenLayers 选中元素弹框
2014-05-25 23:26 2411写道 http://www.openlayers.org ... -
困扰我的关于OpenLayers的问题终于解决了:
2014-04-15 13:45 1662原因: 添加标记的时候需要加上中扩号-> map.ad ... -
OpenLayers结合Googlemaps中的Tips
2014-04-01 21:29 1357<%@ page language="ja ... -
改变OpenLayers缩放工具条位置以及大小
2014-03-25 23:49 1545<script type="text/ ... -
geometry类和feature类
2013-10-17 02:14 1254我们上面的章节一直使用的都是feature,但是featur ... -
OpenLayers基底图层和叠加图层区别
2013-10-17 00:24 4831OpenLayers有多个不同的图层类,每一个都可以连接到不同 ... -
OpenLeyers矢量图层及矢量元素整合操作
2013-10-14 00:43 1647<%@ page language="java ... -
设置地图缩放控件位置
2013-10-13 22:53 1014map.addControl(new OpenLayers.C ... -
控制地图与div的占据区域【目标:让地图默认占满展现区】
2013-10-13 22:48 1021方法: 设置map的options,由其中两个因 ... -
创建OpenLayers地图步骤
2013-10-13 10:51 1327为地图添加绘制点、线、面步骤: 1、无可厚非对地图进行操作 ... -
获取OpenLayers画图控件画过的图形顶点
2013-10-13 04:18 1830在你使用画图工具画图的时候,画的图会作为你的vlayer的一个 ... -
包含多个图层、缩放条、工具条、鼠标位置、弹出窗口
2015-04-10 01:09 1494<style type="text/css ... -
鼠标点击添加标记
2013-09-22 00:58 2028//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件 ... -
Maker-shadow
2013-09-22 00:30 859<%@ page language="jav ... -
Marker(mousedown)
2013-09-22 00:29 871<%@ page language="jav ... -
OpenLayers>Marker>events(click/mousedown)【地图中标记的事件】
2013-09-22 00:19 2056<%@ page language="jav ... -
OpenLayers创建地图
2015-04-10 01:09 606<html> <head> <m ... -
OpenLayers画多边形
2013-09-19 18:54 2829<!DOCTYPE html> <htm ...
相关推荐
WebGIS之OpenLayers全面解析第2版(2019年出版)示例代码,比OpenLayers 官方的示例好用多了,基于 OpenLayers 5.x 编写(可用于 6.x),含国内各种地图的配合调用,各类扩展组件的开发示例,有了这个,就不要在在...
WebGIS之OpenLayers全面解析随书源码,包含后台数据库代码和前台示例代码,文件解压没有问题
本书主要内容涵盖:WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,*后给出了OpenLayers之项目实战――水利...
WebGIS之OpenLayers全面解析;郭明强,黄颖,谢忠等;程序源代码
webgis之openlayers全面解析,webgis之openlayers全面解析
WebGIS之OpenLayers全面解析的源码 里面包含很多openlayers的demo 样例 各种openlayers自带的小插件 及其自带的各种功能
《WebGIS之OpenLayers全面解析》这本书的源码,亲测有效!!!里面包含两个压缩包,其中一个为数据库文件
本书主要内容涵盖:WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,最后给出了OpenLayers之项目实战——水利...
map map openlayers例子
对于openlayers 3自带例子很详细的说明
介绍了openlayers的一些典型例子,对学习openlayers很有帮助
之前网上下的,没有标签或标签不对,于是我自己重新整理了一下目录书签。
本源码主要内容涵盖:WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,最后给出了OpenLayers之项目实战——...