老糊涂
- 浏览: 171436 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (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)
<div class="iteye-blog-content-contain" style="font-size: 14px">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OpenLayer : Feature Select</title>
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map = null;
var wms_url = "http://wms.jpl.nasa.gov/wms.cg";//http://wms.jpl.nasa.gov/wms.cg
var wms_version = "1.3.0";
var layer_name = 'country';
var wms_layer = null;
var vector_layer = null;
var select_control = null; // SelectFeature Control
var wkt_reader = null;
var point = "POINT(-10 -10)";
var line = "LINESTRING(-180 90, 0 0)";
var polygon = "POLYGON(0 0,0 90,180 90,180 0,0 0)";
function init()
{
//创建map对象，
map = new OpenLayers.Map("map");
wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
wms_url,
{layers: layer_name, version: wms_version},
{singleTile: true});
vector_layer = new OpenLayers.Layer.Vector("Vector");
// 添加图层
map.addLayers([wms_layer, vector_layer]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
// 在Vector图层上添加图元element
addFeature(point , vector_layer);
addFeature(line , vector_layer);
addFeature(polygon, vector_layer);
vector_layer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(20,20)));
addSelectControl(map, vector_layer);
// 放大到全屏
map.zoomToMaxExtent();
}
function addSelectControl(map, vector_layer)
{
if(select_control!=null)
{
return ;
}
select_control = new OpenLayers.Control.SelectFeature(vector_layer,
{
hover: false,
onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect
});
map.addControl(select_control);
select_control.activate();
}
function addFeature(wkt, layer)
{
var geometry = toGeometryFromWkt(wkt);
if(wkt!=null)
{
layer.addFeatures(geometry);//geometry:OpenLayers.Feature.Vector类型
}
}
function toGeometryFromWkt(wkt)
{
var geometry = null;
if(wkt_reader==null)
{
wkt_reader = new OpenLayers.Format.WKT();
}
geometry = wkt_reader.read(wkt);//read方法返回OpenLayers.Feature.Vector类型
return geometry;
}
// Feature 选中事件响应
function onFeatureSelect(feature)
{
selectedFeature = feature;
//feature代表Openlayers.Layer.Vector类型的对象，可以理解为一张画布
//feature.geometry可以是：Point,line,polygon等几何图形的父类
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.id+"<br/>点的lon: "
+ feature.geometry.x+",点的lat: "+feature.geometry.y+"<br/>"+"<br />Area: "
+ feature.geometry.getArea()+"<br>lat: "+feature.geometry.bounds.centerLonLat.lat+",lon: "
+ feature.geometry.bounds.centerLonLat.lon+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
// Feature取消选中事件响应
function onFeatureUnselect(feature)
{
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function onPopupClose(evt) {
select_control.unselect(selectedFeature);
}
</script>
</HEAD>
<BODY onload="init()">
<div>
<div id="map" class="smallmap"></div>
</div>
</BODY>
</HTML>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OpenLayer : Feature Select</title>
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map = null;
var wms_url = "http://wms.jpl.nasa.gov/wms.cg";//http://wms.jpl.nasa.gov/wms.cg
var wms_version = "1.3.0";
var layer_name = 'country';
var wms_layer = null;
var vector_layer = null;
var select_control = null; // SelectFeature Control
var wkt_reader = null;
var point = "POINT(-10 -10)";
var line = "LINESTRING(-180 90, 0 0)";
var polygon = "POLYGON(0 0,0 90,180 90,180 0,0 0)";
function init()
{
//创建map对象，
map = new OpenLayers.Map("map");
wms_layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
wms_url,
{layers: layer_name, version: wms_version},
{singleTile: true});
vector_layer = new OpenLayers.Layer.Vector("Vector");
// 添加图层
map.addLayers([wms_layer, vector_layer]);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
// 在Vector图层上添加图元element
addFeature(point , vector_layer);
addFeature(line , vector_layer);
addFeature(polygon, vector_layer);
vector_layer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(20,20)));
addSelectControl(map, vector_layer);
// 放大到全屏
map.zoomToMaxExtent();
}
function addSelectControl(map, vector_layer)
{
if(select_control!=null)
{
return ;
}
select_control = new OpenLayers.Control.SelectFeature(vector_layer,
{
hover: false,
onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect
});
map.addControl(select_control);
select_control.activate();
}
function addFeature(wkt, layer)
{
var geometry = toGeometryFromWkt(wkt);
if(wkt!=null)
{
layer.addFeatures(geometry);//geometry:OpenLayers.Feature.Vector类型
}
}
function toGeometryFromWkt(wkt)
{
var geometry = null;
if(wkt_reader==null)
{
wkt_reader = new OpenLayers.Format.WKT();
}
geometry = wkt_reader.read(wkt);//read方法返回OpenLayers.Feature.Vector类型
return geometry;
}
// Feature 选中事件响应
function onFeatureSelect(feature)
{
selectedFeature = feature;
//feature代表Openlayers.Layer.Vector类型的对象，可以理解为一张画布
//feature.geometry可以是：Point,line,polygon等几何图形的父类
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.id+"<br/>点的lon: "
+ feature.geometry.x+",点的lat: "+feature.geometry.y+"<br/>"+"<br />Area: "
+ feature.geometry.getArea()+"<br>lat: "+feature.geometry.bounds.centerLonLat.lat+",lon: "
+ feature.geometry.bounds.centerLonLat.lon+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
// Feature取消选中事件响应
function onFeatureUnselect(feature)
{
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function onPopupClose(evt) {
select_control.unselect(selectedFeature);
}
</script>
</HEAD>
<BODY onload="init()">
<div>
<div id="map" class="smallmap"></div>
</div>
</BODY>
</HTML>
</div>
分享到：
发表评论
-
Opanlayers用LineString画多边形
2014-09-24 00:26 1250<!DOCTYPE html> <htm ... -
OpenLayers地图联动
2014-09-23 22:27 978地图联动 -
OpenLayers 选中元素弹框
2014-05-25 23:26 2414写道 http://www.openlayers.org ... -
困扰我的关于OpenLayers的问题终于解决了:
2014-04-15 13:45 1663原因： 添加标记的时候需要加上中扩号-> map.ad ... -
OpenLayers结合Googlemaps中的Tips
2014-04-01 21:29 1358<%@ page language="ja ... -
改变OpenLayers缩放工具条位置以及大小
2014-03-25 23:49 1549<script type="text/ ... -
geometry类和feature类
2013-10-17 02:14 1260我们上面的章节一直使用的都是feature，但是featur ... -
OpenLayers基底图层和叠加图层区别
2013-10-17 00:24 4832OpenLayers有多个不同的图层类，每一个都可以连接到不同 ... -
OpenLeyers矢量图层及矢量元素整合操作
2013-10-14 00:43 1649<%@ page language="java ... -
设置地图缩放控件位置
2013-10-13 22:53 1016map.addControl(new OpenLayers.C ... -
控制地图与div的占据区域【目标：让地图默认占满展现区】
2013-10-13 22:48 1026方法： 设置map的options，由其中两个因 ... -
创建OpenLayers地图步骤
2013-10-13 10:51 1328为地图添加绘制点、线、面步骤： 1、无可厚非对地图进行操作 ... -
获取OpenLayers画图控件画过的图形顶点
2013-10-13 04:18 1833在你使用画图工具画图的时候，画的图会作为你的vlayer的一个 ... -
包含多个图层、缩放条、工具条、鼠标位置、弹出窗口
2015-04-10 01:09 1500<style type="text/css ... -
OpenLayers例子解析
2013-09-22 01:26 3159抽点时间从OpenLayers官方网站上找些例子具体解释一下M ... -
鼠标点击添加标记
2013-09-22 00:58 2036//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件 ... -
Maker-shadow
2013-09-22 00:30 862<%@ page language="jav ... -
Marker(mousedown)
2013-09-22 00:29 876<%@ page language="jav ... -
OpenLayers>Marker>events(click/mousedown)【地图中标记的事件】
2013-09-22 00:19 2058<%@ page language="jav ... -
OpenLayers创建地图
2015-04-10 01:09 610<html> <head> <m ...
相关推荐
openlayers.js库及入门事例； OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以...
开发时,有时候图层很多,需要有同时打开关闭多个图层的功能,但是正式版的layerSwitcher不支持group layer功能. 从网上搜到layerSwitcher的...对layerSwitcher.js进行修改后,需要重新build一下,生成新的openlayers.js
OpenLayers.2.10.Beginners.Guide （英文版） 非常好的OpenLayers的入门及工具书，强烈推荐
OpenLayers.mobile.debug.js
OpenLayers.debug.js
Packt.OpenLayers.3.x.Cookbook.2nd.Edition.2016.3.pdf
OpenLayers.2.10.Beginners.Guide原书pdf和书中所有代码
Packt.OpenLayers.2.10.Beginner's.Guide英文pdf電子檔
第3章：走进Openlayers.rar
OpenLayers最新源码，包含v6.2.1和v6.2.1-dist。Github下载太慢，放到这里，需要的朋友可以下载。
openlayers.zip
作为实战中vue+openlayers+geoserver文章的资源文件
openlayers开发用到的js库.zip
openlayer ol.js ol.css
解决openlayers跨域访问的解决方案,按照附件中说明.txt中步骤操作应该是没问题的，我已经测试过。
OpenLayers 2.10 Beginner's Guide Create, optimize, and deploy stunning cross-browser web maps with the OpenLayers JavaScript web-mapping library ...要有点英文阅读能力，不错的openlayer 入门书籍。
2015_OpenLayers_3_入门教程详细版.docx 加 js 包
Heatmap热图,可以非常直观的呈现一些原本不易理解或表达的数据,比如密度、频率、温度等,改用区域和颜色这种更容易被人理解的方式来呈现。热图实际上是三维可视化的...
OpenLayers网站构建实用程序使用main的更新来更新站点要求您已安装和 。 当前，构建网站还需要所有openlayers。 # only once: clonegit clone -b build ... 这将从openlayers存储库的main分支中更新站点文档和示例。...