openlayers 学习笔记（三）

最新推荐文章于 2021-11-23 17:14:22 发布

真心若骄阳

最新推荐文章于 2021-11-23 17:14:22 发布

阅读量3.7k

点赞数

分类专栏： OpenLayers框架文章标签： stylesheet function input null basic div

OpenLayers框架专栏收录该内容

9 篇文章 1 订阅

订阅专栏

（来源：http://nwaybygreifen.spaces.live.com/blog/cns!6220A29AE9D7B87!229.trak）

1.1 矢量要素选择

在4.1节的源码中已经涉及

对于要素选择基本可以理解为以下几步。

① 定义 control:OpenLayers.Control.DrawFeature

分为hover和非hover

select: new OpenLayers.Control.SelectFeature(

vectors,

{

clickout: false, toggle: false,

multiple: false, hover: false,

toggleKey: "ctrlKey", // ctrl key removes from selection

multipleKey: "shiftKey", // shift key adds to selection

box: true

}

selecthover: new OpenLayers.Control.SelectFeature(

vectors,

{

multiple: false, hover: true,

toggleKey: "ctrlKey", // ctrl key removes from selection

multipleKey: "shiftKey" // shift key adds to selection

}

)

② Map.addControl

③ Control.active()

1.2 矢量要素拖动

对于要素拖动基本可以理解为以下几步。

① 定义 control: OpenLayers.Control.DragFeature(图层名称)

② Map.addControl

③ Control.active()

1.3 获取矢量要素信息

对于获取要素信息基本可以理解为以下几步。

① 选中要素，就获取了Feature对象。对于填加要素的同时，也是选中的一种情况。

② 应用Feature的有关属性获取几何或属性信息。

一个比较综合的例子，编辑要素、获取GML要素属性信息

注：feature.attributes.name:获取gml中要素的属性值。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Open Popup on Layer.Vector</title>

<link rel="stylesheet" href="theme/default/style.css" type="text/css" />

<link rel="stylesheet" href="style.css" type="text/css" />

<style type="text/css">

#controlToggle li {

list-style: none;

}

</style>

<script src="lib/OpenLayers.js"></script>

<script type="text/javascript">

var map, drawControls, selectControl, selectedFeature;

function onPopupClose(evt) {

selectControl.unselect(selectedFeature);

}

/**********************************************************************

***选择要素动作

***弹出要素信息

***********************************************************************/

function onFeatureSelect(feature) {

selectedFeature = feature;

popup = new OpenLayers.Popup.FramedCloud("chicken",

feature.geometry.getBounds().getCenterLonLat(),

null,

"<div style='font-size:.8em'>Feature: " + feature.attributes.name +"<br />Area: " + feature.geometry.getArea()+"</div>",

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}

function onFeatureUnselect(feature) {

map.removePopup(feature.popup);

feature.popup.destroy();

feature.popup = null;

}

function init(){

map = new OpenLayers.Map('map');

var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});

var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

//var polygonLayer=new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));

var gmlLayer=new OpenLayers.Layer.GML("GML", "gml/polygon.xml");

map.addLayer(gmlLayer);

map.addLayers([wmsLayer, polygonLayer]);

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.addControl(new OpenLayers.Control.MousePosition());

selectControl = new OpenLayers.Control.SelectFeature(gmlLayer,

{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

drawControls = {

polygon: new OpenLayers.Control.DrawFeature(polygonLayer,

OpenLayers.Handler.Polygon),

select: selectControl

};

for(var key in drawControls) {

map.addControl(drawControls[key]);

}

map.setCenter(new OpenLayers.LonLat(0, 0), 3);

}

/**********************************************************************

***选择触发函数

drawControls在init()中已经定义（polygon,select）

***********************************************************************/

function toggleControl(element) {

for(key in drawControls) {

var control = drawControls[key];

if(element.value == key && element.checked) {

control.activate();

} else {

control.deactivate();

}

</script>

</head>

<body onLoad="init()">

<h1 id="title">Open Popup on Layer.Vector</h1>

<p id="shortdesc">

Using a Control.SelectFeature, open a popup on click.

</p>

<div id="map" class="smallmap"></div>

<ul id="controlToggle">

<li>

<input type="radio" name="type" value="none" id="noneToggle"

οnclick="toggleControl(this);" checked="checked" />

<label for="noneToggle">navigate</label>

</li>

<li>

<input type="radio" name="type" value="polygon" id="polygonToggle"

οnclick="toggleControl(this);" />

<label for="polygonToggle">draw polygon</label>

</li>

<li>

<input type="radio" name="type" value="select" id="selectToggle"

οnclick="toggleControl(this);" />

<label for="selectToggle">select polygon on click</label>

</li>

</ul>

<p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature

to do fun things -- like open a popup.

</p>

</body>

</html>

真心若骄阳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
openlayers 学习笔记（三）

（来源：http://nwaybygreifen.spaces.live.com/blog/cns!6220A29AE9D7B87!229.trak）1.1 矢量要素选择在4.1节的源码中已经涉及对于要素选择基本可以理解为以下几步。① 定义 control:OpenLayers.Control.DrawFeature分为hover和非hoverselect:
复制链接

扫一扫