OpenLayers.Layer.Vector及OpenLayers.Feature.Vector

最新推荐文章于 2023-08-14 11:21:57 发布

iteye_11116

最新推荐文章于 2023-08-14 11:21:57 发布

阅读量657

点赞数

分类专栏： OpenLayers 文章标签： Feature Vector Popup

本文链接：https://blog.csdn.net/iteye_11116/article/details/82538915

版权

OpenLayers 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<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 οnlοad="init()">
<div>
<div id="map" class="smallmap"></div>
</div>
</BODY>
</HTML>
</div>

iteye_11116

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers.Layer.Vector及OpenLayers.Feature.Vector

OpenLayer : Feature Select 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 ...
复制链接

扫一扫

专栏目录